Part 1/3 - How to create a server-side timer using WebSockets (with Socket.IO), NestJS and Flutter

#websockets #flutter #nestjs #realtime

If you have an interest in WebSockets technology, chances are that you have seen several tutorials online that use it to create applications such as realtime chat apps. But is that all that is possible with this WebSockets technology 🤔? - Of course not! We can do so much more with them.

In this 3-part tutorial series, we will learn how to create a server-side timer using NestJS and Flutter by application of WebSockets (with Socket.IO). You can use such an implementation to create a proper timer for a quiz app etc.

Pre-requisites

A decent knowledge on NestJS, Flutter, JavaScript/TypeScript.
Flutter 2.5.2 (with null safety), NestJS 8.0.0, Node 16.15.0, Android Emulator API S (This series of articles is successfully tested with these - may or may not work with other versions)

Final outcome of this 3-part article series

Introduction

This part (part 1/3) contains the basic theory and some other good-to-know info related to WebSocket communication.

In the world of connectivity, users need to send and receive data to and from various locations around the world. REST APIs are used widely to achieve this purpose. But in the traditional client-server communication using REST API and HTTP protocol, the server only responds to a request firstly made by the client - not initiate a data transfer by itself.

Therefore, to get new data, a client has to request new data each time it needs that updated data. But how does a client know whether it's the right time to request new data or to wait for some time until the data is updated in the server?

A few methods are available to achieve this,

Refresh the client to send a new HTTP request every time
Polling
WebSockets

Out of these, refreshing the client repeatedly is not good user experience. It is also not sometimes practical.

Polling is expensive in terms of computational power and resources required.

WebSockets is a high speed technology that can be used for realtime client-server communication.

The socket confusion

First off, let's clarify a couple of things.

There are a couple of jargon words used in socket communication (mostly interchangeably) in general, but it would be nice to have a clear idea about them. I'll just give a brief of some such words below and you can refer the references for more information on them.

WebSocket - is a protocol that depends on TCP protocol (like HTTP)
WebSockets - is the API specification of WebSocket protocol (supports two way communication)
Socket.IO - is a library (built on top of WebSocket protocol)
Socket - is an endpoint (in a socket communication)
Webhook - is an HTTP-based callback function which allows one way, server to server communication (not related to WebSockets and not concerned in this tutorial series)

Although Sockets can be divided as

TCP/IP sockets
Unix domain sockets,

we are only interested in TCP/IP sockets for this tutorial series.

Steps in establishing a WebSocket connection

Client sends an HTTP request to open a WebSocket connection (the HTTP connection will be upgraded to a WebSocket connection)
Server responds to the client’s request approving it with a 101 Switching Protocols response, and thereby completing the handshake and establishing a WebSocket connection.
This TCP/IP connection is kept open (by a ping-pong mechanism) allowing real time communication between the client and server until either the client or the server chooses to close the connection. This is a full-duplex communication, meaning both the client and server can send messages to each other at the same time.
After either side terminates the connection, the TCP resources would be unallocated.

In traditional client-server communication, a client sends a request to a server to retrieve some kind of a resource (a text, an image or an audio etc.) and waits for a response from the server. But in WebSocket communication, the server can send the resource when required - without a direct request from a client.

With the successful establishing of a handshake, a communication channel is created between client and server and then whenever the server wants to send something, it just can send it to the particular client without needing a REST API request from the client itself.

Either endpoint of this communication channel is called a Socket. Therefore, a socket has an IP address and a port number.

In this 3-part article series, we would be implementing a server-side timer using NestJS and Flutter, and we can start and stop it using our Flutter application.

Disclaimer

I'm also learning this stuff and there can be better ways to do the things that I have done in this tutorial series. Please feel free to give your feedback in the comments. If I have made a mistake, I'm more than grateful if you can bring them up in the comments section in each article 🤓

Conclusion

Sockets are a great way to implement realtime functionalities in applications. For example, WebSockets can be used to implement a server-side timer for a Flutter app.

This way, the clients have no way to tamper with or manipulate the timer on the frontend, and therefore this can be used, for example in quiz apps to maintain a server-side timer for each question with high integrity.

Now you can go to the part 2 of this tutorial series, to see how to implement the backend server application required for WebSocket communication, in NestJS.