使用Vue与WebSocket创建实时通知系统

npm install -g @vue/cli

vue create realtime-notification-system

cd realtime-notification-system

npm install socket.io-client

mkdir websocket-server
cd websocket-server
npm init -y
npm install express socket.io

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.send('WebSocket server is running');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // 发送实时通知
  setInterval(() => {
    const notification = {
      message: 'New notification at ' + new Date().toLocaleTimeString(),
      id: Math.random().toString(36).substr(2, 9)
    };
    socket.emit('notification', notification);
  }, 5000); // 每5秒发送一次通知

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

node server.js

<template>
  <div id="app">
    <h1>实时通知系统</h1>
    <div v-if="notifications.length === 0">没有新通知</div>
    <ul>
      <li v-for="notification in notifications" :key="notification.id">
        {{ notification.message }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { io } from 'socket.io-client';

export default {
  setup() {
    const notifications = ref([]);
    const socket = io('http://localhost:3000'); // 连接到 WebSocket 服务器

    onMounted(() => {
      // 监听 'notification' 事件
      socket.on('notification', (notification) => {
        notifications.value.push(notification);
      });
    });

    onBeforeUnmount(() => {
      socket.disconnect(); // 组件销毁时断开连接
    });

    return {
      notifications,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
  padding: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  background: #f0f0f0;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

npm run serve