Merge branch 'websocket-server' into main

Author: Gr3at

README.md

@@ -12,8 +12,15 @@ This implementation utilizes:
 - [x] Start the simple (default) json-server with `yarn serve:json`. (add commit hash)
 Run `curl http://localhost:3000/transactions` on a separate terminal to retrieve all transaction records.
 
-- [x] Start the custom json-server with `yarn serve:custom-json`. (add commit hash)
+- [x] Start the fully capable custom websocket-json-server with `yarn serve`. (add commit hash)
     - [x] This script allows serving endpoint under a subpath, e.g. `/api/`,
     - [x] as well as extend json-server functionality with custom logic (e.g. datetime filtering).
+    - [x] Add websocket capabilities on top of the custom server, under the subpath `/feed`.
+
 Run `curl http://localhost:4000/api/transactions` on a separate terminal to retrieve all transaction records.
+
 Or `curl -X GET "http://127.0.0.1:4000/api/transactions/?datetime=2022-06-26T10:00:00Z"` to retrieve transaction after the provided datetime.
+
+Connect to the WebSocket on the endpoint `ws://localhost:4000/feed`.
+
+Use a reverse proxy with TLS termination capabilities (e.g. NGinX, Caddy) to enable secure communications.

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "serve:json": "json-server --watch src/json-server-db.json",
-    "serve:custom-json": "node src/index.js"
+    "serve": "node src/index.js"
   },
   "dependencies": {
     "json-server": "^0.17.0",

src/index.js

@@ -1,8 +1,11 @@
 const http = require('http');
+const webSocketServer = require('./websocket-routes');
 const jsonServerApp = require('./json-routes');
 
 const server = http.createServer(jsonServerApp);
 
+webSocketServer(server, '/feed', 5_000);
+
 server.listen(4000, '0.0.0.0', () => {
-  console.log('HTTP (JSON) Server is running');
+  console.log('HTTP (JSON/WebSocket) Server is running');
 });

src/json-routes.js

@@ -1,6 +1,7 @@
 const jsonServer = require('json-server');
 const app = jsonServer.create();
-const router = jsonServer.router('./src/json-server-db.json');
+const jsonDB = require('./json-server-db.json');
+const router = jsonServer.router(jsonDB);
 const middlewares = jsonServer.defaults();
 
 app.use(middlewares);
@@ -24,7 +25,10 @@ app.get('/api/transactions/', (req, res) => {
 });
 
 
-// Add any auto-generated routes from json-server-db.json
+/**
+ * Add any auto-generated routes from json-server-db.json
+ * This will automatically serve 'notifications' under the /api/notifications/ endpoint.
+ */
 app.use('/api', router);
 
 module.exports = app;

src/json-server-db.json

@@ -27,5 +27,19 @@
         "itemAgreedPrice": 5.2,
         "priceUnit": "€"
       }
+    ],
+    "notifications":[
+      {
+        "uuid": "8437d56c-2131-4742-a087-ebe8c1036307",
+        "datetime": "2022-06-27T10:00:00Z",
+        "readStatus": "READ",
+        "message": "Some text message or inner JSON."
+      },
+      {
+        "uuid": "a7410c73-bc77-44a7-833e-0cdef2dd0665",
+        "datetime": "2022-06-27T11:00:00Z",
+        "readStatus": "UNREAD",
+        "message": "Another text message or inner JSON."
+      }
     ]
   }

src/websocket-routes.js

@@ -0,0 +1,93 @@
+const WebSocketServer = require('ws').WebSocketServer;
+const parse = require('url').parse;
+const mockNotifications = require('./json-server-db.json').notifications;
+
+/**
+ * newNotificationObj A notification that is intented to be delivered after Xmsec,
+ * instead during the initial 'db' lookup.
+ * Part of the `on('connection',()=>{}) callback`.
+ */
+const newNotificationObj = {
+  uuid: "ed3c55cc-0f6a-46d8-8b08-59623c949103",
+  timestamp: "2022-06-10T11:00:00Z",
+  readStatus: "UNREAD",
+  message: "A new text message or inner JSON.",
+};
+
+const responseNotificationObj = {
+  uuid: "50522abe-2758-45cd-9ec7-d26573856f6d",
+  timestamp: "2022-06-10T12:00:00Z",
+  readStatus: "READ",
+  message: "Changes accepted.",
+};
+
+
+/**
+ * The websocket part of the mock server along with some http server specific handlings (upgrade, match route).
+ * To test connectivity use any ws test client (e.g. postman, or some browser extension and connect to `ws://localhost:4000/feed`).
+ * Upon connection, any existing db notifications will be received. After 5 seconds, a new notification will automatically arrive,
+ * overriding the old message.
+ * Send a test message, e.g. {"userResponse": "UPDATE_BID"} to trigger the 'on message' logic execution.
+ * @param {*} httpServer The underlying http Server instance. This will actually serve the ws endpoint(s).
+ * @param {*} wsPathName The pathname of the ws capable endpoint
+ * @param {*} feedIntervalStep This is an interval to emulate some external event, resulting in the presence of a new notification object. In Xmsec a new notification will arrive, emulating automated real-time message delivery.
+ */
+module.exports = (httpServer, wsPathName = '/feed', feedIntervalStep = 30_000) => {
+  const notificationsWS = new WebSocketServer({ noServer: true });
+  let responseTimeout;
+  let feedInterval;
+
+  notificationsWS.on('connection', function onConnection(ws, connectionRequest) {
+    console.log('WebSocket connection established');
+    // Send any existing db notifications.
+    ws.send(JSON.stringify({ notifications: mockNotifications }));
+
+    feedInterval = setInterval(() => {
+      // this could also be a setTimeout since it's just a single, notification item, message emulated.
+      ws.send(JSON.stringify({ notifications: [newNotificationObj] })); // send array of objects, to be consistent of what to expect in the client side.
+      console.debug('Interval placeholder to send new notifications.');
+    }, feedIntervalStep);
+
+    /**
+     * Register the on message callback. Executed each time a web app/client, sends data to the ws server.
+     */
+    ws.on('message', function onMessage(data) {
+      try {
+        let dataObj = JSON.parse(data); // assuming json payload
+        console.log(`Received message from web client with data: ${data}.`);
+
+        // assuming the client sends an object with the 'userResponse' attribute in, set to 'UPDATE_BID'.
+        if (dataObj?.userResponse === "UPDATE_BID") {
+          responseTimeout = setTimeout(() => {
+            ws.send(JSON.stringify({ notifications: [responseNotificationObj] }));
+          }, 1_000);
+        }
+      }
+      catch (error) {
+        // handle error
+      }
+    });
+
+    /**
+     * Register the on close callback. Cleanup before closing the connection.
+     */
+    ws.on('close', () => {
+      clearInterval(feedInterval);
+      clearTimeout(responseTimeout);
+      console.log('WebSocket connection closed.');
+    });
+  });
+
+  httpServer.on('upgrade', function upgrade(request, socket, head) {
+    const { pathname } = parse(request.url);
+
+    if (pathname === wsPathName) {
+      notificationsWS.handleUpgrade(request, socket, head, function done(ws) {
+        notificationsWS.emit('connection', ws, request);
+      });
+    } else {
+      console.log('Closing the socket!!');
+      socket.destroy();
+    }
+  });
+};