前端如何使用 WebSocket 发送消息

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它的优势在于，可以在客户端和服务器之间实现实时通讯，适合需要频繁交换数据的应用场景，比如在线游戏、实时聊天、直播数据推送等。相较于传统的 HTTP 请求方式，WebSocket 更加高效，因为它减少了数据的开销和延迟。

一、WebSocket 的基本概念

在了解如何使用 WebSocket 发送消息之前，我们需要先理解一些基本概念：

• WebSocket 连接：WebSocket 连接由一个握手过程开始，通常是通过 HTTP 协议进行的，在这个过程中，客户端请求建立连接，服务器应答确认。
• 全双工通讯：一旦建立了连接，客户端和服务器之间可以随时相互发送消息，而不需要像 HTTP 那样每次都重新建立连接。
• 事件驱动：WebSocket 采用事件驱动的方式来处理连接、消息、错误和关闭等事件。

二、前端 WebSocket 使用示例

接下来，我们将讨论如何在前端使用 WebSocket 发送消息。首先，我们需要创建一个 WebSocket 连接。

1. 创建 WebSocket 连接

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
    console.log('连接已建立', event);
};

// 监听服务器消息
socket.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log('连接已关闭', event);
};

// 监听错误事件
socket.onerror = function(error) {
    console.log('WebSocket 发生错误:', error);
};

2. 发送消息

一旦 WebSocket 连接建立成功，我们就可以利用 send 方法来发送消息。

// 在连接打开后发送消息
socket.onopen = function(event) {
    console.log('连接已建立', event);
    // 发送一条消息
    const message = JSON.stringify({ type: 'greeting', payload: 'Hello Server!' });
    socket.send(message);
};

在这段代码中，我们首先定义了要发送的消息，这里使用了 JSON 格式。这样可以将消息结构化，便于服务器理解。

3. 处理服务器反馈

当服务器返回消息时，我们可以在 onmessage 事件中处理这些反馈。

socket.onmessage = function(event) {
    console.log('收到服务器消息:', event.data);

    // 假设返回的数据也是 JSON 格式
    const receivedData = JSON.parse(event.data);
    if (receivedData.type === 'response') {
        console.log('服务器响应:', receivedData.payload);
    }
};

三、注意事项

1. 跨域请求：使用 WebSocket 时，如果客户端和服务器不在同一个域名，需确保服务器设置了正确的 CORS 策略。
2. 连接管理：要合理处理 WebSocket 连接的状态，如重连策略和错误处理，确保系统的稳健性。
3. 安全性：在涉及敏感数据传输时，尽量使用 wss:// (加密的 WebSocket) 协议，以提高安全性。

总结

WebSocket 提供了一种高效的方式，让前端可以实时地与后端进行通讯。通过上面的示例，我们可以看到如何创建 WebSocket 连接、发送消息以及处理响应。掌握这些基础知识后，你就可以在你的项目中灵活运用 WebSocket，提升用户体验。