vue使用websocket

Vue可以使用WebSocket来与服务器进行实时通信。以下是Vue使用WebSocket的一般步骤：

1. 创建WebSocket对象

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

2. 监听WebSocket事件

WebSocket有4个事件：打开、关闭、错误和收到消息。我们需要监听这些事件并在相应的事件中编写处理函数。

ws.onopen = function(event) {
  console.log('WebSocket已连接');
};

ws.onclose = function(event) {
  console.log('WebSocket已关闭');
};

ws.onerror = function(event) {
  console.log('WebSocket连接发生错误');
};

ws.onmessage = function(event) {
  console.log('收到服务器的消息：' + event.data);
};

3. 发送消息

可以使用WebSocket的send()方法向服务器发送消息。

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

完整代码示例：

<template>
  <div>
    <h1>WebSocket Demo</h1>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
    }
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:8080');
    this.ws.onopen = function(event) {
      console.log('WebSocket已连接');
    };
    this.ws.onclose = function(event) {
      console.log('WebSocket已关闭');
    };
    this.ws.onerror = function(event) {
      console.log('WebSocket连接发生错误');
    };
    this.ws.onmessage = function(event) {
      console.log('收到服务器的消息：' + event.data);
    };
  },
  methods: {
    sendMessage() {
      this.ws.send('Hello, Server!');
    }
  }
}
</script>