DEV Community

Hannah
Hannah

Posted on

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.

Moving On...


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);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

Collapse
saritchaethudis profile image
Sarit Chaet Hudis

thanks! very well written and explained.

Collapse
earthcomfy profile image
Hannah Author

Thank you so much. I'm glad you liked it.

Collapse
mdmarufsarker profile image
Md. Maruf Sarker

Give me the link of your channel

Collapse
earthcomfy profile image
Hannah Author

Hello, what channel?

Collapse
mdmarufsarker profile image
Md. Maruf Sarker

Django channel, you mentioned in the last. With upcoming tutorial

Thread Thread
earthcomfy profile image
Hannah Author

Oh, 'Django Channels' is the name of the library I'll be using for the server side. It's the name of the library. I can see the confusion I've caused. Am sorry :)

Thread Thread
mdmarufsarker profile image
Md. Maruf Sarker

It's ok bro

Thread Thread
earthcomfy profile image
Hannah Author

Cool. In the first paragraph of the article I've attached a link to 'django channels', look at that. It'll clear you confusion.