部署至fly.io后Node.js/Express Socket服务器无法访问求助

问题概述 #

将Node.js/Express开发的Socket.io四子棋应用部署到Fly.io后，关闭本地服务器就无法访问服务。客户端仍硬编码连接http://localhost:3000，导致出现连接拒绝错误：

GET http://localhost:3000/socket.io/?EIO=4&transport=polling&t=t3hoby5a net::ERR_CONNECTION_REFUSED

核心问题分析 #

1. 客户端连接地址错误：部署后客户端仍指向本地服务器地址，而非Fly.io的远程域名
2. 服务器端口硬编码：Fly.io会动态分配端口，硬写3000可能导致容器无法正常启动
3. 协议不匹配：Fly.io默认使用HTTPS，客户端用HTTP连接会触发混合内容限制或连接失败

解决方案 #

1. 修正客户端Socket连接配置 #

修改SocketComponent.jsx中的连接地址，替换为Fly.io的域名，并使用HTTPS协议：

import { io } from 'socket.io-client';
import React, { useState, useEffect } from 'react';
import Connect4Board from './Connect4Board.jsx';

// 替换为你的Fly.io应用域名，使用HTTPS
const url = 'https://multi-connect-4-small-leaf-2505.fly.dev';
// 显式指定传输方式，适配Fly.io网络环境
const socket = io(url, {
  transports: ['websocket', 'polling']
});

// 剩余组件代码保持不变...

2. 服务器端端口适配Fly.io环境 #

修改server.js中的端口配置，使用Fly.io提供的环境变量端口：

const express = require('express')
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');

const app = express()
const server = http.createServer(app)
const io = new Server(server, {
    cors: {
      origin: "*", // 生产环境建议限制为你的Fly.io域名
      credentials: true,
      methods: ["GET", "POST"]
    }
});

// ... 游戏逻辑代码保持不变 ...

// 使用环境变量端口，默认回退到3000
const PORT = process.env.PORT || 3000;
server.listen(PORT, '0.0.0.0', () => {
    console.log(`Server is running on port ${PORT}`);
});

3. 生产环境CORS优化（可选） #

为了安全性，生产环境建议将CORS origin限制为你的Fly.io域名：

const io = new Server(server, {
    cors: {
      origin: "https://multi-connect-4-small-leaf-2505.fly.dev",
      credentials: true,
      methods: ["GET", "POST"]
    }
});

验证步骤 #

1. 将修改后的代码重新部署到Fly.io
2. 访问Fly.io应用域名，打开浏览器控制台
3. 确认控制台输出Connected to server，无连接错误日志
4. 测试游戏功能，验证Socket通信正常

内容的提问来源于stack exchange，提问作者CodingChef