vue websocket

Vue.js 是一个流行的前端框架，而 WebSocket 是一种在 web 应用程序中实现实时通信的协议。Vue.js 支持在组件中使用 WebSocket 来实现实时通信，可以使用原生的 WebSocket API 或者第三方库来实现。下面是一个使用原生 WebSocket API 的示例：

1. 在 Vue.js 组件中创建 WebSocket 对象：

<template>
  <div>
    <h1>WebSocket Example</h1>
  </div>
</template>

<script>
export default {
  created() {
    this.socket = new WebSocket('ws://localhost:8080');
    this.socket.onmessage = this.handleMessage;
  },
  methods: {
    handleMessage(event) {
      console.log(event.data);
    }
  }
}
</script>

2. 在服务器端实现 WebSocket：

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  socket.send('Hello, world!');

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    socket.send(`You said: ${message}`);
  });
});

这个示例中，我们使用了 Node.js 的 WebSocket 模块来创建 WebSocket 服务器。在客户端，我们创建了一个 WebSocket 对象，并且在组件的 created 钩子函数中监听了 onmessage 事件来处理从服务器发送过来的消息。在服务器端，我们创建了一个 WebSocket 服务器并且在 connection 事件中监听客户端的连接请求。一旦客户端连接成功，我们就可以使用 socket.send() 方法来发送消息，使用 socket.on('message', ...) 方法来处理客户端发送过来的消息。