The API is a backend Express application which serves as a message broker for websockets.
Install yarn globally. This assumes that you already have NPM and NODE installed.
npm install -g yarn
Initialize the app and the package.json
file
npm init -y
Add the basic packages that we will need. I am including nodemon which will make it easier to make changes during development by live reloading of the app.
yarn add express socket.io nodemon
We set up our server here. It will log a message each time a different client/user connects to it.
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const port = 4001;
const io = require("socket.io")(server, { origins: "*:*" });
io.sockets.on("error", (e) => console.log(e));
server.listen(port, () => console.log(`Server is running on port ${port}`));
app.get('/', (req, res) => res.send('Hello Wacuri!'))
io.sockets.on("connection", (socket) => {
console.log("A connection was established to Socket:", socket);
});
To start our server, we modify our package.json
scripts to use our index.js file and with nodemon instead of node, giving us hot reloading. In our terminal we just need to type yarn start in a dedicated terminal each time we want to start the server.
"scripts": {
"start": "nodemon ./src/index.js"
},
In order to do this we will use Ngrok to setup a public URL, https://ngrok.com/. You will be given instructions when you register. Once we have setup an account and have the executable on our system, we can run it. 4001
is the port number we are using for our server. More instructions here: https://ngrok.com/docs#getting-started-expose.
./ngrok http 4001
ngrok will print out information like this:
Session Status online Account Alex Scott (Plan: Free) Version 2.3.38 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://417c4c64df9b.ngrok.io -> http://localhost:4001 Forwarding https://417c4c64df9b.ngrok.io -> http://localhost:4001 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00
Also, you can visit the link that Ngrok provides you, under “forwarding” above, and you should see a message about being connected. These are dynamic links and change everytime we connnect/ reconnect.