websocket实现Vue 3和Node.js之间的实时消息推送

npm install -g @vue/cli

vue create websocket-demo
cd websocket-demo

<template>
  <div id="app">
    <h1>WebSocket Demo</h1>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
      messages: []
    };
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://localhost:3000');
      this.ws.onmessage = (event) => {
        this.messages.push(event.data);
      };
      this.ws.onopen = () => {
        console.log('Connected to WebSocket server');
      };
      this.ws.onclose = () => {
        console.log('Disconnected from WebSocket server');
      };
    },
    sendMessage() {
      if (this.message !== '') {
        this.ws.send(this.message);
        this.message = '';
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

mkdir websocket-server
cd websocket-server
npm init -y

npm install ws

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // Broadcast the message to all clients
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});
console.log('WebSocket server is running on ws://localhost:3000');

node server.js

npm run serve