如何借助Socket.IO服务器实现两个独立React项目的实时计数器同步？

需要实现两个独立的React项目，通过同一个Socket.IO服务器完成连接与通信，核心功能是：点击project-1中的counter1按钮时，project-2中的counter1数值无需刷新页面就能自动同步更新。

当前的目录结构如下：

parentDirectory:
    project-1:
        ReactProject1
    project-2:
        ReactProject2
    socketServer
        index.js (Socket.io服务端文件)

Socket.IO服务端代码（socketServer/index.js） #

import { Server } from "socket.io";

// 启动Socket.IO服务器，监听3001端口
const io = new Server(3001, {
    cors: {
        origin: '*', // 允许所有来源的跨域请求
    }
});

// 监听客户端连接事件
io.on('connection', (socket) => {
    socket.emit('welcome', '连接已建立');
    // 监听客户端发送的msg事件
    socket.on('msg', (data) => {
        let dataArr = data.split("--")
        console.log(dataArr[0], dataArr[1])
        // 向客户端发送更新事件
        socket.emit('update1', data);
        socket.emit('update2', data);
    })
})

Project-1的App.js代码 #

import './App.css';

import React from 'react'
import CounterButton from './components/counter-button';
import { io } from 'socket.io-client';
// 连接到本地Socket.IO服务器
const socket = io("http://localhost:3001")

function App() {
  // 定义三个计数器的状态变量
  let [counter1, setCounter1] = React.useState(0);
  let [counter2, setCounter2] = React.useState(0);
  let [counter3, setCounter3] = React.useState(0);

  React.useEffect(() => {
    socket.on('connect', () => {
      // 监听服务器发送的update1事件，更新本地计数器
      socket.on('update1', (data) => {
        let dataArr = data.split('--')
        console.log("进入update1回调", data)
        let index = dataArr[0] - 0;
        let value = dataArr[1] - 0;
        if (index == 0) {
          setCounter1(value)
        }
        else if (index == 1) {
          setCounter2(value)
        }
        else if (index == 2) {
          setCounter3(value)
        }
      })
    })
  }, []);

  // 向服务器发送计数器更新消息
  const messageServer = (index, newValue) => {
    socket.emit('msg', "" + index + "--" + newValue);
  }

  return (
    <div className="App">
      <div className='button-row' style={{ "display": "flex", "flexDirection": "row", "gap": "20px" }}>
        <CounterButton buttonName={1}
          value={counter1}
          onClick={() => { messageServer(0, counter1 + 1) }}
        />
        <CounterButton buttonName={2}
          value={counter2}
          onClick={() => { messageServer(1, counter2 + 1) }}
        />
        <CounterButton buttonName={3}
          value={counter3}
          onClick={() => { messageServer(2, counter3 + 1) }}
        />
      </div>
    </div>
  );
}

export default App;

Project-2的App.js代码 #

Project-2的App.js代码与Project-1基本一致，仅在React.useEffect中监听的Socket.IO事件改为update2，具体代码片段如下：

React.useEffect(() => {
    socket.on('connect', () => {
      // 监听服务器发送的update2事件，更新本地计数器
      socket.on('update2', (data) => {
        let dataArr = data.split('--')
        console.log("进入update2回调", data)
        let index = dataArr[0] - 0;
        let value = dataArr[1] - 0;
        if (index == 0) {
          setCounter1(value)
        }
        else if (index == 1) {
          setCounter2(value)
        }
        else if (index == 2) {
          setCounter3(value)
        }
      })
    })
  }, []);

内容的提问来源于stack exchange，提问作者Shrey Soni