Connection refused error after deploying socket io app to cloudflare

[sudarshanreddyc]

Server code:

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

app.use(cors());

const server = http.createServer(app);

const io = new Server(server, {
cors: {
origin: "*",
methods: ["GET", "POST"],
}
});

io.on("connection", (socket) => {
console.log(User Connected: ${socket.id});

socket.on("join_room", (data) => {
socket.join(data);
});

});

server.listen(8080, () => {
console.log("SERVER IS RUNNING");
});

Client side:

import "./App.css";
import io from "socket.io-client";
import { useEffect, useState } from "react";

const socket = io.connect("http://localhost:8080");

function App() {
//Room State
const [room, setRoom] = useState("");

const joinRoom = () => {
if (room !== "") {
socket.emit("join_room", room);
}
};

return (

<input
placeholder="Room Number..."
onChange={(event) => {
setRoom(event.target.value);
}}
/>
Join Room
<input
placeholder="Message..."
onChange={(event) => {
setMessage(event.target.value);
}}
/>
Send Message

Message:

{messageReceived}

);
}

export default App;

But I am getting the following error after hosting it on cloudflare. Same this works fine in local.

polling.js:311 GET http://localhost:8080/socket.io/?EIO=4&transport=polling&t=OKjuPmR net::ERR_CONNECTION_REFUSED

Can anyone please help me? Thanks in advance

[darrachequesne]

Hi! I see you have

const socket = io.connect("http://localhost:8080/");

Shouldn't it be something like:

const socket = io.connect("<cloudflare URL>");

[sudarshanreddyc]

I am using the express server for backend connections. How can I host it on cloudflare so I can use that URL to connect to socket io?
Thanks in advance

[qiulang]

I really think we should have a faq to address the rookie mistake like this, as I have seen time and time agin, so we can free @darrachequesne from doing it and focus on more important issues.

[darrachequesne]

@qiulang you mean, a troubleshooting guide?

Joke aside, I'm open to suggestions on this.

[qiulang]

@darrachequesne Yes just like that! I don't know we have a troubleshooting guide!
Maybe you need to emphasize that and add more common mistakes and their solutions into it.

[qiulang]

How do you emphasize that maybe is another question. I saw a question even asked what license socket.io used! That question makes me wonder is it because they didn't read the readme or LICENSE file or don't understand what MIT license means ?

[haneenmahd]

The problem you have is that you have the production client side uses the local url for the server, as said by @darrachequesne

You can do this by deploying the the server first. Copy the Cloudflare server url. As you are using react, you can create a local utility function to check if the env is production or development. Then return the server url accordingly.

utils/getServerUrl.js

export default function getServerUrl() {
  if (process.env.NODE_ENV === "development") {
    return "http://localhost:8080"; // local server url
  } else {
    return ""; // Cloudflare server url
  }
}

And in the client side, you could use this as:

const socket = io.connect(getServerUrl());

This way you can set the url of the server dynamically and you don't have to worry about the conflicts of the production and development server urls.