HowTo: Websocket-JavaScript-Express

The websocket protocol is an extremely powerful protocol for bidirectional communication over the internet. It is used already by many websites to refresh data incrementally and/or periodically. It can also be used outside browsers for bidirectional communication between two (server side) endpoints. Once a websocket connection is established, both server and client can send messages over the connection repeatedly with no limits on the number of messages or on the duration of the connection. After a connection has been established the protocol is symmetric in the sense that both server and client can send and receive messages. There is in fact no difference between client and server after a connection has been made. The protocol is very easy to use. I have made a minimal example of the use of a websocket connection that is initiated from a JavaScript program. It is also possible to initiate a websocket connection from a browser; the details are slightly different from the JavaScript case and are described here.

Web service build with Express, containing a single websocket service published on the path ‘/socket’ (file webservice.js):

var express = require('express');
var app = express();
var expressWs = require('express-ws')(app);
app.ws('/socket', function(ws, req) {
    var counter = 0;
    setInterval(() => {
        counter += 1;
        ws.send('Server generated message #' + counter);
    }, 1000);
    ws.on('message', function(mes) {
        console.log('Message received from client: ' + mes);
    });
})
app.listen(6060, function() {
    console.log('WS server listening on port 6060...');
});

Web page, containing a WebSocket object that encapsulates the websocket connection. The easiest way to serve one static HTML page is to embed it in an Express web service accessible via one fixed path (file jsclient.js).

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:6060/socket');
ws.on('open', function open() {
    console.log('Connection Opened ');
    let counter = 0
    setInterval(() => {
        counter += 1;
        ws.send('Client generated message #' + counter);
    }, 1370);
});
ws.on('message', function incoming(data) {
    console.log('Message received from server: ', data);
});

To make things work, one has to set up a JavaScript project with the following package.json file:

{
    "name": "MinimalWebsocketWsExpress",
    "version": "1.0.0",
    "description": "",
    "main": "",
    "keywords": [],
    "author": "J.C. Verheul",
    "license": "ISC",
    "dependencies": {
        "express": "^4.14.0",
        "express-ws": "^4.0.0",
        "ws": "^5.2.1"
    }
}

The project is build and executed with NPM and Node, so both tools should be installed on your workstation. For this example I used NPM version 5.5.1 and Node version 8.9.3. Older and newer versions of these tools should most likely work as well, since the project is extremely simple. Proceed as follows:

* Put the files webservice.js, jsclient.js and package.json in one working directory, or clone the little project from GitHub.
* Execute npm install
* Execute node webservice.js
* Execute node jsclient.js (from a different command prompt)
The order of starting the server for the web service and the client is important. The client will try to establish a connection. This will fail and the program will terminate if the service is not already available.