socket io 在本地环境中工作正常，但在使用部署的站点运行时会出现问题

Question

我正在使用socket io、react和nodejs制作一个实时游戏应用程序。 我已经部署了后端服务器和前端站点。当我使用部署的后端服务器在本地主机上运行前端站点时，它运行良好，但是当我在部署的前端站点上运行它时，就会出现问题。 我已经使用渲染部署了前端站点。 这是我的前端网站的链接 - https://gamefront.onrender.com/ 这是我的后端服务器的链接 - https://gameback-6z3w.onrender.com/ 这是我的前端存储库的链接 - https://github.com/Arjit31/gameFront/tree/master 这是我的后端存储库的链接 - https://github.com/Arjit31/gameBack

这是我的一段前端代码 -

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import io from "socket.io-client";
import "./home.css"; //imports css file into project not just the component
//for importing into components use import styles from "./home.css"

const socket = io();

export default function Home() {
  const [key, setKey] = useState("");
  const [inputKey, setInputKey] = useState("");
  const navigate = useNavigate();
  
  useEffect(() => {
    socket.on("keyGenerated", (generatedKey) => {
      setKey(generatedKey);
    });
    socket.on("userConnected", (param) => {
      // setConnectedUserId(otherUserId);
      redirect(param);
    });
    return () => {
      socket.off("keyGenerated");
      socket.off("userConnected");
    };
  }, []);

  const generateKey = (e) => {
    e.preventDefault();
    socket.emit("generateKey");
  };

  const connectByKey = (e) => {
    e.preventDefault();
    socket.emit("connectByKey", inputKey);
    // navigate("/game");
    // redirect();
  };

  const redirect = (param) => {
    const key = param[0];
    let gameURL = "/game?";
    gameURL += `key=${key}&user=${param[1]}`;
    // console.log(param);
    // console.log(param);
    // if({key})
    // {
    //   gameURL += `key=${key}`;
    // }
    // else{
    //   gameURL += `key=${inputKey}`;
    // }
    navigate(gameURL);
  }
  return (
    <div className="homeScreen">
      {key ? (
        <div className="keyGen">{key}</div>
      ) : (
        <div>
          <form className="gameForm">
            <input
              className="gameKey"
              placeholder="Game Key"
              value={inputKey}
              onChange={(e) => setInputKey(e.target.value)}
            ></input>
            <div className="buttonGroup">
              <button className="btn join" onClick={connectByKey}>
                Join
              </button>
              <button className="btn create" onClick={generateKey}>
                Create
              </button>
            </div>
          </form>
        </div>
      )}
    </div>
  );
}

这是我的问题截图 -

我认为问题可能出在部署部分。

Answer 1

检查您的实时套接字服务器是否已部署。 似乎您的套接字服务器未运行，或者来自客户端的套接字路径错误。然后您可以配置您的客户端，例如：

const realtimeServerAddress = 'https://gamefront.onrender.com'

const opts = {
  forceNew: true,
  reconnection: true,
  path: '/socket.io' //Make sure you config this path correct with your socket server
};

const socket = io(realtimeServerAddress, opts);

您可能需要按照文档重新检查服务器安装：https://socket.io/docs/v4/server-installation/