HTML5 WebSocket

HTML5 WebSocket 是一种基于 Web的协议，它使得客户端和服务器之间能够建立一个持久的、双向的通信连接。这意味着客户端和服务器可以随时相互发送数据，而无需像传统的 HTTP请求那样，每次都要重新建立连接。WebSocket 协议在实时应用程序中非常有用，比如即时聊天、在线游戏、金融应用等。

1 WebSocket 的基本工作原理

1. 连接建立：

• 客户端向服务器发起一个 WebSocket 握手请求，使用 HTTP 协议。握手请求的一个关键点是客户端会请求一个 Upgrade
  头，将协议从 HTTP 升级为 WebSocket。

• 如果服务器支持 WebSocket，它会响应一个 HTTP 101 状态码（切换协议），然后连接正式建立，之后客户端和服务器之间的通信就变成了 WebSocket 协议。

2. 双向通信：

• 一旦 WebSocket 连接建立，客户端和服务器可以通过这个持久连接发送消息。通信是全双工的，即双方可以同时发送和接收数据。

3. 连接关闭：

• 客户端或服务器可以发起连接关闭请求，结束 WebSocket 通信。关闭时，双方会交换一段消息来确认关闭过程。

2 WebSocket 基本 API

HTML5 WebSocket API 提供了创建 WebSocket 连接、发送和接收消息、以及处理连接关闭和错误的功能。以下是 WebSocket API 的基本用法：

// 创建 WebSocket 连接
let socket = new WebSocket('ws://example.com/socket');

// 监听连接打开事件
socket.onopen = function(event) {
    console.log('连接已建立');
    // 发送数据
    socket.send('Hello, Server!');
};

// 监听服务器发送的消息
socket.onmessage = function(event) {
    console.log('收到消息: ', event.data);
};

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log('连接已关闭', event);
};

// 监听错误事件
socket.onerror = function(error) {
    console.log('发生错误: ', error);
};

// 关闭连接
socket.close();

关键点解释

1. WebSocket 构造函数：

• new WebSocket(url) 用于创建 WebSocket 对象，其中 url 是服务器的 WebSocket 地址，通常是以 ws:// 或 wss:// 开头。

ws:// 是 WebSocket 的非加密协议。

wss:// 是 WebSocket 的加密协议，类似于 HTTPS。

2. 事件处理器：

• onopen： 连接成功建立后触发。

• onmessage：接收到消息时触发。

• onerror：发生错误时触发。

• onclose：连接关闭时触发。

3. 发送消息：

socket.send(data) 用于发送数据到服务器。数据可以是文本或二进制数据（如 Blob 或 ArrayBuffer）。

4. 关闭连接：

• socket.close() 用于关闭 WebSocket 连接，通常在通信完成或页面卸载时调用。

3 WebSocket 与 HTTP 协议的区别