WebSocket 解析与应用（包含web前端、服务端、小程序、dart/flutter中的用法）

WebSocket 解析与应用

1. 概述

1.1 WebSockets 的概念

WebSockets 是一种用于在用户的浏览器和服务器之间打开 交互式通信会话的技术。使用其对应 API，可以向服务器 发送消息 并 接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

1.2 历史起源

Client-Server 模型中 Client 指的是客户端，Server 指的是服务器。服务器负责数据的管理，客户机负责完成与用户的交互任务。浏览器（Broser）是最常见的一种客户端了，在此基础上的 Broser-Server 模型上发展起来的 HTTP 协议，服务端往往永远是被动等待的，这也就意味着一般情况下只有客户端才能主动地向服务端发起通信。然而在实现某些功能的时候，我们又希望服务端同样能够向客户端主动地发送信息，比如在一个客户端请求页面后，服务端能够定时地向客户端更新推送的消息。

传统上网站为了实现推送这样的功能，采用的是轮询的方式。所谓轮询，指是在特定的的时间间隔（如每1秒）由客户端（浏览器）对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。

2. Web 客户端

2.1 WebSocket 对象

WebSocket 对象用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送 和接受数据。该对象的构造函数语法格式为：

var aWebSocket = new WebSocket(url [, protocols]);

其参数描述如下：

2.1.1 WebSocket 对象的常量 和属性

常量

属性

2.1.2 WebSocket 对象的方法

2.1.2.1 close() 方法

该方法用于关闭 WebSocket 连接或连接尝试（如果有的话）。 如果连接已经关闭，则此方法不执行任何操作。其语法格式为：

WebSocket.close();

2.1.2.2 send() 方法

该方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount 的值 。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。其语法格式为：

WebSocket.send(data);

参数

其唯一参数 data 表示用于传输至服务器的数据。它必须是以下类型之一：

异常

2.1.3 WebSocket 事件

使用 WebSocket 对象的 addEventListener() 方法或将一个事件监听器赋值给本接口的 oneventname 属性，来监听 WebSocket 事件。WebSocket 中有以下事件：

在本小节中的案例中，socket 变量是一个通过 new WebSocket 创建的 WebSocket 连接实例：

// 创建一个 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

2.1.3.1 关闭事件

（1）事件描述

关闭事件使用"close"字符串表示，它当一个 WebSocket 连接被关闭时触发。

例如：

socket.addEventListener('close', function (event) {
  console.log('WebSocket is closed now. ');
});

（2）onclose 属性

WebSocket.onclose 属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用，它接收一个名字为“close”的 CloseEvent 事件。其语法格式为：

WebSocket.onclose = function(event) {
  console.log("WebSocket is closed now.");
};

2.1.3.2 错误事件

（1）事件描述

当 websocket 的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个 错误事件（error event）将被引发。

例如：

// 监听可能发生的错误
socket.addEventListener('error', function (event) {
  console.log('WebSocket error: ', event);
});

（2）onerror 属性

在 WebSocket.onerror 属性中，你可以定义一个发生错误时执行的回调函数，此事件的事件名为"error"。该属性的语法格式为：

WebSocket.onerror = function(event) {
  console.error("WebSocket error observed:", event);
};

2.1.3.3 消息事件

（1）事件描述

message 事件会在 WebSocket 接收到新消息时被触发。例如：

socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

（2）onmessage 属性

WebSocket.onmessage 属性是一个当收到来自服务器的消息时被调用的 event handler。它由一个MessageEvent调用。

参考：2.2.2 MessageEvent 对象

其语法格式为：

socket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};

2.1.3.4 连接打开事件

（1）事件描述

例如：

// 监听连接打开
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

（2）onopen 属性

WebSocket.onopen属性定义一个事件处理程序，当WebSocket 的连接状态readyState 变为1时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发。其语法格式为：

aWebSocket.onopen = function(event) {
  console.log("WebSocket is open now.");
};

2.2 相关的几个对象介绍

2.2.1 CloseEvent 对象

连接关闭时 WebSocket 对象发送的事件。

2.2.2 MessageEvent 对象

