HTML5 WebSocket 是一种基于 Web的协议，它使得客户端和服务器之间能够建立一个持久的、双向的通信连接。这意味着客户端和服务器可以随时相互发送数据，而无需像传统的 HTTP请求那样，每次都要重新建立连接。WebSocket 协议在实时应用程序中非常有用，比如即时聊天、在线游戏、金融应用等。
1 WebSocket 的基本工作原理
- 连接建立：
-
客户端向服务器发起一个 WebSocket 握手请求，使用 HTTP 协议。握手请求的一个关键点是客户端会请求一个 Upgrade
头，将协议从 HTTP 升级为 WebSocket。 -
如果服务器支持 WebSocket，它会响应一个 HTTP 101 状态码（切换协议），然后连接正式建立，之后客户端和服务器之间的通信就变成了 WebSocket 协议。
- 双向通信：
- 一旦 WebSocket 连接建立，客户端和服务器可以通过这个持久连接发送消息。通信是全双工的，即双方可以同时发送和接收数据。
- 连接关闭：
- 客户端或服务器可以发起连接关闭请求，结束 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();
关键点解释
- WebSocket 构造函数：
- new WebSocket(url) 用于创建 WebSocket 对象，其中 url 是服务器的 WebSocket 地址，通常是以 ws:// 或 wss:// 开头。
ws:// 是 WebSocket 的非加密协议。
wss:// 是 WebSocket 的加密协议，类似于 HTTPS。
- 事件处理器：
-
onopen： 连接成功建立后触发。
-
onmessage：接收到消息时触发。
-
onerror：发生错误时触发。
-
onclose：连接关闭时触发。
- 发送消息：
socket.send(data) 用于发送数据到服务器。数据可以是文本或二进制数据（如 Blob 或 ArrayBuffer）。
- 关闭连接：
- socket.close() 用于关闭 WebSocket 连接，通常在通信完成或页面卸载时调用。
3 WebSocket 与 HTTP 协议的区别
| 特性 | WebSocket | HTTP |
|---|---|---|
| 协议类型 | ws:// 或 wss:// | http:// 或 https:// |
| 连接方式 | 双向持久连接 | 每次请求都建立和断开连接 |
| 数据交换 | 双向数据传输（全双工） | 单向请求-响应模型（半双工） |
| 性能 | 更高效，减少了重复建立连接的开销 | 每个请求都需要独立的连接，效率较低 |
| 实时性 | 支持实时数据传输 | 通常用于请求-响应模式，不适合实时应用 |