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 的基本用法:
javascript
// 创建 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:// 开头。
javascript
ws:// 是 WebSocket 的非加密协议。
javascript
wss:// 是 WebSocket 的加密协议,类似于 HTTPS。
- 事件处理器:
-
onopen: 连接成功建立后触发。
-
onmessage:接收到消息时触发。
-
onerror:发生错误时触发。
-
onclose:连接关闭时触发。
- 发送消息:
socket.send(data) 用于发送数据到服务器。数据可以是文本或二进制数据(如 Blob 或 ArrayBuffer)。
- 关闭连接:
- socket.close() 用于关闭 WebSocket 连接,通常在通信完成或页面卸载时调用。
3 WebSocket 与 HTTP 协议的区别
特性 | WebSocket | HTTP |
---|---|---|
协议类型 | ws:// 或 wss:// | http:// 或 https:// |
连接方式 | 双向持久连接 | 每次请求都建立和断开连接 |
数据交换 | 双向数据传输(全双工) | 单向请求-响应模型(半双工) |
性能 | 更高效,减少了重复建立连接的开销 | 每个请求都需要独立的连接,效率较低 |
实时性 | 支持实时数据传输 | 通常用于请求-响应模式,不适合实时应用 |