vue中如何导入websocket

在 Vue 中使用 WebSocket 需要先安装 `websocket` 库。可以通过以下命令进行安装：

npm install websocket

安装完成之后，可以在 Vue 组件中导入并使用 WebSocket。具体步骤如下：

1. 在组件中导入 `WebSocket`：

   import WebSocket from 'websocket';

2. 创建 WebSocket 实例：

   let ws = new WebSocket('ws://localhost:8080');

这里的 `'ws://localhost:8080'` 是 WebSocket 服务器的地址。可以根据实际情况进行修改。

3. 监听 WebSocket 事件：

   ws.onopen = function() {
     console.log('WebSocket 连接成功！');
   };

   ws.onmessage = function(event) {
     console.log('接收到消息：', event.data);
   };

   ws.onclose = function() {
     console.log('WebSocket 连接关闭！');
   };

这里分别监听了 `onopen`、`onmessage` 和 `onclose` 事件，分别表示连接成功、接收到消息和连接关闭。

4. 发送 WebSocket 消息：

   ws.send('Hello, WebSocket!');

这里发送了一条消息 `'Hello, WebSocket!'` 给 WebSocket 服务器。

完整的代码示例：

<template>
  <div>
    <h1>WebSocket Demo</h1>
    <ul>
      <li v-for="msg in messages" :key="msg">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
import WebSocket from 'websocket';

export default {
  data() {
    return {
      messages: []
    };
  },
  mounted() {
    let ws = new WebSocket('ws://localhost:8080');
    ws.onopen = () => {
      console.log('WebSocket 连接成功！');
      ws.send('Hello, WebSocket!');
    };
    ws.onmessage = (event) => {
      console.log('接收到消息：', event.data);
      this.messages.push(event.data);
    };
    ws.onclose = () => {
      console.log('WebSocket 连接关闭！');
    };
  }
};
</script>