前端如何使用 websocket 发送消息和代码？

在前端开发中，WebSocket 是一种非常重要的技术，它允许客户端和服务器之间进行实时双向通信。相比于传统的 HTTP 请求，WebSocket 提供了更低的延迟和更高的性能。本文将介绍如何在前端使用 WebSocket 发送消息以及相关的代码示例。

首先，我们需要创建一个 WebSocket 对象。在浏览器中，可以使用 WebSocket 构造函数来创建一个新的 WebSocket 连接。例如：

const socket = new WebSocket('ws://example.com/socket');

这里，ws://example.com/socket 是 WebSocket 服务器的地址。你需要将其替换为你自己的 WebSocket 服务器地址。

接下来，我们可以监听 WebSocket 对象的一些事件，以便在连接建立、接收到消息或连接关闭时执行相应的操作。以下是一些常用的事件：

• open：当 WebSocket 连接成功建立时触发。
• message：当从服务器接收到消息时触发。
• error：当发生错误时触发。
• close：当连接关闭时触发。

例如，我们可以这样处理这些事件：

socket.addEventListener('open', (event) => {
  console.log('WebSocket 连接已建立：', event);
});

socket.addEventListener('message', (event) => {
  console.log('收到消息：', event.data);
});

socket.addEventListener('error', (event) => {
  console.error('发生错误：', event);
});

socket.addEventListener('close', (event) => {
  console.log('WebSocket 连接已关闭：', event);
});

现在，我们已经建立了一个 WebSocket 连接并处理了相关事件。接下来，我们将学习如何发送消息。要发送消息，只需调用 WebSocket 对象的 send 方法，并将要发送的消息作为参数传递。例如：

socket.send('你好，这是一条来自前端的消息！');

最后，当我们不再需要 WebSocket 连接时，可以调用 close 方法关闭连接：

socket.close();

这就是在前端使用 WebSocket 发送消息的基本方法。希望本文能帮助你更好地理解和使用 WebSocket。