如何在 Socket.io 中与 Heroku 服务器建立 Socket 连接？

Posted 2023-03-07

【中文标题】如何在 Socket.io 中与 Heroku 服务器建立 Socket 连接？

【英文标题】：How To Make Socket Connection To Heroku Server In Socket.io?

【发布时间】：2021-08-24 02:51:25

【问题描述】：

我制作了一个完整的堆栈 mern 应用程序，并将 nodejs 后端托管在 heroku 中，前端在 netlify 上运行。所有 .env 变量都为 heroku 和 netlify 设置，我也设置了 cors()。该网站具有聊天功能，因此我将 socket.io 用于过去在开发中运行良好的功能。

这是指向我的 heroku 服务器（后端 api）https://ural-shop.herokuapp.com/的链接

在 messenger.js 文件中（这是发生套接字连接的地方）

import React,  useEffect, useState, useRef  from "react";
import io from "socket.io-client";

const socketRef = useRef();

useEffect(() => 
      socketRef.current = io.connect("https://ural-shop.herokuapp.com/");
,[]);

index.js 文件（后端的主文件）

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const socket = require("socket.io");

app.use(cors());

const io = socket(server, 
  cors:  origin: "https://ural-shop.herokuapp.com/" ,
);

server.listen(PORT, () => console.log(`Server on port $PORT`));

我只放文件的必要部分。

从谷歌开发者控制台我看到了这个。

Developer Console Output

Error From Network Section Of Developer console

【参考方案1】：

查看您的屏幕截图，您似乎没有在后端正确配置 cors。要么将 * 作为值，以便允许来自任何地方的请求，要么将前端应用程序的 URL 而不是后端 API 的 URL。 （https://ural-shop.herokuapp.com/ 是你配置的，应该是你前端应用的 URL）

让我知道它是否有效。

【讨论】：

app.use(cors()) 代码运行良好，因为我可以登录注销、付款、下单、获取产品。但是应用程序中需要套接字连接的部分不起作用。我将原始字段的值更改为我的应用程序的前端const io = socket(server, cors: origin: "https://practical-carson-947785.netlify.app/" , ); 但我仍然遇到同样的错误。

如果需要，您可以转到此链接 practical-carson-947785.netlify.app 检查消息功能，但首先您需要登录。

@BobStone 嗯，这对我来说看起来不错，只是为了确保重新检查文档：socket.io/docs/v4/handling-cors 并复制粘贴它应该工作的示例。仅出于测试目的将 * 作为来源。

【参考方案2】：

我在使用相同的技术堆栈时遇到了同样的问题。这花了我 3 天的时间才发现这都是 CORS 问题。但是您需要将您的 Heroku 服务器包含在您的 CORS 白名单中。

根据官方文档：

从 Socket.IO v3 开始，需要显式启用 Cross-Origin 资源共享 (CORS)。

客户网站

所以，您要做的就是根据环境指定正确的 URL。如果您只想使用生产 URL 进行设置，它将在本地或生产环境中工作。

我的动态是这样的：

const IS_PROD = process.env.NODE_ENV === "production";
const URL = IS_PROD ? "yoursite.herokuapp.com" : "http://localhost:5000";
const socket = io(URL);

服务器端

...
const io = socket(server, 
        cors: 
            origin: ["http://localhost:3000", "yoursite.herokuapp.com"],
        ,
    );

非常重要：您还必须确保您的开发与生产同步。否则，您将对其进行测试并看到相同的错误，但这仅仅是因为您也没有更新您的产品。是的，这种愚蠢的错误可能会发生......

希望对处于相同情况的人有所帮助。这解决了我的问题。