Socket.io

const path = require("path");
const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");
const { createAdapter } = require("@socket.io/cluster-adapter");
const { setupWorker } = require("@socket.io/sticky");
const dotenv = require("dotenv");

const app = express();

// react app

app.use(express.static(path.join(__dirname, "../build")));
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "../build", "index.html"));
});

// socket.io

const server = createServer(app);
const io = new Server(server, {
  maxHttpBufferSize: 1e8,
  transports: ["websocket"],
  cors: {
    origin: "*",
    accessControlAllowOrigin: "*",
  },
});

io.adapter(createAdapter());

setupWorker(io);

io.on("connection", (socket) => {
  console.log(`A user connected: ${socket.id}`);

  // 监听客户端发送的消息
  socket.on("surge", (msg) => {
    console.log("Message from client: ", socket.id, msg);
    if (msg.key && msg.message) {
      console.log("server emit: ", msg.key, msg.message);
      io.emit(msg.key, msg);
      io.emit(msg.sid, `received ${msg.sid}`);
    }
  });

  // 监听客户端断开连接事件
  socket.on("disconnect", () => {
    console.log("A user disconnected");
  });
});

const envPath = path.join(
  __dirname,
  `../.env.${process.env.NODE_ENV || "development"}`
);
dotenv.config({ path: envPath });

const port = process.env.REACT_APP_NODE_PORT || 3000;

// get variable from .env.development.local
server.listen(port, () => {
  console.log(`Server listening on http://localhost:${port}`);
});

module.exports = {
  apps: [
    {
      name: "surge-frontend",
      script: "server/server.js",
      instances: "max",
      exec_mode: "cluster",
      watch: true,
      merge_logs: true,
    },
  ],
};

import { useEffect, useState } from "react";

const App: React.FC = () => {

  const [websocketToken, setWebsocketToken] = useState("");

  useEffect(() => {
    // because react app and socket.io server share same domain, so server address it not required
    const socket = io({
      transports: ["websocket"],
    });

    // I generate a unique id, and send it to backend server(python, I will explain following)
    // backend send message that contain this unique id to socket.io server, server will emit message to this unique id
    // so a one by one connection is implemented between a web page and a backend server
    const token = uuidv4();
    setWebsocketToken(token);
    console.log("token: ", token);

    socket.on("connect", () => {
      console.log("websocket connect success", token);
    });

    socket.on(token, (data) => {
      console.log(data);
    });

    return () => {
      socket.disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}