How To Make Socket Connection To Heroku Server In Socket.io?

Question

I'm made a full stack mern application and hosted the nodejs backend in heroku and the frontend is running on netlify. All .env variables are set up both for heroku and netlify, I set up cors() also. The website has chat functionality so I use socket.io for that which that used to work nice in development.

This is link to my heroku server (backend api) https://ural-shop.herokuapp.com/

In messenger.js file (This is where the socket connections happens)

import React, { useEffect, useState, useRef } from "react";
import io from "socket.io-client";

const socketRef = useRef();

useEffect(() => {
      socketRef.current = io.connect("https://ural-shop.herokuapp.com/");
},[]);

index.js file (main file of backend)

const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const socket = require("socket.io");

app.use(cors());

const io = socket(server, {
  cors: { origin: "https://ural-shop.herokuapp.com/" },
});

server.listen(PORT, () => console.log(`Server on port ${PORT}`));

I only put the neccessary parts of the files.

From google developer console I see this.

Developer Console Output

Error From Network Section Of Developer console

score 1 · Answer 1 · answered Jun 07 '21 at 00:15

1

Looking at your screenshot it looks like you've not configured cors correctly on your backend. Either put * as value so requests from anywhere are allowed, or put the URL of your frontend application instead of the URL of your backend API. (https://ural-shop.herokuapp.com/ is what you've configured and it should be the URL of your frontend application)

Let me know if it worked.

answered Jun 07 '21 at 00:15

sharpness

125
2
9

app.use(cors()) code works well because I can do login logout, make payments give orders, fetch products. But the parts of the app that requires socket connection doesn't work. I changed the origin field's value to frontend of my application `const io = socket(server, { cors: { origin: "https://practical-carson-947785.netlify.app/" }, });` But I'm still getting the same error. – Bob Stone Jun 07 '21 at 00:32
You can go to this link https://practical-carson-947785.netlify.app/ to check messaging functionality if you want but first you need to get signed in. – Bob Stone Jun 07 '21 at 00:34
@BobStone Hm that looks alright to me, just to be sure recheck the docs: https://socket.io/docs/v4/handling-cors/ and copy paste the example it should work. Just for testing purposes put a * as origin. – sharpness Jun 07 '21 at 00:36

score 1 · Answer 2 · answered Dec 20 '21 at 16:57

I had the same issue with the same tech stack. And this took me 3 days to find out this was all CORS issue. But you need to include your Heroku server in your CORS whitelist.

According to the official docs:

Since Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).

client-site

So, everything you have to do is to specify the correct URL according to the environment. If you want to set only with the production URL, it will work both in the local or prod environment.

Mine is dynamic like this:

const IS_PROD = process.env.NODE_ENV === "production";
const URL = IS_PROD ? "yoursite.herokuapp.com" : "http://localhost:5000";
const socket = io(URL);

server-side

...
const io = socket(server, {
        cors: {
            origin: ["http://localhost:3000", "yoursite.herokuapp.com"],
        },
    });

Very important: You also have to make sure that you development is in sync with your production side. Otherwise, you will test it and see the same error, but only because you didn't update your production, too. Yep, this kind of silly mistakes can happen...

Hope that helps someone in the same situation. This solved my issue.

How To Make Socket Connection To Heroku Server In Socket.io?

2 Answers2

Linked