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

【问题标题】：How To Make Socket Connection To Heroku Server In Socket.io?如何在 Socket.io 中与 Heroku 服务器建立 Socket 连接？
【发布时间】：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

【问题讨论】：

标签： node.js reactjs express heroku socket.io

【解决方案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"],
        },
    });

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

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

【讨论】：