Currently, web applications have evolved far from the day it appeared, along with a multitude of new techniques applied to serve this process to bring new, exciting and exciting experiences. equally convenient for users. Real-time web technology is becoming more and more popular. There are many technologies and methods to help build real-time applications


In which WEBSOCKET with the support of HTML 5 and above is absolutely dominant.

Watching: What is Socket io

Websocket protocol

WebSocket is a protocol for bidirectional data transfer between server-client over a single TCP connection. Furthermore, webSocket is a protocol designed to transfer data using port 80 and port 443 and it is part of HTML5. So webSockets can work on standard web ports, so there’s no hassle of opening ports for applications, worrying about being blocked by firewalls or proxy servers

Unlike the HTTP protocol, which requires the client to actively send a request to the server, the client will wait to receive data from the server. In other words, with the Websocket protocol, the server can actively send information to the client without requiring a request from the client.

All data communication between client-server will be sent directly over a fixed connection making the information sent quickly and continuously when needed. WebSocket reduces latency because once a WebSocket connection is established, the server does not need to wait for a request from the client.

Likewise, the client can send a message to the server at any time. This single request greatly reduces latency, which will send a request at intervals, even if the message is available.

READ MORE  Features And Functions

See also: What is Pump – Meaning of Pump in Vietnamese

To be able to use Websocket, not only need browser support, but also Websocket server, Websocket server can be created in any server-side language, but Node.js is more widely used. Even because it’s written in Javascript, it has many advantages over other traditional server-side languages.


The protocol has two parts: Handshake and data transfer Initially the client sends a request to initiate a websocket connection to the server, the server checks and returns the connection acceptance result, then the connection is created and the data is sent. data can be done, the main data is the Ws frame

Shake hands

The client will first send an http request requesting an upgrade

GET /mychat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13Origin: http://example.comserver returns

HTTP/1.1 101 Switching Protocols Upgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat To confirm the connection, the client sends a Sec-WebSocket-Key value encoded in Based64 to server.

Then the server side will do:

Append the fixed string “258EAFA5-E914-47DA-95CA-C5AB0DC85B11” to the Sec-WebSocket-Key to get the new string “x3JJHMbDL1EzLkh9GBhXDw==258EAFA5-E914-47DA-95CA-C5AB0DC85B11″. Perform SHA encryption. the above string to get “1d29ab734b0c9585240069a6e4e3e91b61da1969”. Encode the result just received with Base64 to get “HSmrc0sMlYUkAGmm5OPpG2HaGWk=”Send the response back to the client with the value Sec-WebSocket-Accept which is the resulting string.

See more: What is English noodle soup

The client will check the status code (must be 101) and Sec-WebSocket-Accept to see if it matches the expected result and make the connection.

In fact, the interchange fields may be different. Below is an image when a client using the library opens a connection to the socket server

READ MORE  What is Environmental Protection Tax, Who Should Pay Environmental Protection Tax

Data Transfer

Data will be transferred over a single connection created after the handshake. Data is transmitted in frames, we can see it when we turn on the browser’s debugger library

Socket.IO is a set of libraries for web and mobile applications to develop real-time applications. With its powerful and easy-to-use features, Socket.IO is increasingly being used widely from social networking sites that need high interaction, to blogs or e-commerce websites. With this set of libraries , working with WebSockets becomes much simpler. The library consists of 2 parts

Client side: includes a set of libraries written for web (JavaScript), iOS, Android Server side: written in JavaScript and used for node.JS servers

Socket.IO supports the use of many real-time technologies

WebSocketFlash SocketAJAX long-pollingAJAX multipart streamingIFrameJSONP polling

It will automatically switch to Websocket if possible, most browsers now support websocket, so using in the browser is also using websocket Using is very simple and the same in both client and server, it consists of 3 main parts:

Initiate connectionListen to eventSend event

Particularly on the server, there will be no connection initiation because Only the client needs to initiate a connection to the server. Using synchronously in both client and server, the syntax is quite simple. We will do a small example to get acquainted with some ways of sending and receiving data. with

Server API

We will initialize a socket server using the library. First we need to create a nodejs application. Create a package.json file with the following content.

{ “name”: “Websocket”, “version”: “1.0.0”, “description”: “begin”, “main”: “index.js”, “scripts”: { “test”: “echo “Error” : no test specified” && exit 1″ }, “author”: “thangnt”, “license”: “ISC”, “dependencies”: { “express”: “^4.15.4”, “request”: “^2.81 .0”, “”: “^2.0.4” }}file index.js

READ MORE  Liquefied Natural Gas Liquid

var express = require(“express”);var app = express();var server = require(“http”).Server(app);var io = require(“”)(server);var port = (process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 6969);server.listen(port, () => console.log(“Server running in port ” + port));io.on(“connection” , function (socket) { //catch event a client connects to server socket.on(“all client”, function (data) { //listen for event “all client” io.sockets.emit(“news”, + ” send all clients: ” + data); //send to all clients }); socket.on(“broadcast”, function (data) { //listen for event “broadcast” socket.broadcast.emit (“news”, + ” send broadcast: ” + data); // send event to all clients from current client }); socket.on(“private”, function (data) { //listen listen to event “private” socket.emit(“news”, ” You send private message: ” + data); // only send event to current client });});app.get(“/”, (req, res) => { res.sendFile(“test-socket-client.html”, { “root”: __dirname });})

Client API

To use on the browser side, we need to import the library and create the file test-socket-client.html