JS WebSocket 深度解析
文章目录
-
-
- [JavaScript WebSocket 深度解析](#JavaScript WebSocket 深度解析)
-
- [一、WebSocket 是什么](#一、WebSocket 是什么)
- [二、JS 中如何使用 WebSocket](#二、JS 中如何使用 WebSocket)
-
- [1. 创建 WebSocket 对象](#1. 创建 WebSocket 对象)
- [2. 连接打开事件](#2. 连接打开事件)
- [3. 监听消息事件](#3. 监听消息事件)
- [4. 监听错误事件](#4. 监听错误事件)
- [5. 关闭连接](#5. 关闭连接)
- [三、WebSocket 包含哪些属性或方法 API](#三、WebSocket 包含哪些属性或方法 API)
-
- [1. 属性](#1. 属性)
- [2. 方法](#2. 方法)
- 四、扩展与高级技巧
-
- [1. 心跳检测](#1. 心跳检测)
- [2. 重连机制](#2. 重连机制)
- [3. 消息分片与重组](#3. 消息分片与重组)
- [4. 安全性增强](#4. 安全性增强)
- [5. 兼容性处理](#5. 兼容性处理)
- 五、优点与缺点
- 六、对应"八股文"或面试常问问题
-
- [1. WebSocket 与 HTTP 的主要区别是什么？](#1. WebSocket 与 HTTP 的主要区别是什么？)
- [2. WebSocket 如何保证数据传输的安全性？](#2. WebSocket 如何保证数据传输的安全性？)
- [3. WebSocket 连接过程中的状态码有哪些？](#3. WebSocket 连接过程中的状态码有哪些？)
- [4. WebSocket 的心跳检测有什么作用？](#4. WebSocket 的心跳检测有什么作用？)
- [5. WebSocket 的 `bufferedAmount` 属性有什么作用？](#5. WebSocket 的
bufferedAmount属性有什么作用？)
- 七、总结与展望
- 八、完整使用示例
-
JavaScript WebSocket 深度解析
一、WebSocket 是什么
WebSocket 是一种网络通信协议，它提供了浏览器和服务器之间的全双工通信渠道。与传统的 HTTP 请求相比，WebSocket 允许服务器主动向客户端发送信息，客户端也可以随时向服务器发送消息，实现了真正的双向即时通信。
二、JS 中如何使用 WebSocket
1. 创建 WebSocket 对象
javascript
const socket = new WebSocket('wss://example.com/socket');2. 连接打开事件
javascript
socket.onopen = function(event) {
console.log('Connection opened');
};3. 监听消息事件
javascript
socket.onmessage = function(event) {
console.log('Message from server ', event.data);
};4. 监听错误事件
javascript
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};5. 关闭连接
javascript
socket.onclose = function(event) {
console.log('Connection closed');
};三、WebSocket 包含哪些属性或方法 API
1. 属性
socket.readyState：表示连接状态，可以是CONNECTING(0),OPEN(1),CLOSING(2), 或CLOSED(3)。socket.bufferedAmount：未发送至服务器的字节数。
2. 方法
socket.send(data)：发送数据到服务器。socket.close([code[, reason]])：关闭连接。
四、扩展与高级技巧
1. 心跳检测
案例：
javascript
let heartbeatTimer = null;
const heartbeatInterval = 30000; // 心跳间隔时间，设为30秒
// 开启心跳检测
function startHeartbeat() {
heartbeatTimer = setInterval(() => {
socket.send(JSON.stringify({ type: 'ping' }));
}, heartbeatInterval);
}
// 清除心跳检测
function clearHeartbeat() {
if (heartbeatTimer) {
clearInterval(heartbeatTimer);
heartbeatTimer = null;
}
}
socket.onopen = function() {
startHeartbeat();
};
socket.onclose = function() {
clearHeartbeat();
};2. 重连机制
案例：
javascript
let reconnectTimer = null;
const reconnectInterval = 5000; // 重连间隔时间，设为5秒
function reconnect() {
if (socket.readyState === WebSocket.CLOSED) {
console.log('Attempting to reconnect...');
socket = new WebSocket('wss://example.com/socket');
socket.onopen = function() {
console.log('Reconnection successful');
startHeartbeat();
};
socket.onerror = function(event) {
console.error('WebSocket error during reconnection:', event);
};
socket.onclose = function() {
console.log('Reconnection closed, attempting again...');
reconnect();
};
}
}
socket.onclose = function() {
clearHeartbeat();
reconnectTimer = setInterval(reconnect, reconnectInterval);
};3. 消息分片与重组
案例：
javascript
let buffer = '';
socket.onmessage = function(event) {
const message = event.data;
buffer += message;
// 假设我们约定每个完整消息都以换行符结束
const messages = buffer.split('\n');
buffer = messages.pop(); // 保存最后一个不完整的消息片段
messages.forEach(completeMessage => {
console.log('Complete message received:', completeMessage);
// 处理完整消息
});
};4. 安全性增强
使用 wss 协议，确保数据传输的安全性。这部分主要依赖于服务器端的配置，客户端在创建 WebSocket 对象时使用 wss:// 开头的 URL 即可。
5. 兼容性处理
对于不支持 WebSocket 的浏览器，可以提供降级方案，如使用长轮询（long polling）。这部分通常需要在服务器端进行逻辑处理，根据客户端的请求头或参数来判断是否使用 WebSocket。
五、优点与缺点
优点
- 真正的双向通信。
- 较少的控制开销。连接创建后，客户端和服务器之间交换数据时，用于协议控制的数据包头部相对较小。
- 更好的二进制支持。
- 没有同源限制，客户端可以与任意服务器通信。
缺点
- 少数浏览器不支持，且部分浏览器中的 WebSocket 受同源策略影响。
- 服务器端的逻辑比轮询复杂。
- 代理服务器配置可能较为复杂。
六、对应"八股文"或面试常问问题
1. WebSocket 与 HTTP 的主要区别是什么？
WebSocket 是全双工通信，而 HTTP 是请求/响应模式。
2. WebSocket 如何保证数据传输的安全性？
WebSocket 使用 wss（WebSocket Secure）协议，它是 WebSocket 协议的加密版本，相当于 HTTPS。
3. WebSocket 连接过程中的状态码有哪些？
WebSocket 连接过程中的状态码包括 CONNECTING (0), OPEN (1), CLOSING (2), 和 CLOSED (3)。
4. WebSocket 的心跳检测有什么作用？
心跳检测用于保持连接的活跃性，并检测对方是否仍然在线。
5. WebSocket 的 bufferedAmount 属性有什么作用？
bufferedAmount 属性表示还未发送至服务器的字节数，可以用来控制发送速率，避免发送过快导致数据丢失。
七、总结与展望
WebSocket 提供了一种高效的双向通信机制，非常适合需要实时数据交互的应用场景。随着技术的发展，WebSocket 将在更多领域得到应用，并成为实时通信的首选技术。
八、完整使用示例
javascript
const socket = new WebSocket('wss://example.com/socket');
// 心跳检测和重连机制的代码可以放在这里
socket.onopen = function(event) {
console.log('Connection opened');
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('Message from server ', event.data);
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
socket.onclose = function(event) {
console.log('Connection closed');
// 可以在这里实现重连机制
};看到这里的小伙伴，欢迎点赞、评论，收藏！
如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！