WebSocket
WebSocket简介
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。
WebSocket与HTTP的区别
与传统的HTTP协议相比，WebSocket具有以下几个显著的区别：
- 双向通信：WebSocket支持客户端和服务器之间的实时双向通信，而HTTP协议是单向请求-响应模式。
- 低延迟：由于WebSocket使用长连接，避免了HTTP的连接建立和断开过程，可以降低通信延迟。
- 更少的数据传输：WebSocket头部信息相对较小，减少了数据传输的开销。
- 跨域支持：WebSocket可以轻松跨域，而HTTP需要通过CORS等机制来实现。
WebSocket的工作原理
WebSocket的握手过程和HTTP有所不同。客户端通过发送特定的HTTP请求进行握手，服务器收到请求后进行验证，如果验证通过，则会建立WebSocket连接。
建立连接后，客户端和服务器之间可以通过WebSocket发送和接收消息，可以使用文本、二进制数据等进行通信。
WebSocket的应用场景
WebSocket的实时双向通信特性使得它在许多应用场景中发挥重要作用，例如：
- 即时聊天：WebSocket可以实现实时的聊天功能，用户可以发送和接收消息，实现快速、低延迟的聊天体验。
- 实时数据更新：对于需要实时更新数据的应用，如股票行情、实时监控等，WebSocket可以将数据实时推送给客户端，确保数据的及时更新。
- 在线游戏：在线游戏需要实时的双向通信，WebSocket可以提供稳定的通信通道，支持实时交互和多人游戏。
WebSocket的使用
以下是使用JavaScript与WebSocket建立连接的示例代码：
var Socket = new WebSocket("url, [protocol]");
以上代码中的第一个参数url, 指定连接的 URL。第二个参数protocol是可选的，指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性readyState表示连接状态，可以是以下值：0-表示连接尚未建立。1-表示连接已建立，可以进行通信。2-表示连接正在进行关闭。3-表示连接已经关闭或者连接不能打开。 |
| Socket.bufferedAmount | 只读属性bufferedAmount已被send()放入正在队列中等待传输，但是还没有发出的UTF-8文本字节数。 |
- 0-表示连接尚未建立。
- 1-表示连接已建立，可以进行通信。
- 2-表示连接正在进行关闭。
- 3-表示连接已经关闭或者连接不能打开。
WebSocket 事件
以下是 WebSocket 对象的相关事件。
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
- 下面是相关示例代码：
Socket.onopen = function() {
//连接建立时触发
console.log("WebSocket连接已建立");
};
Socket.onmessage = function(event) {
//客户端接收服务端数据时触发
var message = event.data;
console.log("收到消息：" + message);
};
Socket.onerror = function() {
//通信发生错误时触发
console.log("WebSocket连接发生了错误");
};
Socket.onclose = function() {
//连接关闭时触发
console.log("WebSocket连接已关闭");
};
WebSocket 方法
以下是 WebSocket 对象的相关方法。
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
//发送一条消息
Socket.send('你好')
//关闭WebSocket连接
Socket.close()
WebSocket 除了发送和接收文本消息外，还支持发送和接收二进制数据。对于发送二进制数据，可以使用 send() 方法传递一个 ArrayBuffer 或 Blob 对象，例如：
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);
WebSocket的心跳机制
WebSocket的心跳机制是一种用于保持WebSocket连接的稳定性和活跃性的方法。心跳机制的目的是定期发送小的探测消息，以确保连接仍然有效，如果连接断开或出现问题，可以及时发现并采取措施。
下面是WebSocket心跳机制的详细步骤和相关代码示例：
定义心跳间隔：为了定期发送心跳消息，你需要定义一个心跳间隔，通常以毫秒为单位。在示例中，我们将心跳间隔设置为30秒。
const heartbeatInterval = 30000; // 30秒
定义心跳消息：你需要定义用于发送心跳的消息内容。这通常是一个简单的字符串，如"heartbeat"，但可以根据应用的需求自定义。
const heartbeatMessage = 'heartbeat';
设置心跳定时器：一旦WebSocket连接打开，你可以使用setInterval函数设置一个定时器，以便每隔一段时间发送心跳消息。
let heartbeat;
socket.addEventListener('open', () => {
console.log('WebSocket连接已打开');
heartbeat = setInterval(() => {
socket.send(heartbeatMessage);
}, heartbeatInterval);
});
处理心跳消息：当你接收到来自服务器的消息时，你需要检查它是否是心跳消息。这可以通过比较接收到的消息内容和心跳消息的内容来实现。
socket.addEventListener('message', (event) => {
const message = event.data;
if (message === heartbeatMessage) {
console.log('接收到心跳消息');
// 在这里可以执行一些处理心跳消息的操作
} else {
console.log('接收到其他消息：', message);
// 处理其他类型的消息
}
});
清除心跳定时器：当WebSocket连接关闭时，你应该清除之前设置的心跳定时器，以防止继续发送心跳消息。
socket.addEventListener('close', () => {
console.log('WebSocket连接已关闭');
clearInterval(heartbeat);
});
通过这些步骤，你可以实现WebSocket的心跳机制，确保连接的持续稳定，以适应长时间的通信需求。如果连接断开或出现问题，你可以根据需要添加进一步的错误处理机制。
WebSocket 的安全性和跨域问题如何处理？
WebSocket 支持通过 wss:// 前缀建立加密的安全连接，使用 TLS/SSL 加密通信，确保数据的安全性。在使用加密连接时，服务器需要配置相应的证书。
对于跨域问题，WebSocket 遵循同源策略，只能与同源的服务器建立连接。如果需要与不同域的服务器通信，可以使用 CORS（跨域资源共享）来进行跨域访问控制。