Nodejs: Websocket使用总结

1.使用koa搭建一个简单地websocket服务

---

首先，我们需要安装koa和koa-websocket模块。使用npm命令进行安装：

npm install koa koa-websocket

然后，我们可以创建一个简单的koa应用，并使用koa-websocket中间件。以下是一个简单的示例：

const Koa = require('koa');
const WebSocket = require('koa-websocket');

const app = new Koa();
WebSocket(app);

app.websocket.on('connection', (ws, req) => {
  ws.on('message', (message) => {
    console.log('Received: ' + message);
    ws.send('Echo: ' + message);
  });
});

app.listen(3000);

在此示例中，我们创建了一个在端口300接听的websocket服务器。每当有新的连接时，我们都会打印出接收到的消息，并回复一个带有"Echo"前缀的消息。

2. Websocket的基本使用方法

---

在前端网页中使用Websocket，你需要先创建一个Websocket对象，然后使用此对象来发送和接收消息。以下是一个基本的示例：

let ws = new WebSocket("ws://localhost:3000");

ws.onopen = function(e) {
  console.log("[open] Connection established");
  ws.send("My name is John");
};

ws.onmessage = function(event) {
  console.log(`[message] Data received from server: ${event.data}`);
};

ws.onerror = function(error) {
  console.log(`[error] ${error.message}`);
};

在此示例中，我们创建了一个指向我们刚才创建的Websocket服务器的Websocket对象。当连接建立时，我们发送一条消息，并在接收到服务器消息时打印出来。如果出现错误，我们也会打印出错误信息。

3. 使用 @vueuse 工具库

---

@vueuse/core库提供了对Websocket的封装，使得在Vue中使用Websocket变得更加简单。
在 VueUse 中，useWebsocket 方法的第二个参数 options 是一个对象，用于配置 WebSocket 连接的选项。以下是 options 参数的详细说明：

1. url: WebSocket 连接的 URL。这是必需的选项。
2. protocols: 可选的 WebSocket 子协议列表。这是一个字符串数组，用于指定在 WebSocket 连接中使用的子协议。
3. headers: 可选的请求头对象。这个对象中的头部信息将被添加到 WebSocket 连接的请求中。
4. options: 可选的 WebSocket 连接选项对象。这个对象可以包含一些 WebSocket 连接的配置选项，如重连选项、心跳检测等。
5. onOpen: 可选的 WebSocket 连接打开时的回调函数。当 WebSocket 连接成功建立时，这个函数将被调用。
6. onClose: 可选的 WebSocket 连接关闭时的回调函数。当 WebSocket 连接关闭时，这个函数将被调用。
7. onError: 可选的 WebSocket 连接错误时的回调函数。当 WebSocket 连接发生错误时，这个函数将被调用。
8. onMessage: 可选的 WebSocket 接收到消息时的回调函数。当 WebSocket 收到来自服务器的消息时，这个函数将被调用。

以下是一个使用 useWebsocket 方法的 JavaScript 代码示例：

import { useWebsocket } from '@vueuse/core'

export default {
  setup() {
    const websocket = useWebsocket('wss://example.com/ws', {
      protocols: ['protocol1', 'protocol2'],
      headers: {
        'Authorization': 'Bearer your_token'
      },
      options: {
        reconnect: true,
        heartbeat: {
          outgoing: 10000,
          incoming: 10000
        }
      },
      onOpen: () => {
        console.log('WebSocket connection opened')
      },
      onClose: () => {
        console.log('WebSocket connection closed')
      },
      onError: (error) => {
        console.error('WebSocket connection error:', error)
      },
      onMessage: (message) => {
        console.log('Received message:', message)
      }
    })

    // 使用 websocket.value 访问 WebSocket 连接对象
    // 使用 websocket.send 方法发送消息
    // 使用 websocket.close 方法关闭连接

    return {
      websocket
    }
  }
}

在这个示例中，我们使用 useWebsocket 方法创建了一个 WebSocket 连接，并配置了不同的选项和回调函数。我们可以使用 websocket.value 访问底层的 WebSocket 连接对象，使用 websocket.send 方法发送消息，使用 websocket.close 方法关闭连接。

4. Websocket利用protocols参数传递token，使用protocols参数会遇到的报错问题及解决办法。

---

在使用Websocket时，你可以通过URL的protocols参数来传递一些额外的信息，例如token。然而，你可能会遇到一些问题。
以下是一些可能的问题及其解决方案：

• 问题1：服务器不能正确解析protocols参数 解决方法：确保服务器能够正确解析protocols参数。在Node.js中，你可以使用WebSocket.Server的handleUpgrade方法来访问protocols参数。
• 问题2：浏览器不支持protocols参数 解决方法：确保你的浏览器支持protocols参数。大多数现代浏览器都支持protocols参数，但一些较老的浏览器可能不支持。
• 问题3：protocols参数的值不正确 解决方法：确保protocols参数的值是正确的。protocols参数的值应该是一个以逗号分隔的协议列表。例如，"protocol1,protocol2"。
• 问题4：服务器不支持任何protocols参数中的协议 解决方法：确保服务器支持protocols参数中的至少一个协议。如果服务器不支持任何协议，那么Websocket连接将不会被建立。
• 问题5：浏览器和服务器对protocols参数的处理方式不一致 解决方法：确保浏览器和服务器对protocols参数的处理方式是一致的。例如，如果浏览器将协议列表作为字符串传递，那么服务器也应该期望得到一个字符串。