Introduction to Socket.IO

Real-time | Bi-directional | Client-Server | HTML5

Udara Bibile
Sep 11, 2017 · 5 min read

Any developer working with client-server architecture ran into problem of how to push server changes to clients. The feature of communication from server to client is one of main factors in ensuring real-timeliness of client application.

There were viable options such as AJAX, long-polling, short-polling, & HTML 5 server-sent events. For comparison overview look into this stack-overflow answer.

In long-polling, client will send AJAX-like request to server. With suitable timeout, server would send back response if & when there’s update. Here the client will continuously & periodically request update from the server, through separate TCP connections, congesting network traffic.

In short-polling, client periodically send request to server asking if there’s anything new. Server doesn’t wait, but rather send back if there’s update or just empty message. Here network gets even more congested with these continuous requests, even when there’s no updates.

Short-polling vs Long-poling ( Image Source: https://hpbn.co/xmlhttprequest/ )

WebSocket

( Image Source: https://www.pubnub.com/blog/2015-01-05-websockets-vs-rest-api-understanding-the-difference/ )

Considering protocols there’s huge potential for speed gain in WebSockets. HTTP header is 100s of Bytes while Socket header is just 2 Bytes. So after initial HTTP Handshake, Sockets can communicate with much less overhead. This statistics of less overhead surely adds up more speed in client-server communication process.

For web based applications comes HTML 5 WebSockets, where JavaScript is used for communication in compliant browsers. Developers can just use WebSocket for managing client side socket. For server side there’s various implementation for Java, .NET, Python, C++, NodeJS.


Socket.IO

Socket.IO is JavaScript implementation to work with HTML 5 WebSockets. In can be used in NodeJS & based server frameworks for server-side, while client-side can be integrated with pure JavaScript, AngularJS, React.

Socket.IO proves to be promising with over 35K GitHub Stars. Furthermore it’s stable for production level with V2.0.0 being released in 2017.

Initialize Connection

In this instance when we simply connect to localhost:3000 in the browser it can be seen in the running server instance as ‘a user connected’. Initialization of connection is simple as that.

Bidirectional Communication

Here the channel is custom_event which is either client or server can emit (send) or on (receive).

Real-time Chat Application

In this chat application client.html would socket.emit to ‘sending’ socket channel. The server.js is listening to ‘sending’ using socket.io. When server receives message from ‘sending’, server would just socket.emit to ‘receive’ channel for client.html listeners.

So if we open two browser tabs of localhost:3000, and send message from one tab, it will instantly appear on the other tab. In the code segment it is seen that both client and server use socket.emit & socket.on, hence bidirectional communication.

Moreover from my experience I can conclude that SocketIO is extremely fast as well. I have used AngularJS 1.x Client application with server socket.io variant for Python called Flask-SocketIO. In that application it was able to push data from server to client at a rate of 0.001s. Therefore it is possible for high frequency tasks such as stock market boards.


Advanced…

Namespaces & Rooms

Namespace: /chat

Furthermore there’s more functionalities known as rooms inside each namespaces. Simply socket.io can be used to make customizatable and flexible connections to be used for every need.

Socket.io also provides functionality to work outside of namespace / rooms barrier. Most notable npm packages are socket.io-redis and socket.io-emitter for sending socket message from outside the socket.io context.

WebRTC

Even though WebRTC is not directly related to socket.io, there’s another product to provide P2P communication, known as socket.io-p2p.

Here WebRTC connection between peers are setup using socket.io. Server is needed for initialization of WebRTC connection, even though communication is P2P. Here peers will connect to server and complete signaling process to identify each other for P2P communication.

( Image Source: http://webrtc-security.github.io/ )

When WebRTC connection between peers are initialized, server wouldn’t get involved. This will increase network performance as well as privacy. Data will not be going through the server, hence privacy between the peers.

( Note: Using socket.io-p2p is not much recommended for production level since the repository is kind of outdated without much recent commits.)


I hope this article was able to give brief idea about HTML5 WebSockets & SocketIO. Your next client-server real-time application can be implemented using this interested technology with bidirectional communication. Feel free to comment or point out if there’s anything!

Udara Bibile

Written by

Full Stack Developer | BiBi

More From Medium

More from Udara Bibile

More from Udara Bibile

NodeJS Snippet: Child Process

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade