Socket.io 连接地址反复变化

Question

我是 socket.io 的新手，我按照一些教程尝试将它集成到我使用 MERN 堆栈制作的网站中。但是，我只是尝试在后端连接到 socket.io，而在前端不断收到以下错误。我怀疑这可能是由我的 Express 代码中的其他中间件引起的，但我不完全确定。

[Error] Failed to load resource: the server responded with a status of 400 (Bad Request) (socket.io, line 0)

这是我在 React 中的前端代码。我删除了所有冗余组件，以便您可以专注于 useEffect 挂钩

import React, { useState, useEffect } from "react";
import "./styles/Chat.css";
import Header from "../components/Header/Header";
import openSocket from "socket.io-client";
import { BACKEND_ADDRESS } from "../constants/Details"; 
// BACKEND_ADDRESS = "http://localhost:5000"
const socket = openSocket(BACKEND_ADDRESS);

const Chat = () => {

  useEffect(() => {
    socket.emit("connect", { hi: "hi" });

    socket.on("connected", (data) => {
      console.log("data", data);
    });
  }, []);

  return (
    <div className="chat-screen">
      <Header />
    </div>
  );
};

export default Chat;

这是我的特快代码。如果错误是由另一个中间件引起的，我保留了大部分内容。目前，我只是想让连接正常工作

const bodyParser = require("body-parser");
const express = require("express");
const mongoose = require("mongoose");
const fs = require("fs");
const cookieParser = require("cookie-parser");
const getChats = require("./utils/chat");

// set up socket.io for live chat
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io")(server);
let usersOnChatPage = [];

const listingRoutes = require("./routes/listing-routes");
const userRoutes = require("./routes/user-routes");

io.on("connection", function (socket) {
  // runs when the user goes to the chat page
  socket.on("pageLoad", function (data, callback) {
    io.emit("connected", data);
  });
  socket.on("newMessage", function (data, callback) {
    io.emit("newMessage", data);
  });
});

app.use(bodyParser.json());

app.use("/images", express.static("images"));

// Boilerplate to bypass CORS
app.use((req, res, next) => {
  res.set({
    "Access-Control-Allow-Origin": req.headers.origin,
    "Access-Control-Allow-Credentials": "true",
    "Access-Control-Allow-Headers": "Content-Type, *",
    "Access-Control-Allow-Methods": "GET, POST, PATCH, DELETE",
  });

  next();
});

app.use(cookieParser());

// api requests for listings
app.use("/api/listing", listingRoutes);

// api requests for user info/ login/signup
app.use("/api/user", userRoutes);

// if api calls a wrong address
app.use((req, res, next) => {
  const error = new Error(
    "API endpoint not valid. Note that it is case sensitive"
  );
  error.status = 400;

  return next(error);
});

// custom error handler if any middleware threw an error
app.use((error, req, res, next) => {
  if (req.file) {
    fs.unlink(req.file.path);
  }

  // calls express' default error handler if res has already been sent
  if (res.headerSent) {
    return next(error);
  }

  res.status(error.status || 500);
  res.json({
    message: error.message || "An unknown error has occured on the server",
    status: error.status || 500,
  });
});

mongoose
  .connect(
    "mongodb+srv://admin:8cfrMF1Y6UCM5nc0@linkdb.f9q9h.mongodb.net/users?retryWrites=true&w=majority",
    // avoid some deprecation warnings
    {
      useNewUrlParser: true,
      useCreateIndex: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
    }
  )
  .then(() => app.listen(5000))
  .catch((err) => {
    console.log(err);
  });

我注意到的一件有趣的事情是socket.io 尝试连接的地址不断变化，但我对socket.io 的了解不够多，无法找出原因。以下是访问 Safari 的检查元素时截取的屏幕截图

Answer 1

您必须将socketio() 函数绑定到一个变量。这就是你的连接地址发生变化的原因