Vue+Node.js+WebSocket实现即时通讯

npm install -g @vue/cli

vue create my-project

npm install ws express cors

const WebSocket = require('ws');
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
const server = app.listen(8080, () => {
  console.log('Server started on port 8080');
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

node server.js

<template>
  <div>
    <h2>Messages</h2>
    <ul>
      <li v-for="message in messages" :key="message.id">
        {{ message.text }}
      </li>
    </ul>
    <hr>
    <input type="text" v-model="inputMessage">
    <button @click="sendMessage()">Send</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    };
  },
  mounted() {
    this.websocket = new WebSocket('ws://localhost:8080');
    this.websocket.onmessage = this.handleMessage;
  },
  methods: {
    handleMessage(event) {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    },
    sendMessage() {
      const message = {
        id: Date.now(),
        text: this.inputMessage,
      };
      this.websocket.send(JSON.stringify(message));
      this.inputMessage = '';
    },
  },
};
</script>