WebSocket的使用

// 连接服务器
const connectServer = () => {
  socket = new WebSocket('ws://192.168.31.65:1234');
  socket.onopen = () => {
    console.log('WebSocket连接成功');
    const userMessage = {
      type: 'username',
      payload: {
        username: username,
        time: getCurrentTime() // 添加时间属性
      }
    };
    socket.send(JSON.stringify(userMessage));
  };
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('收到服务器消息：', data);
    if (data.type === 'tip') {
      ElMessage({
        message: data.payload,
        type: 'info'
      });
    } else {
      let newMessage;
      if (data.payload.isImage) {
        // 若为图片消息，直接使用完整的 payload
        newMessage = {
          username: data.payload.username,
          message: data.payload.image,
          isImage: true,
          time: data.payload.time // 从 payload 中获取时间属性
        };
      } else {
        // 若为普通文本消息，按原逻辑处理
        newMessage = {
          username: data.payload.username,
          message: data.payload.message,
          isImage: false,
          time: data.payload.time // 从 payload 中获取时间属性
        };
      }
      messageList.value.push(newMessage);
      nextTick(() => {
        message_box.value.scrollTop = message_box.value.scrollHeight;
      });
    }
  };
  socket.onclose = () => {
    console.log('WebSocket连接已关闭');
  };
};

node服务

// index.js
var express = require('express'); // 引入express
var bodyParser = require('body-parser'); // 解析请求体
var multer = require('multer'); // 处理文件上传
const upload = multer(); // 内存存储（不保存到磁盘）
var cors = require('cors'); // 处理跨域
var fs = require('fs'); // 文件系统交互
var path = require('path'); // 路径
const connection = require('./connectionSql'); // 数据库连接
// 接口方法封装
var Register = require('./methods/Register'); // 注册
var Login = require('./methods/Login'); // 登录
var { getUsers } = require('./methods/User'); // 用户
var { getRoles, setRoles } = require('./methods/Role'); // 角色
var { CommonDownloadFile,FragmentDownloadFile } = require('./methods/DownloadFile'); // 文件下载
var { CommonUploadFile,FragmentUploadFile } = require('./methods/UploadFile'); // 文件上传
var ConnectWebSocket = require('./methods/WebSocket'); // WebSocket

var app = express();
var PORT = 1234;
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));



app.post('/register',(req,res)=>Register(req,res,connection))
app.post('/login',(req,res)=>Login(req,res,connection))
app.get('/getUsers',(req,res)=>getUsers(req,res,connection))
app.post('/getRoles',(req,res)=>getRoles(req,res,connection))
app.post('/setRoles',(req,res)=>setRoles(req,res,connection))
app.post('/commonDownload', (req, res) =>CommonDownloadFile(req, res, connection))
app.post('/fragmentDownload', (req, res) =>FragmentDownloadFile(req, res, connection))
app.post('/commonUpload', (req, res) =>CommonUploadFile(req, res, connection))
app.post('/fragmentUpload',upload.single("file"),(req, res) =>FragmentUploadFile(req, res, connection))



// 创建一个 HTTP 服务器
const server = require('http').createServer(app);
// 创建一个 WebSocket 服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });
ConnectWebSocket(WebSocket,wss);


// 启动服务器
server.listen(PORT, () => {
    console.log(`Server is running on port http://localhost:${PORT}`);
});

// Websocket.js
const ConnectWebSocket = function (WebSocket,wss) {
    // 存储所有连接的 WebSocket 客户端
    const clients = new Set();
    // 处理 WebSocket 连接
    wss.on('connection', (ws) => {
        let username = `默认用户名`; // 默认用户名
        clients.add(ws);
    
        // 处理客户端断开连接
        ws.on('close', () => {
            clients.delete(ws);
            // 广播消息给所有连接的客户端
            clients.forEach((client) => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify({ type: 'tip', payload: `${username}已断开连接` }));
                }
            });
        });
    
        // 处理消息
        ws.on('message', (message) => {
            const data = JSON.parse(message);
            console.log('接收到消息:', data);
            
            if (data.type === 'username') {
                username = data.payload.username;

                // 广播消息给所有连接的客户端
                clients.forEach((client) => {
                    if (client.readyState === WebSocket.OPEN) {
                        client.send(JSON.stringify({ 
                            type: 'tip', 
                            payload: `${data.payload.time}【${username}】已连接` 
                        }));
                    }
                });
            } else if (data.type === 'chat') {
                if(data.payload.isImage){
                    const imageData = data.payload.image;
                    const imageMessage = {
                        type: 'chat',
                        payload:{
                            username:username,
                            image:imageData,
                            time:data.payload.time,
                            isImage: true
                        }
                    };
                    // 广播图片消息给所有连接的客户端
                    clients.forEach((client) => {
                        if (client.readyState === WebSocket.OPEN) {
                            client.send(JSON.stringify(imageMessage));
                        } else {
                            console.error('WebSocket未连接');
                        }
                    });
                }else{
                    clients.forEach((client) => {
                        if (client.readyState === WebSocket.OPEN) {
                            client.send(JSON.stringify({ 
                                type: 'chat', 
                                payload:{
                                    username:username,
                                    message:data.payload.message,
                                    time:data.payload.time
                                }
                            }));
                        }
                    });
                }
                
            }
        });
    });
}
module.exports = ConnectWebSocket;