Socket IO 仅在开发模式下工作

Question

我已经成功地在我的应用程序中开发了消息传递组件，并且我已经在开发模式下对其进行了测试，并且工作正常。当我在 Heroku 上部署代码并在生产模式下测试它时，它根本不起作用。仅在开发模式下才会立即收到消息。

服务端代码如下：

const express = require("express");
const app = express();

const cors = require("cors");
app.use(cors());

// ...routes
// app.use(...routes)

const PORT = process.env.PORT || 5000;
const IO_PORT = process.env.IO_PORT || 8900;
const MODE = process.env.NODE_ENV;

app.listen(
  PORT,
  console.log(
    `Server running in ${MODE} mode on port ${PORT}`.yellow.underline.bold,
  ),
);

const io = require("socket.io")(IO_PORT, {
  cors: {
    origin: `${process.env.CLIENT_URL}`, // dev: http://localhost:3000, prod: https://www.example.com
  },
});

io.on("connection", (socket) => {
  // console.log(`user connected: ${socket.id}`);
}

客户端代码如下：

import React, { useEffect, useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { io } from "socket.io-client";

const MessageComponent = () => {
  const socket = useRef();
  useEffect(() => {
      socket.current = io(`ws://${window.location.hostname}:8900`);

      // listening to events

  });
}

在生产模式下，应用程序在控制台中显示以下错误：

获取https://www.example.com:8900/socket.io/?EIO=4&transport=polling&t=Oftd3RHnet::ERR_CONNECTION_TIMED_OUT polling.js:311

提前致谢！

Answer 1

我能够通过将套接字绑定到已存在的后端应用程序的http服务器来解决我的问题。

const express = require("express");
const http = require("http");
const cors = require("cors");

const app = express();

const server = http.createServer(app);
const io = require("socket.io")(server); // <-

app.use(express.json());
app.use(cors());

// app.use(...routes);

const PORT = process.env.PORT || 5000;
const MODE = process.env.NODE_ENV;

但是，服务器现在正在侦听传入请求而不是应用程序：

server.listen(PORT, () => {
  console.log(`Server running in ${MODE} mode on port ${PORT}`);
});

在前端，我只是在套接字客户端中使用了一个空参数列表：

const socket = io();

但是在移动设备上，我使用的是react-native，我必须将完整的URL传递给io()构造函数：

const socket = io("https://www.example.com");

套接字现在默认从 Heroku 监听 PORT 443。