WebSocket understanding and use

One, WebSocket understanding

Concept:  WebSocket is a protocol that  html 5 began to provide for full-duplex communication on a single TCP connection.

Features:  WebSocket makes the data exchange between the client and the server easier, allowing the server to actively push data to the client . In the WebSocket API, the browser and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be carried out.

Process:  In the WebSocket API, the browser and the server only need to do a handshake action, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.

Now:  Now, a lot of websites in order to achieve a push technology , the use of technology is Ajax polling. Polling is at a specific time interval (such as every 1 second), the browser sends an HTTP request to the server, and then the server returns the latest data to the client's browser. This traditional mode brings obvious disadvantages, that is, the browser needs to continuously send requests to the server, but the HTTP request may contain a long header, and the really valid data may be only a small part, which is obviously wasteful. A lot of bandwidth and other resources.

Advantages:  The WebSocket protocol defined by html 5 can better save server resources and bandwidth, and can communicate in more real-time.

Two, WebSocket properties

WebSocket object

let ws = new WebSocket('ws://localhost:3000')  // 创建 WebSocket 对象

 

WebSocket object properties:

Attributes	description
ws.readyState	The read-only attribute readyState indicates the connection status, which can be the following values: 0-indicates that the connection has not been established yet. 1-Indicates that the connection has been established and communication is possible. 2-Indicates that the connection is being closed. 3-Indicates that the connection has been closed or the connection cannot be opened.

WebSocket object events:

 

event	Event handler	description
open	ws.onopen	Triggered when the connection is established
message	ws.onmessage	Triggered when the client receives server data
error	ws.onerror	Triggered when a communication error occurs
close	ws.onclose	Triggered when the connection is closed

WebSocket object methods:

method	description
ws.send()	Use connection to send data
ws.close()	Close the connection

Three, WebSocket use

// 创建 WebSocket 对象
let ws = new WebSocket('ws://localhost:3000')
// 定时器
let timer;
 
// 监听打开
ws.onopen = webSocketOpen;
// 监听异常
ws.onerror = webSocketError;
// 监听消息
ws.onmessage = webSocketMessage;
// 监听关闭
ws.onclose = webSocketClose;
 
 
function webSocketOpen() {
    console.log(`连接成功`)
    start()
},
 
function webSocketError() {
    console.log(`连接异常，请刷新页面重试`)
},
 
function webSocketMessage(e) {
    console.log(`接收到消息:${e.data}`)
},
 
function webSocketClose() {
    console.log(`连接关闭`)
    clearInterval(timer)
},
 
// 发送心跳, 因为长时间不发送消息，就会断
function start() {
  clearInterval(timer)
  timer = setInterval(() => {
    let date = new Date()
    ws.send(`发送心跳给后端${date}`)
  }, 2 * 60 * 1000)
}

 

Four, WebSocket application

Two-way communication, such as a chat room.

The WeChat applet encapsulates WebSocket, and wx.connectSocket() can be understood as creating a WebSocket instance SocketTask.

socket.io supports WebSocket, polling, HTTP streaming, etc.