如何在Netlify或免费主机部署带Socket.IO的Express服务器

问题背景 #

本地运行集成Socket.IO的Express服务器正常，但部署到Netlify后客户端无法建立连接，返回404 Not Found错误，相关配置如下：

服务器代码（functions/api.js） #

const { createServer } = require("http");
const serverless = require("serverless-http");
const { Server } = require("socket.io");
const express = require("express"); // 原代码缺失该引入，会导致运行报错

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

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

  socket.on("realtime-update", () => {
    console.log("Invalidating query");
    socket.broadcast.emit("realtime-update-client");
  });

  socket.on("disconnect", () => {
    console.log(`Socket disconnected: ${socket.id}`);
  });
});

module.exports = app;
module.exports.handler = serverless(app);

package.json #

{
  "name": "freedive-trainer-socket-server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "build": "netlify deploy --prod"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.19.2",
    "netlify-cli": "^17.32.0",
    "serverless-http": "^3.2.0",
    "socket.io": "^4.7.5"
  }
}

netlify.toml #

[build]
  functions = "./functions"

[[redirects]]
  from = "/socket.io/*"
  to = "/.netlify/functions/api"
  status = 200
  force = true

客户端代码（React Query钩子） #

import { useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { io } from "socket.io-client";
import { getAllGroupTrainingQueryKey } from "./groupTraining/useGetAllGroupTraining";

const useRealTimeUpdates = () => {
  const queryClient = useQueryClient();
  const [socket, setSocket] = useState(undefined);
  const port ="https://websocket-io-server.netlify.app/netlify/functions/api";

  useEffect(() => {
    const socket = io(port, {});
    const handleRealtimeUpdate = () => {
      try {
        queryClient.invalidateQueries({
          queryKey: getAllGroupTrainingQueryKey(),
        });
        console.log("Queries invalidated successfully");
      } catch (error) {
        console.error("Error invalidating queries:", error);
      }
    };

    socket.on("realtime-update-client", handleRealtimeUpdate);

    return () => {
      console.log("Disconnecting socket and cleaning up");
      socket.off("realtime-update-client", handleRealtimeUpdate);
      socket.disconnect();
    };
  }, [queryClient, socket]);

  return socket;
};

export default useRealTimeUpdates;

问题解答 #

1. 如何在Netlify上正确配置集成Socket.IO的Express服务器？ #

核心结论：Netlify Functions本质上不适合运行Socket.IO服务。因为Netlify Functions是无状态、短生命周期的Serverless函数，每次请求触发后函数会在短时间内终止，无法维持WebSocket所需的长连接。

若仅为解决404错误，可做以下调整，但无法解决长连接断开的核心问题：

• 补全服务器代码中缺失的express引入
• 修正客户端连接地址：改为https://websocket-io-server.netlify.app，无需带/netlify/functions/api（重定向规则已将/socket.io/*指向函数）
• 尝试将serverless(app)改为包装HTTP服务器，但Netlify Functions不支持直接暴露HTTP服务器，仅支持单请求handler

2. 在Netlify部署时，处理Socket.IO连接是否有特殊方式？ #

Netlify原生不支持WebSocket长连接，若要在其生态内实现实时通信，可采用两种替代方案：

• Netlify Edge Functions：运行在CDN边缘，生命周期比普通Functions长，但仍不支持原生WebSocket，可通过Socket.IO的轮询适配器模拟，性能和可靠性不如真实长连接
• 集成第三方实时服务：使用Pusher、Ably等BaaS服务处理实时通信，Express服务器仅作为业务逻辑层，不直接处理Socket.IO连接

3. 若Netlify不适用于该场景，推荐哪些支持Express和Socket.IO的免费主机？ #

以下是支持长连接、适合部署Socket.IO+Express的免费主机：

• Render：提供免费层Web服务，支持Node.js，可部署持久化服务器，支持WebSocket，每月有带宽和运行时间限制
• Fly.io：免费额度包含3个共享CPU实例，支持Node.js和WebSocket，适合小型项目
• Glitch：完全免费的开发平台，支持Node.js，实时预览，适合快速原型和小型Socket.IO项目
• Railway：提供免费试用额度，支持Node.js服务器和WebSocket，适合个人项目

内容的提问来源于stack exchange，提问作者Bora Bey Sarikaya