部署到托管服务时无法访问 HTTP 服务器

Question

我有以下代码，部署到fly.io/hosting服务后我基本上无法访问我的服务器。我想知道我是否做错了什么。我特别收到此错误：

语言/框架：[Node.js/Express等]

问题是，当我在本地运行自己的个人服务器时，它可以工作，但当我部署并关闭本地服务器时，它就不行了。

尝试了不同的网址：//multi-connect-4-small-leaf-2505.fly.dev/

 const url = 'http://localhost:3000';
     const socket = io(url);

但是没有成功

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

这是我的server.js：

    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: "*",
          credentials: true,
          methods: ["GET", "POST"]
        }
      });
      
    
    let board = Array(7).fill().map(() => Array(6).fill(null));
    
    let currPlayer = 'Red'
    
    let players = [];
    
    io.on('connection', (socket) => {
        if(players.length < 2) {
            players.push(socket.id)
            io.to(socket.id).emit('fill-board', board, currPlayer);
        }
        else {
            io.to(socket.id).emit('game-full');
            console.log("Disconnected: ", socket.id);
            socket.disconnect();
        }
    
        console.log(players)
    
        socket.on('player-move', (data) => {
            if ((currPlayer === 'Red' && socket.id === players[0]) || 
                (currPlayer === 'Yellow' && socket.id === players[1])) {
                board = data;
                io.emit('player-move', data);
                
                currPlayer = currPlayer === 'Red' ? 'Yellow' : 'Red';
                io.emit('current-player', currPlayer);
            }
        });
        
    
        socket.on('current-player', (data) => {
            currPlayer = data
            socket.broadcast.emit('current-player', data);
        });
          
        socket.on('disconnect', () => {      
            let disconnectedPlayerIndex = players.indexOf(socket.id);
            let winner;
    
            if (disconnectedPlayerIndex === 0) {
                winner = 'Yellow';
            } else if (disconnectedPlayerIndex === 1) {
                winner = 'Red';
            }
            socket.broadcast.emit('other-player', winner);
        })  
    })
    
    const PORT = 3000
    server.listen(PORT, '0.0.0.0', () => {
        console.log(`Server is running on http://localhost:${PORT}`);
    });

还有SockerComponent.jsx：

    import { io } from 'socket.io-client';
    import React, { useState, useEffect } from 'react';
    import Connect4Board from './Connect4Board.jsx';
    
    const url = 'http://localhost:3000';
    const socket = io(url);
    
    const SocketComponent = () => {
      const [board, setBoard] = useState(Array(7).fill().map(() => Array(6).fill(null)));
      const [winner, setWinner] = useState(null);
      const [currPlayer, setCurrPlayer] = useState('Red');
    
      const handleMove = (newBoard) => {
        socket.emit('player-move', newBoard);
      };
    
      useEffect(() => {
        socket.on('connect_error', (error) => {
          console.error('Connection error:', error);
        });
    
        socket.on('connect', () => {
          console.log('Connected to server');
        });
    
        socket.on('player-move', (sentData) => {
          setBoard(sentData);
        });
    
        socket.on('change-user', (newBoard) => {
          setBoard(newBoard);
          const newPlayer = currPlayer === 'Yellow' ? 'Red' : 'Yellow';
          setCurrPlayer(newPlayer);
          socket.emit('current-player', newPlayer);
        });
    
        socket.on('current-player', (sentPlayer) => {
          setCurrPlayer(sentPlayer);
        });
    
        socket.on('fill-board', (newBoard, newPlayer) => {
          setCurrPlayer(newPlayer);
          setBoard(newBoard);
        });
    
        socket.on('other-player', (newPlayer) => {
          setWinner(newPlayer);
        });
    
        socket.on('disconnect', () => {
          console.log(`Player disconnected: ${socket.id}`);
        });
    
        return () => {
          socket.off('connect_error');
          socket.off('connect');
          socket.off('player-move');
          socket.off('change-user');
          socket.off('current-player');
          socket.off('fill-board');
          socket.off('other-player');
          socket.off('disconnect');
        };
      }, [currPlayer]);
    
      return (
        <Connect4Board
          winner={winner}
          setWinner={setWinner}
          board={board}
          playerMove={handleMove}
          currentPlayer={currPlayer}
        />
      );
    };
    
    export default SocketComponent;

谢谢！

Answer 1

您可以尝试更换

server.listen(PORT, '0.0.0.0', () => {
        console.log(`Server is running on http://localhost:${PORT}`);
    });

与

server.listen(PORT);

在

SockerComponent.jsx

尝试更换

const url = 'http://localhost:3000';

与

const url = '/'; // If the client and server are co-located

或者您应该检查您的服务器所在的域并使用

const url = 'http://YOUR_DOMAIN_HERE'; // or 'http://YOUR_DOMAIN_HERE'

问题在于，部署服务器后，客户端必须连接到，而不是像开发期间那样连接到

localhost:3000

，而是连接到新的服务器地址。如果您有服务器的IP地址，则可以使用

http://SERVER_IP_ADDRESS

。