如何通过 Express JS 服务器使 React JS 和 Socket IO 连接在一起？

Question

所以我最近正在尝试使用 socket io，但它不允许我连接到 React JS。在 console.log 它给了我一些奇怪的错误信息。看看下面的代码。我将发布 React 和 localhost 的图像。

服务器（Express JS）：

const app = require("express")();
const bodyParser = require("body-parser");
const cors = require("cors");
const http = require("http").createServer(app);
const io = require("socket.io")(http);
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
io.on("connect", (socket) => {console.log("connected");});
app.listen(5000, () => console.log(`Running on port...`));

Answer 1

您需要添加一个 GET 请求可以到达的虚拟路由。

试试这个：

const express = require("express");
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const cors = require("cors");
const http = require("http").createServer(app);
const io = require("socket.io")(http);

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

router.get("/", (req, res) => {
  res.send({ response: "I am alive" }).status(200);
});

app.use("/socket.io", router);

io.on("connect", (socket) => {
  console.log("connected");
});

app.listen(5000, () => console.log(`Running on port...`));

Answer 2

您可以在 useEffect 挂钩中初始化套接字，或者使用 io.connect(URL) 而不是 io(URL) 后端看起来不错。我写了一篇关于它的博客article。