Sockets and their use in practice

Sockets – a summer buzzword number one in our office. We asked our frontend developer Michal to tell us more about them. Read about what socket is, how it works and what it requires below.

A socket is a technology which allows real-time communication between two and more clients (computers).

First, they need a web server in for example PHP or Java. We've been using Node.js. Its main upside, in my opinion, is the low level of server consumption and at the same time its effectiveness when carrying out the clients' requests.

Second, they need an interface so that the user can communicate with the server. We use REST API which allows CRUD operations using HTTP requests. It's also good to have data storage – a database such as OracleSQL, MySQL or MongoDB which we've been using.

One of the typical use cases is chat. Chat theoretically doesn't need sockets. However, when client A sends client B a message, the addressee won't see it until the page is refreshed. Theoretically, clients can request updates for new messages in regular intervals. Such amount of HTTP requests would, however, overload the server and this way would be inapplicable in case of too many clients.

Now the sockets hold the stage. Socket.io is added to the server, and specific states are defined. In the case of chat, only one is needed – newMessage. If this state occurs, the clients are sent a socket update about the state change. The sent update can also contain data, aside from its type.

Sockets must be put into operation also on the client's side. There we work with the basic services – emitting and listening (on). Client A sends client B a message, for example through REST API. Server saves the message in the database, then checks the addressee's status. If client B is online, then the server sends out a socket with a newMessage update. The update contains, aside from its type, the contents of the message and info about the sender.

Client B listens to such newMessage updates. If this update is received, the message list is refreshed and the new message is immediately visible without the need to refresh the page manually.