当从服务器获取到消息的时候 WebSocket 对象触发的事件。WebSocket 接口的 onmessage 属性就是MessageEvent 对象所能代表一段被目标对象接收的消息之一。

通过事件触发的动作被定义为一个函数，该函数作为相关 message事件 ，比如使用 WebSocket 接口的 onmessage 处理器这样的事件处理器。

该对象的构造函数MessageEvent()的语法格式为：

MessageEvent(type, init);

其中参数：

2.3 编写 WebSocket 客户端应用

2.3.1 编写一个客户端应用的过程

①创建 WebSocket 对象 => ②向服务器发送数据 => ③接收服务器发送的消息 => ④关闭连接

2.3.2 创建 WebSocket 对象

例如：

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

如果你想建立一个支持协议可选的连接，你可以指定协议的列表：

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

http 还是 https？

• 一旦连接建立了（也就是说 readyState 是 OPEN）， exampleSocket.protocol 就会告诉你服务器选择了哪个协议。
• 上面的例子中 ws 替代了 http，同样地 wss 也会替代 https。 建立 WebSocket 链接有赖于 HTTP Upgrade mechanism, 所以当我们使用 ws://www.example.com或者 wss://www.example.com来访问 HTTP 服务器的时候协议会隐式地升级。
• 注意，与HTTP不同的是，Websocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。

3. 小程序

3.1 微信小程序中使用 WebSocket

3.1.1 WebSocket 接口

微信小程序提供了以下 WebSocket 接口函数供我们使用：

3.1.2 SocketTask

SocketTask 即 WebSocket 任务，它可通过 wx.connectSocket() 接口创建返回。在微信小程序中推荐使用 SocketTask 的方式去管理 webSocket 链接，每一条链路的生命周期都更加可控。该接口提供了以下方法供我们使用：

3.2 字节小程序中使用 WebSocket

3.2.1 connectSocket 方法

3.2.2 SocketTask

通过 tt.connectSocket 获取的 WebSocket 任务实例。

3.3 支付宝小程序中使用 WebSocket

4. Flutter 中使用 WebSocket

4.1 概述

在dart语言中使用 WebSocket 和在 JavaScript使用 WebSocket 是很类似的。 要在 Web 应用程序中使用 WebSocket，首先创建一个 WebSocket 对象，将 WebSocket URL 作为参数传递给构造函数。例如：

var socket = new WebSocket('ws://127.0.0.1:1337/ws');

然后，你可以使用 send 方法在 WebSocket 实例上发送数据，例如：

if (socket != null && socket.readyState == WebSocket.OPEN) {
  socket.send(data);
} else {
  print('WebSocket not connected, message $data not sent');
}

在javascript中的WebSocket实例上，我们使用onmessage属性，表示一个当收到来自服务器的消息时被调用的 event handler，就像这样：

// javascript 中，详见本文 2.1.3.3节：消息事件
socket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};

在 dart 语言中也是类似，要在 WebSocket 上接收数据，请为消息事件注册一个侦听器。：

// dart 语言中
socket.onMessage.listen((MessageEvent e) {
  receivedData(e.data);
});

4.2 WebSocket类

4.2.1 WebSocket 类的构造器

WebSocket 类构造器的语法格式为：

WebSocket(
    String url,
    [Object? protocols]
)

4.2.2 WebSocket 类的常量

与 JavaScript 中的WebSocket类一样，dart 的WebSocket 类也提供了一些常量：

4.2.3 WebSocket 属性

4.2.4 WebSocket 方法

4.3 相关对象的补充

4.3.1 EventTarget 类

它支持事件的所有浏览器对象的基类，使用它的 on 属性添加和移除编译时类型检查和更简洁的API的事件。有些类似于 JavaScript 中的MessageEvent 对象（参考本文 2.2.2 节）。

该类有以下属性：

5. 服务端：编写 WebSocket 服务器

参考资料

[1] mozilla.MDN 文档

[2] 陈云贵、高旭.微信小程序开发从入门到实战.清华大学出版社

[3] Tencent.微信小程序文档

[4] Alipay.支付宝小程序文档

[5] bytedance.字节小程序文档