COMP1531
📚 Full-stack - HTTP Servers
Lecture 4.2
Author(s): Hayden Smith
In this lecture
Why? 🤔
- Web servers are fundamental part of web-based full-stack software
What? 📰
- Networks
- Express Server
- APIs
- Crud
🌐 Networks
- Network: A group of interconnected computers that can communicate
- Internet: A global infrastructure for networking computers around the entire world together
- World Wide Web: A system of documents and resources linked together, accessible via URLs
Network
Internet
Web
🌐 Networks
If you want to learn more about networking, go and study COMP3331.
🌐 Network Protocols
- Communication over networks must have a certain "structure" so everyone can understand.
- Humans do this all the time - waving, handshakes, clapping. Standard operation procedure that structures how we share info.
- Different "structures" (protocols) are used for different types of communication.
🌐 Network Protocols
HTTP is an example of one of the protocols. It is the protocol of the web. The primary protocol you use to access URLs in your web browser.
🌐 Network Protocols
Examples
🕸 HTTP
HTTP: Hypertext Transfer Protocol
I.E. Protocol for sending and receiving HTML documents (nowadays much more)
Web Browsers (Client)
➡️
⬅️
Web Servers
Web browsers are applications to request and receive HTTP.
🍕 NodeJS Express Server
A very popular npm library exists to allow you to run your own HTTP server with NodeJS. It's called Express Server.
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
This is us importing the express library
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
This creates an instance of a server, and we define the network port to run on.
A port is essentially one of the roads in and out of a computer's network. There are often 65,000-ish.
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
This line is a quirk of express that is required in order for the data of many requests to be interpreted.
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
This says that "when URL / is accessed, call this function". The function sends some text to the person accessing that URL.
If we want our server to do more, we need to write lots more of these.
🍕 NodeJS Express Server
import express from 'express'; const app = express(); const port = 3000; app.use(express.text()); app.get('/potatotheory', (req, res) => { const name = req.query.name; res.json({ "message": `Hi ${name}`, }); }); app.post('/yuchao', (req, res) => { res.json({ name: 'Yuchao!', }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
This line actually starts the server (on a particular port). It essentially runs an infinite loop so the program runs forever constantly waiting for new people to "access" it via a certain URL.
Let's take a step back to learn about what servers are used for.
🪟 API
An API (Application Programming Interface) refers to an interface exposed by a particular piece of software.
The most common usage of "API" is for Web APIs, which refer to a "contract" that a particular service provides. The interface of the service acts as a black box and indicates that for particular endpoints, and given particular input, the client can expect to receive particular output.
🪟 Web API
🪟 RESTful API
A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. These 4 methods describe the "nature" of different API requests.
GET, PUT, POST, DELETE are HTTP Methods. They refer to CRUD operations.
| Method | Operation |
|---|---|
| POST | Create |
| GET | Read |
| PUT | Update |
| DELETE | Delete |
🪟 RESTful API
Different CRUD methods require different approaches for input. All output are the same.
import express from 'express'; const app = express(); const port = 3001; app.use(express.text()); app.get('/apple', (req, res) => { const name = req.query.name; res.send(JSON.stringify({ msg: `Hi ${name}, thanks for sending apple!`, })); }); // same for .put and .delete app.post('/orange', (req, res) => { const body = JSON.parse(req.body); const name = body.name; res.send(JSON.stringify({ msg: `Hi ${name}, thanks for sending orange!`, })); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🪟 RESTful API
Some methods of input work for all CRUD methods. Also, two routes can be the same name if they have different methods.
import express from 'express'; const app = express(); const port = 3001; app.use(express.text()); app.get('/apple/:name', (req, res) => { const name = req.params.name; res.send(JSON.stringify({ msg: `Hi ${name}, thanks for sending apple!`, })); }); app.post('/apple/:name', (req, res) => { const name = req.params.name; res.send(JSON.stringify({ msg: `Hi ${name}, thanks for sending apple!`, })); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🪟 RESTful API
Different CRUD properties require different approaches for input.
- For inputs:
- GET|DELETE: either via
req.query(capture URL query string)req.params(capture URL path variable)
- PUT|POST: either via
req.body(capture body)req.params(capture URL path variable)
- GET|DELETE: either via
- For outputs:
- All outputs should be packaged up as JSON
🪟 RESTful API
If we are embrace the use of JSON everywhere, we can make use of other library feature to clean up the code.
import express from 'express'; const app = express(); const port = 3001; app.use(express.json()); app.get('/apple', (req, res) => { const name = req.query.name; res.json({ msg: `Hi ${name}, thanks for sending apple!`, }); }); // same for .put and .delete app.post('/orange', (req, res) => { const name = req.body.name; res.json({ msg: `Hi ${name}, thanks for sending orange!`, }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🪟 RESTful API
If we are embrace the use of JSON everywhere, we can make use of other library feature to clean up the code.
import express from 'express'; const app = express(); const port = 3001; app.use(express.json()); app.get('/apple', (req, res) => { const name = req.query.name; res.json({ msg: `Hi ${name}, thanks for sending apple!`, }); }); // same for .put and .delete app.post('/orange', (req, res) => { const name = req.body.name; res.json({ msg: `Hi ${name}, thanks for sending orange!`, }); }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🪟 RESTful API
Sometimes we put version numbers in our routes to help us keep track, e.g.:
- /v1/names/list
- /v2/names/list
- /v3/names/list
You will work with this principle in your major project.
🪟 RESTful API
Task
Create a web server that uses CRUD to allow you to create, update, read, and delete a point via HTTP requests
Use a global variable to manage the state.
⚠️ Returning errors
Restful APIs can also return errors:
import express from 'express'; const app = express(); const port = 3001; app.use(express.text()); app.get('/apple/:name', (req, res) => { const name = req.params.name; if (name === 'Hayden') { res.status(400).json({ error: 'Bad name', }); } else { res.json({ msg: `Hi ${name}, thanks for sending apple!`, }); } }); app.listen(port, () => { console.log(`Listening on port ${port}`); });
🔊 Talking to a web server
How can we talk to a web server as a client?
- API client
- Web Browser
- An NPM library:
sync-requests
🔊 API Client (ARC, Postman)
How to download/install ARC:
- Open google chrome
- Google "ARC client"
- Install the addon and open it
- Follow the demo in the lectures
You may need to use a tool like this in the final exam.
🔊 API Client (ARC, Postman)
🔊 Web Browser
🔊 Requests Library
We can use an npm package sync-requests to allow us to programatically send RESTful API requests. npm install sync-requests.
We can send them to our previous server.
import request from 'sync-request'; const res = request( 'GET', 'http://localhost:3001/apple', { qs: { name: 'Hayden', } } ); console.log(JSON.parse(String(res.getBody())));
Let's look at the sync-request library to see if we can remove name=Hayden from URL.
🍅 Working with jest
import request from 'sync-request'; function get(route: string, qs: any) { const res = request( 'GET', `http://localhost:3001${route}`, { qs: qs, } ); return JSON.parse(String(res.getBody())); } describe('Test Apple', () => { test('If it returns a name string successfully', () => { const bodyObj = get('/apple', { name: 'Hayden', }); expect(bodyObj.msg).toBe('Hi Hayden, thanks for sending apple!'); }); }); describe('Test Orange', () => { test('If it returns a name string successfully', () => { const res = request( 'POST', 'http://localhost:3001/orange', { json: { name: 'Hayden' }, } ); const bodyObj = JSON.parse(String(res.getBody())); expect(bodyObj.msg).toBe('Hi Hayden, thanks for sending orange!'); }); });
🤗 How to wrap into project
In general, iteration 2 requires that you implement an HTTP server. However! Many of the routes that exist in iteration 2 are just wrappers of your iteration 1 functions.
Therefore it should be easy to "wrap" your iteration 1 functions with an HTTP server. I.E. Most of the "server" stuff you'll do is just routing, gathering bodies, and returning responses, while treating your iteration 1 functions like blackboxes.
🎁 Optional! Making life easier.
Did you know we can make node auto restart if new files are compiled?
If we:
- Run
npm install --save-dev nodemon - Replace
nodewithnodemoninpackage.tson
Then run npm run start in a separate terminal.
🎁 Optional! Making life easier.
Did you know we can make tsc auto run if source files are changed?
If we:
- Add
--watchflag totsccommand
Then run npm run tsc in a separate terminal.
👂🏼Feedback
Or go to the form here.