JIYIK CN >

With the rise of HTML5 Websockets, web chat applications are becoming more and more popular. Recently, I am working on a mobile web application, the core function of which is to implement web chat on the mobile phone. Of course, the function is very simple. Currently, it can only send text messages and picture messages. The interface is as follows

To implement the chat function on the web page, there are currently two ways to choose from. One is to use ajax-long polling, and the other is to use websocket technology in html5.

1. Ajax-long polling

Before HTML5 appeared, I thought that this method would be the way to implement the chat function on the web page! The so-called long polling is nothing more than real-time request for data from the server, that is, to pull data from the server. This requires using js to set a timer setinterval() in the web page to request the server once every certain period of time. If there is new data, the client will display this data on its own page. The whole process can be represented by the following figure

Using this method requires an infinite loop request until you leave the chat page, which consumes a lot of resources. However, it was a good method before HTML appeared.

2. HTML5 WebSocket

With the rise of HTML5, WebSocket is gradually becoming known to people. Using WebSocket to implement web chat will replace Ajax, and this chat method is becoming more and more widely used.

Websocket protocol provides full-duplex communication, which is different from HTTP protocol. In addition, Websocket protocol is established on a single TCP link, and its transmitted information flow is based on TCP. Websocket protocol defines ws or wss as URI to encrypt or decrypt links. For example, we can use ws://127.0.0.1 address as the link address of websocket service. Currently, websocket protocol has been supported by browsers such as Google, IE, Firefox, Safari and Opera.

The process of Websocket chat is as follows

In this way, both the client and the server can push messages to each other. When there is no new message, everyone is listening to the corresponding port on their own end. It can be considered that each browser and the server have established a data channel, and everyone is listening at their own channel port (of course, including the server). When a browser pushes a message to the server, the server receives the message and then pushes the message to all browsers connected to it (including the browser that actively pushes messages to the server). Such a process can realize the web version of chat.

Of course, not all browsers support the websocket protocol now, so in order to achieve wider compatibility, Guillermo Rauch created the websocket API - socket.io.

Socket.io is a JavaScript library, consisting of two parts: one is the client library; the other is the server library, which is implemented using NodeJS. These two parts use almost the same API, and socket.io is an event-driven mechanism like NodeJS.

The above are two ways to implement web chat at present. We can choose any one of them according to the actual situation of the project. Of course, it is recommended to use websocket. This article only introduces two ways to implement web chat, and does not involve any implementation code. In the next article, I will introduce how to use socket.io to build a simple chat room. If you have any good suggestions, please leave a message below to discuss and improve together.