Introduction To Web Sockets

Hello guys, so I was thinking of using Django to add a web socket support to a project am working on then I came across django channels, which is a project that can support the web socket protocol.

But before showing you guys how we can use Django Channels to create real-time applications that go beyond the standard HTTP protocol, I thought about giving a conceptual introduction about web sockets together with an explanation about the WebSocket API.

In a real-time application, there is a continuous exchange of information between the client and the server. The HTTP protocol can't fulfill the needs of these applications because after the initial request is complete, the server-client communication is closed and to get an update, the client has to establish the connection again. This is where web sockets come into play.

The increasing demand for real-time applications can be achieved with web sockets, a dual-channel full duplex bidirectional protocol which maintains a persistent, open connection between client and server. Don't worry I know it's a mouthful of words, so let's break it down.

• Dual-channel full-duplex bidirectional communication simply means that the client and the server can talk in real-time without having to continuously make requests, and contrary to HTTP where request is always initiated by the client, and response is processed by the server, with web sockets the communication can go either way i.e. from server to client or client to server.

Main characteristics of web socket:

It is an HTTP upgrade. The following occurs in a web socket connection:

• First is what we call The Client Handshake Request which means that the client sends a standard HTTP request with headers to the server for an upgrade from HTTP to web sockets.
• Second is The Web Socket Handshake. Here the server listens for incoming socket connections using that same TCP connection that is originally established by HTTP. The handshake is the bridge from HTTP to web sockets.
• Third is The Server Handshake Response. Now, if all the terms are met, the server agrees to upgrade and sends back a response indicating that the protocol will be changed to web socket. The server also maintains the originally established TCP connection throughout the lifecycle of the web socket connection.
• Notice that headers are sent only once, and that is during the upgrade request.

So, using the concept of web sockets we can build projects that require ongoing updates, and fast reaction time. As an example consider a chat application that allows multiple users to chat in real-time.

• If Web Sockets are used, users can exchange messages in real-time. For instance, someone sends a message to a group chat then the server gets that message and will send it to everyone in that same connection.

WebSocket client application

WebSocket client applications use the WebSocket API to communicate with WebSocket servers using the WebSocket protocol.

• The WebSocket API makes it possible for a two-way interactive communication between the client and the server.

To open a web socket connection, we first need to make an object of WebSocket API which will then be used to send and receive data on the established connection.

const socket = new WebSocket(url);

Alright, after the socket instance is created we can use different event listeners to perform certain tasks.

WebSocket event handlers

socket.open() - Called when a connection is established.
socket.onmessage() - Called when a message is received from the server.
socket.onclose() - Called when the connection is closed.
socket.error() - Called when an error occurs.

WebSocket Methods

socket.send() - Sends data to the server using the established connection. We can format the data as JSON to be sent over to the server.
socket.close() - Terminates the connection.

WebSocket server application

A WebSocket server is an application listening on any port of a TCP server that follows a specific protocol. As I mentioned in the beginning of this tutorial, we can utilize Django Channels to build real time apps that support web sockets.

In an upcoming tutorial, we will see in detail how all this works together, so stay tuned.