Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't Access HTTP Server When Deploying to Hosting Service

I have the following code, and I basically can’t access my server after deploying to fly.io/hosting service. I was wondering if I was doing something wrong. I’m getting this error specifically:

Language/Framework: [Node.js/Express, etc.]

The thing is, it kind of works, when I run my own person server locally, but not when I deploy and close local server.

Tried different url://multi-connect-4-small-leaf-2505.fly.dev/


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

but it didn’t work


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

Here is my 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}`);
    });

And 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;

Thanks!

Tags:

2

Answers


  1. 0

    You can try to replace

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

    with

    server.listen(PORT);

    in SockerComponent.jsx
    try to replace

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

    with

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

    or you should check on which domain your server is located and use

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

    The problem is that when the server is deployed, the client must connect not to localhost:3000 as it was during development, but to the new server address. If you have the IP address of the server, you can use http://SERVER_IP_ADDRESS.

    Login or Signup to reply.
  2. 0

    It looks like the problem is when you reference the server URL in your client code after deploying the application. When you’re running your server on Fly.io, you should replace localhost:3000 with the correct URL of your deployed server (in this case, https://multi-connect-4-small-leaf-2505.fly.dev).

    Update your SocketComponent.jsx to reference the deployed Fly.io server URL instead of localhost:3000:

    // Replace 'http://localhost:3000' with your Fly.io URL
const url = 'https://multi-connect-4-small-leaf-2505.fly.dev';
const socket = io(url);

    Also in your server.js, change the server.listen to bind to the correct port on Fly.io. Fly.io dynamically assigns the port via the PORT environment variable. You should replace your hardcoded port 3000 with process.env.PORT:

    const PORT = process.env.PORT || 3000;
server.listen(PORT, '0.0.0.0', () => {
    console.log(`Server is running on port ${PORT}`);
});

    From the above code snippet it uses the assigned port Fly.io set in the environment variable.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search