在vue中使用websocket

在Vue中使用WebSocket可以通过以下步骤实现：

1. 首先，需要判断浏览器是否支持WebSocket通信协议。可以使用以下代码进行判断：

if (!!window.WebSocket && window.WebSocket.prototype.send) {
  console.log("您的浏览器支持WebSocket通信协议");
} else {
  alert("您的浏览器不支持WebSocket通信协议，请使用Chrome或者Firefox浏览器！");
}

这段代码会检测浏览器是否支持WebSocket，并输出相应的提示信息。

2. 在Vue组件中，可以使用以下代码来创建WebSocket连接并处理消息：

<template>
  <div>
    <h1>{{ message.name }}</h1>
    <h1>{{ message.name2 }}</h1>
  </div>
</template>

<script>
import websocketFeature from "@/api/websocket";

export default {
  name: "DemoView",
  data() {
    return {
      myWebsocketKey: "",
      myWebsocketKey2: "",
      message: {
        name: "",
        name2: "",
      },
    };
  },
  mounted() {
    this.myWebsocketKey = websocketFeature.create(undefined, this.websocketMessageHandler.bind(this));
    this.myWebsocketKey2 = websocketFeature.create("ws://localhost:8083/", this.websocketMessageHandler2.bind(this));
  },
  destroyed() {
    websocketFeature.remove(this.myWebsocketKey);
    websocketFeature.remove(this.myWebsocketKey2);
  },
  methods: {
    websocketMessageHandler(e) {
      this.message.name = e.data;
      console.log(e.data);
    },
    websocketMessageHandler2(e) {
      this.message.name2 = e.data;
      console.log(e.data);
    },
  },
};
</script>

在这个示例中，首先导入了WebSocket功能模块，然后在组件的`mounted`生命周期钩子中创建了两个WebSocket连接。`myWebsocketKey`和`myWebsocketKey2`是用来标识这两个连接的唯一键。在`destroyed`生命周期钩子中，移除了这两个WebSocket连接。

在`websocketMessageHandler`和`websocketMessageHandler2`方法中，处理了接收到的WebSocket消息，并更新了组件的`message`数据。

这样，在Vue组件中就可以使用WebSocket进行实时通信了。
#### 引用[.reference_title]
- *1* *2* [Vue项目里Websocket的使用](https://blog.csdn.net/qq_37635012/article/details/127204108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue中websocket的使用方式](https://blog.csdn.net/cjm986161086/article/details/123430478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]