Vue调用websocket

在Vue项目中调用WebSocket，可以通过以下步骤实现：

1. 安装WebSocket库（如果需要）： 通常情况下，浏览器自带WebSocket API，不需要额外安装库。但如果你需要使用一些封装好的库，可以考虑安装socket.io-client或其他WebSocket库。

2. 创建WebSocket连接： 在你的Vue组件中创建WebSocket连接。可以在mounted生命周期钩子中进行初始化。

3. 处理WebSocket事件： 监听WebSocket的open、message、close和error事件，并进行相应的处理。

<template>
  <div>
    <h1>WebSocket 示例</h1>
    <div>
      <input v-model="message" placeholder="输入消息" />
      <button @click="sendMessage">发送</button>
    </div>
    <div>
      <h2>接收到的消息</h2>
      <ul>
        <li v-for="msg in receivedMessages" :key="msg">{{ msg }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
      receivedMessages: []
    };
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.socket = new WebSocket('ws://your-websocket-server');

      this.socket.onopen = () => {
        console.log('WebSocket 连接已打开');
      };

      this.socket.onmessage = (event) => {
        console.log('收到消息:', event.data);
        this.receivedMessages.push(event.data);
      };

      this.socket.onclose = () => {
        console.log('WebSocket 连接已关闭');
      };

      this.socket.onerror = (error) => {
        console.error('WebSocket 错误:', error);
      };
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.message);
        this.message = '';
      }
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>

• 在mounted钩子中初始化WebSocket连接。
• 监听open、message、close和error事件。
• 提供一个输入框和按钮，用于发送消息。
• 在组件销毁前关闭WebSocket连接。