How socket.io works

Question

I would like to know how socket.io methods work for emitting a certain event, I've read that it is not like long-polling method but a different one that can work on all of different browsers ... How could a client keep-in-contact with the server without a long polling request?

I'm new at node.js and I would like to implement my own system for eventdriven servers (yes...reinvent the wheel!) because I want to touch by hands what is going behind this so easy "socket.io - emit()" method.

Thanks for your helps!

Answer 1

Here's how socket.io works in a nutshell:

First off, socket.io is a thin protocol layer on top of a webSocket, so really, we're going to discuss how a webSocket works.

1. A webSocket connection starts with an ordinary HTTP request with one special header set, the Upgrade header which requests an upgrade from the HTTP protocol to the webSocket protocol.

2. When the server receives the request and sees the upgrade header, if it supports that protocol, then it responds with a 101 response (switching protocols) and some other headers. When the client receives this response (and some other headers related to security), then both ends switch protocol on that very socket to the webSocket protocol.

3. Because the webSocket protocol is designed to be continuously connected both client and server keep the original socket open for future communication and, in fact, it stays open until either side decides that they are eventually done with the webSocket communication channel and then closes the socket.

4. So, the socket stays open for a long time. This enables either side to send a message to the other at any time. This is how it avoids polling. Rather than a temporal HTTP request from the client that asks the server: "Do you have any new data for m?", the client can just sit there and listen for incoming messages. When the server has something new to send the client, it already has this open webSocket connection and it can just send a message to the client at any time.

5. Socket.io addds a few features on top of a webSocket. The main things it adds are: 1) Auto-reconnection if the socket connection is lost for any reason, 2) Regular pings from one end to the other to detect when the connection is lost and 3) A messaging layer that makes it trivial to send named messages from one end to the other.

I would like to know how socket.io methods work for emitting a certain event, I've read that it is not like long-polling method but a different one that can work on all of different browsers

It's not long polling because it keeps a socket connection open for the duration of the client. This long-lived, open connection can be used to just send messages from either client to server or from server to client without having to create a new connection each time you want to send. This will work in any browser that has support for the webSocket protocol.

How could a client keep-in-contact with the server without a long polling request?

The webSocket connection is designed to be long-lived connection rather the typical temporal HTTP connection.

---

If you want to read more about the webSocket protocol itself, you can see a pretty good description here in this MDN article: Writing webSocket Servers.

Here's an example of an initial client request to open a webSocket:

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

And, here's a typical server response that acknowledges the switch to the webSocket protocol:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Then, once the protocol has been changed, here what the webSocket data frame looks like:

 0               1               2               3              
 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 4               5               6               7              
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
 8               9               10              11             
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
 12              13              14              15
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

Socket.io uses the webSocket data frame, but inserts its own message format inside the payload of that frame that allows it to send named messages.