005利用Socket.io实现Node.js后端服务与Web前端实时交互的功能

005利用Socket.io实现Node.js后端服务与Web前端实时交互的功能

采用http创建Node.js的服务

注意：这里使用的http来创建，以便实现将WS服务以相同的地址和端口集成到Web服务中

// nodejs启动http服务
const http = require('http');
const Server = http.createServer(app.callback());
1
2
3

基于http的Server，建立WebSocket服务

// 将WS服务以相同的地址和端口集成到Web服务中
const Socket = require('socket.io'); // 引入ws服务
// 基于http的Server，建立WebSocket服务
const ws = Socket(Server, {
   
  allowEIO3: true, // 是否启用与V2版本的客户端兼容，默认是false
  // cors:true, // 开放跨域，官方文档：https://socket.io/docs/v4/server-options/#cors
  cors: {
   
    origin: '*', // 支持单个网址，或网址的数组
    methods: ['GET', 'POST', 'PUT'], // 请求方式
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13

监听到用户连接上来，开始处理

// 储存当前连接的用户id列表，该id由socket.id自动生成
const sockets: any[] = [];
// 监听到有用户连接上来了！
ws.on('connection', (socket: any) => {
   
  console.log(666.301, 'connection', socket.id);
  // 将A用户id加入用户列表
  sockets.push(socket.id);
  // 对外广播有A用户连接上来了，注意：这里使用ws
  ws.emit('msg-broadcast', {
    msg: `欢迎，${
     socket.id}`, users: sockets });
  // 监听A用户发过来的消息
  socket.on('msg-client', (msg: string) => {
   
    console.log(666.301, 'msg-client', msg);
    // 将A用户发过来的消息封装一下再回传给用户，注意：这里使用socket
    socket.emit('msg-server', {
    msg, tm: new Date() }, (res: any) => {
   
      // 增加第三个回调函数变量是为了获取A用户拿到消息后的回答信息
      console.log(666.303, 'msg-server', res);
    });
  });
  // 监听A用户主动来拉取服务器信息，如用户列表信息
  socket.on('msg-fetch', (msg: string) => {
   
    console.log(666.309, 'msg-fetch', msg);
    // 回应A用户的请求
    socket.emit('msg-fetch-server', {
    msg, tm: new Date(), fetch: sockets });
  });
  // 当A用户离开(断开连接)的时候
  socket.on('disconnect', () => {
   
    console.log(666.305, 'disconnect', socket.id);
    // 将用户从服务器端的用户列表中删除
    sockets.splice(
      sockets.findIndex((el) => el === socket.id),
      1
    );
    // 将A用户离开的消息发送给所有在线连接的用户
    ws.emit('msg-broadcast', {
    msg: `${
     socket.id}，再见`, users: sockets });
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

实现服务器心跳广播的功能

// 这里演示一个服务器心跳广播的功能
let indexNum: number = 1;
setInterval(() => {
   
  indexNum++;
  // 所有在线的用户均可收到该广播
  ws.emit('msg-index', indexNum);
}, 1000);
1
2
3
4
5
6
7
8

客户端初始化WS服务并连接

import {
    io } from 'socket.io-client'; // 引入ws客户端插件
const ws = io('ws://127.0.0.1:9098'); // 建立与服务器端的ws服务

// 初始化ws服务
function wsInit() {
   
  // 监听到我连接到了ws服务
  ws.on('connect', () => {
   
    console.log(666.601, 'connect');
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13

客户端发送消息

const msgClient = ref