Node.js创建一个简单的WebSocket接口，Vue中连接接口，实现通信交互

首先，我们需要在Node.js中创建一个简单的WebSocket服务器。使用ws模块可以轻松实现。

Node.js 端代码 (server.js):

const WebSocket = require('ws');
 
// 初始化WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    // 将接收到的消息广播到所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

然后，在Vue应用中，我们将创建一个组件来连接到这个WebSocket接口并发送接收消息。

Vue 端代码 (App.vue):

<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Enter message" />
    <button @click="sendMessage">Send</button>
    <div v-for="msg in messages" :key="msg">{{ msg }}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
      messages: []
    };
  },
  created() {
    this.connect();
  },
  methods: {
    connect() {
      this.ws = new WebSocket('ws://localhost:8080');
 
      this.ws.onopen = () => console.log('WebSocket connected');
      this.ws.onerror = (error) => console.log('WebSocket error:', error);
      this.ws.onmessage = (message) => {
        this.messages.push(message.data);
      };
      this.ws.onclose = () => console.log('WebSocket disconnected');
    },
    sendMessage() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(this.message);
        this.message = '';
      }
    }
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>

确保您已经安装了ws模块，可以使用npm安装：

npm install ws

这个例子展示了如何在Node.js后端使用ws模块创建一个WebSocket服务器，并在Vue前端使用WebSocket API与该服务器进行通信。当用户在Vue应用中输入消息并发送时，该消息将广播到所有连接的客户端，包括发送者。