如何让本地React/Socket.IO应用可被外部网络访问？

问题根源 #

1. 外部设备访问React应用时，客户端代码里的http://localhost:3001指向的是设备自身的本地端口，而非你的电脑，导致Socket连接失败。
2. 将Socket服务改到3000端口时，会和React开发服务器的默认端口冲突，导致服务无法启动。

方案1：用ngrok同时暴露两个端口 #

操作步骤： #

1. 正常启动React开发服务器（默认3000端口）和Socket.IO服务器（3001端口）。
2. 打开两个终端窗口，分别执行：

   ngrok http 3000
   ngrok http 3001
   

   执行后会得到两个ngrok域名，例如https://abc123.ngrok.io（对应3000）和https://def456.ngrok.io（对应3001）。
3. 修改服务端Index.js的CORS配置，允许ngrok的3000域名访问：

   const io = new Server(server, {
     cors: {
       origin: ["http://localhost:3000", "https://abc123.ngrok.io"], // 替换为你的ngrok 3000域名
       methods: ["GET", "POST"],
     },
   });
   

4. 修改客户端App.js的Socket连接地址为ngrok的3001域名：

   const socket = io.connect("https://def456.ngrok.io"); // 替换为你的ngrok 3001域名
   

5. 外部设备通过ngrok的3000域名访问React应用，即可正常使用Socket功能。

方案2：整合服务到同一端口（推荐） #

通过代理或静态文件服务，让React和Socket.IO共用一个端口，只需要暴露一个ngrok端口即可。

子方案2.1：开发环境使用React代理 #

1. 在React项目的package.json中添加代理配置：

   "proxy": "http://localhost:3001"
   

2. 修改客户端App.js的Socket连接为相对路径：

   const socket = io.connect("/");
   

3. 保持服务端Index.js的CORS配置不变（允许http://localhost:3000）。
4. 启动React和Socket.IO服务后，只用ngrok暴露3000端口：

   ngrok http 3000
   

   外部设备访问该ngrok域名时，Socket请求会自动被代理到3001端口，无需额外配置。

子方案2.2：生产环境打包React到Express服务 #

1. 在React项目中执行npm run build，生成build静态文件目录。
2. 修改服务端Index.js，添加静态文件服务并监听3000端口：

   const express = require("express");
   const app = express();
   const http = require("http");
   const { Server } = require("socket.io");
   const cors = require("cors");
   const path = require("path");
   
   app.use(cors());
   // 托管React静态文件
   app.use(express.static(path.join(__dirname, "../client/build")));
   
   // 所有GET请求返回React首页
   app.get("*", (req, res) => {
     res.sendFile(path.join(__dirname, "../client/build/index.html"));
   });
   
   const server = http.createServer(app);
   
   const io = new Server(server, {
     cors: {
       origin: "*", // 可根据需求限制为特定域名
       methods: ["GET", "POST"],
     },
   });
   
   // 保持原有的Socket事件处理逻辑
   io.on("connection", (socket) => {
     console.log(`User Connected: ${socket.id}`);
   
     socket.on("join_room", (data) => {
       socket.join(data);
     });
   
     socket.on("send_message", (data) => {
       socket.to(data.room).emit("receive_message", data);
     });
   });
   
   server.listen(3000, () => {
     console.log("SERVER IS RUNNING ON PORT 3000");
   });
   

3. 启动服务端后，用ngrok暴露3000端口，外部设备访问该域名即可同时使用React应用和Socket功能。

内容的提问来源于stack exchange，提问作者Gianluca Fontana