A brief of Real-Time Web Apps & WebSocket Protocol

Pablo Argueta
Sep 6, 2018 · 3 min read

Traditionally client and server communications were steered by the client and user interaction. It required periodic requests or long polling to load new data from the server.

To create Real-Time Web applications we needed some kind of full duplex or two way communication between the servers and the clients. Hence, WebSockets were born. WebSockets are an evolution in client/server web technology, which brings desktop functionalities to web browsers.

With WebSockets there is a persistent connection between the client and the server in which communication can be initiated by both parties and data can be transmitted at any time. They are optimized for performance with minimal HTTP overhead. Once a connection is established a client doesn’t need to request an update from the server. Great examples are multiplayer browser games and chat apps like Facebook Messenger and Skype.

To establish a WebSocket connection a client needs to send a Web Socket handshake which begins with a regular HTTP request to the server with a header requesting an upgrade which informs the server that this is a Web Socket Connection.

//Simple Example
//You can use ws or wss which is like HTTPS
GET ws://example.com/HTTP/1.1
Origin: http://example.com
Connection: Upgrade
Host: example.com
Upgrade: websocket

As you can see above, WebSockets use their own scheme which are equivalent to HTTP or HTTPS.

It is necessary to create a JavaScript object with the URL and the remote or local server to initialize the connection.

const socket = new WebSocket(“ ws://echo.websocket.org ”);//The above is a public address that can used for testing and //experiments.

When working with the WebSocket API there are four main events, Open, Message, Close, and Error. Each can be implemented with addEventListener method and handled by the implementation of functions such as onopen, onmessage, onclose, and onerror.

onopen event is initialized from the Web Socket instance once the connection has been established and it is the initial handshake between a client and the server.

onmessage function is fired when data is sent from the sever to the client and it can include plain text, binary data, and/or images.

onclose event is used to close the communication between the server and the client.

onerror event terminates the communication and implies that there was some mistake usually during the communication.

The events above are triggered when something happens but what if the user wants something to happen?

Web Socket protocol also has actions and it currently supports two main actions, send() and close().

The send() method is used to conduct some kind of communication with the server like messages which may include text files, binary data, and/or images.

//Example of sending a chat message

const textvalue = document.getElementById(“text-value”);
const sendButton = document.getElementById(“send-button”);

//Handling the click event
sendButton.onclick = function ( ) {
socket.send( textsend.value); // Send the data
}

The close() method is used as the goodbye handshake to terminate the connection completely and at this point no other communication is possible until connection is re-established.

//Example of close method
var textsend = document.getElementById(“text-view”);
var stopButton = document.getElementById(“stop-button”);

//Handling the click event
stopButton.onclick = function ( ) {

if (socket.readyState === WebSocket.OPEN){
socket.close( ); // Close the connection if open
}
}

In conclusion, web sockets are redefining client-server communication and making real-time web applications possible.