Uses Socket IO HTTP

Web development

HTTP always starts with the request from the browser and ends with the response from the server. This protocol is not suitable for chat, games,…. where communication also has to come from the server.

The Websocket protocol enables communication in both directions on a permanent connection between client and server.

The Websocket Protocol

The websockets protocol is based on HTTP and HTTPS:

  • it uses ports 80 or 443
  • it always starts with a normal HTTP request
  • it uses cookies

But after the first request, the TCP connection is maintained permanently, and the client and server switch to the actual Websocket protocol:

GET / chat HTTP / 1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ == Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket- Version: 13 HTTP / 1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK + xOo = Sec-WebSocket-Protocol: chat

After this first exchange, both the server and the client have to deal with incoming messages at all times.

Tools

Developer tools

When programming and debugging websockets you need the developer tools: In the “network analysis” you can see the first request, still with HTTP, which is then converted into a websocket with “101 Switching Protocol”:

In the tab "Messages" you can see the messages that are sent back and forth:

Here you can also see that the client and server send each other “ping” packets when nothing else can be sent.

node.js

For programming on the server you can use PHP, Ruby,…. use all typical backend programming languages. We use the opportunity to get to know. This allows you to program the backend in JavaScript.

Ryan Dahl released node.js in 2009. It wasn't the first opportunity to use JavaScript on the server, but the first one that had real success.

Node and the associated package manager are used today not only in backend development, but also very much as a tool for frontend development.

Programming for Node is not easy: as in the browser, asynchronous calls are also used a lot in Node.

glitch

You can install Node.js on your own computer, but this is not necessary for this example. We use https://glitch.com/:

This eliminates the need to upload the code to a server.

Socket.io

is a JavaScript library for the client and server side of Websocket connections.

Programming the client

There is already an input field for chat messages on the client. All chat messages should be displayed in the list with the id:

<ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /> <input type="submit" value="Senden" /> </form> <script src="socket.io/socket.io.js"></script>

Send to the server:

When the form is submitted (by pressing the submit button or by pressing enter), a message is sent to the server:

var socket = io (); let form = document.getElementsByTagName ('form') [0]; let input = document.getElementById ('m'); form.addEventListener ('submit', function () {socket.emit ('chat message', m.value); m.value = ""; return false;});

Received from the server:

When a message comes from the server, it is added to the list as a new one:

let list = document.getElementById ('messages'); socket.on ('chat message', function (msg) {let li = document.createElement ('li'); li.textContent = msg; list.appendChild (li); list.scrollTop = list.scrollHeight;});

Programming the server:

Attention: Node is used to program the entire web server - there is no apache or nginx!

So the JavaScript program runs all the time and handles all requests.

In the following code represents the entire web socket, so it is a broadcast to all connected clients. represents a connected client:

Further development

There are many ways to further develop the example program:

new message

In this example we have only sent and received messages. We can invent any new types of messages, with or without payload.

For example for applause: The client can send an applause message without any further data. The server can send applause with a number

Other input and output in the client

Not every input has to come from the text input field: also clicks on buttons, mouse movements, etc. can trigger websocket messages.

Not every issue is a chat message. For example, you could play an audio clip as applause.

Different logic on the server

On the server you could count how many users are present:

See So