Let’s create a JavaScript websocket server.

To start with carry out the following steps…

• Create a folder, mine’s wsserver and cd to it
• Run yarn init -y
• Run tsc –init
• Run yarn add ws @types/ws
• Add a file (mine’s server.ts) for our server code
• Add another file this time for a sample client (mine’s client.ts)

Now we will add the scripts, so add the following to package.json

"scripts": {
  "server": "node server.js",
  "client": "node client.js"
  "build": "tsc"
}

Let’s add some code, in the server.js put the following

import WebSocket from "ws";

const wss = new WebSocket.Server({ port: 4000 });

wss.on("connection", ws => {
  ws.on('message', message => {
    console.log('received: %s', message);
  });

  ws.on("close", () => {
    console.log("Close connection");
  });

  ws.send("Server says Hi");
});

In the above code we create a new websocket server on port 4000 then we handle any connection’s (once a connection is made the server sends back the message “Server says Hi”. The ws.on “message” will output any messages sent from the client. It should be fairly obvious that the “close” is called when a connection is closed.

Let’s now put the following in the client.ts

import WebSocket from "ws";

const ws = new WebSocket("ws://localhost:4000");

ws.onopen = () => {
  ws.send("Client says Hi");
};

ws.onerror = error => {
  console.log(error);
}

ws.onmessage = msg => {    
  console.log(`Client onmessage: ${msg.data}`);
}

ws.onclose = () => {
  console.log("Close");
};

In the above we open the connection to the web socket server, when the connection is open (onopen) we send a message “Client says Hi” to the server, obviously any errors are sent to the onerror function and any message from the server are routed to the onmessage function, finally onclose is called if the server closes the connection.

Now run the script command yarn build and then in one terminal run yarn server and in another terminal run yarn client.

We can also send specific commands to the server, for example in the client add the following to the onopen function

ws.send("getData");

Within the server add the following

ws.on("getData", msg => {
  console.log("getData called")
});

So now when the server receives a getData messages it’s routed to this server function.

If we have multiple client’s connecting to a server, we can send messages to each client using code, like the following

wss.clients.forEach(client => {
  if (client.readyState === WebSocket.OPEN) {
    client.send("Broadcasting a  message);
  }
});

We can also extend the server “connection” function like this

wss.on("connection", (ws, request) => {
  console.log(request);
}

The request parameter allows us to check the request.url if we want to change take different actions depending upon the query part of the websocket URL.

It’s often useful to implement ping/pong capabilities which would allow us to check if the client still exists, here’s rather simplistic example of this type of code.

wss.on("connection", (ws, request) => {
  ws.isAlive = true;

  ws.on("pong", () => {
    console.log("Pong called");
    ws.isAlive = true;
  });

  setInterval(function ping() {
    wss.clients.forEach(function each(ws: any) {
      if (ws.isAlive === false)  {
        console.log("Terminated client")
        return ws.terminate();
      }
        
      ws.isAlive = false;
      console.log("Ping client")
      ws.ping();
    });
  }, 10000);
});