Socket.io连接地址反复更改

问题描述

我对socket.io相当陌生，我按照一些教程尝试将其集成到使用MERN堆栈制作的网站中。但是，仅通过尝试连接到后端上的socket.io，我一直在前端出现以下错误。我怀疑这可能是由Express代码中的其他中间件引起的，但我不确定。

gradlew assembleDebug

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

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

这是我的快递代码。如果erorr是由另一种中间件引起的，我将其大部分保留下来。目前，我只是想使连接正常工作

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;

我注意到的一件有趣的事情是地址socket.io试图连接到不断变化的地址，但是我对socket.io的了解还不足以找出原因。以下是访问Safari的inspect元素的屏幕截图

解决方法

必须将socketio()函数绑定到变量。这就是为什么您的连接地址正在更改