一、简介：

WebSocket是一种协议，用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接，这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发，并于2011年成为标准。

WebSocket 非常适合于需要实时通信的应用场景，如在线聊天、实时通知等。

WebSocket 使用教程

1. WebSocket 基础

• 协议：WebSocket 使用 ws://（非加密）或 wss://（加密）作为协议前缀。
• 握手：连接开始时，客户端和服务端会通过 HTTP 协议进行一次握手过程，以升级到 WebSocket 协议。
• 帧：一旦握手成功，双方就可以直接通过 WebSocket 发送和接收消息，这些消息是以帧的形式传输的。

2. 在浏览器中使用 WebSocket

在现代浏览器中，你可以使用内置的 WebSocket 对象来创建 WebSocket 连接。

let createWS = async () => {
    // 创建一个新的 WebSocket 实例
    ws = new WebSocket(`ws://${window.hostIp}:8081`);
    // 在客户端与服务端建立连接后触发
    ws.onopen = async (evt: any) => {
        ...
        ws.send('Hello, server!');
    }
    // 在服务端给客户端发来消息的时候触发
    ws.onmessage = (evt: any) => {
        ...
    }
    // 在客户端与服务端建立关闭后触发
    ws.onclose = (ev: any) => {
        ...
    }
    // 连接出现错误
    ws.onerror = function (ev: any) {
        ...
    }
}


onUnmounted(() => {
    //页面卸载时断开webscoket链接
    ws.close();
});

3. 安全性和注意事项

• 安全性：总是使用 wss:// 来保证数据的安全性。
• 心跳检测：长时间没有活动的连接可能会被网络设备断开，因此建议定期发送心跳包保持连接活跃。
• 错误处理：确保正确处理所有可能发生的错误情况，包括网络中断、服务器异常等。