Migrating from HTTP to HTTPS

[awezmirza]

I have a MERN stack app deployed on aws ec2 ubuntu machine. (https://game-hub.duckdns.org/).
I have my frontend on PORT 8080 and backend services on PORT 3000-3007.
2 of my backend services uses socket.io.
I have used nginx for port forwarding and ssl for https.
My socket io are working fine in local machine.
Can you please tell why websocket is not working.

When I am writing
export const CHAT_SERVICE_SOCKET_URL = "http://game-hub.duckdns.org:3005";
The ws is working fine.

But,
export const CHAT_SERVICE_SOCKET_URL = "https://game-hub.duckdns.org/backend/chat";
is not working

Below is my nginx config-

server {
server_name game-hub.duckdns.org www.game-hub.duckdns.org;

# User Service
location /backend/user/ {
    proxy_pass http://127.0.0.1:3000;
    rewrite ^/backend/user/?(.*) /$1 break;
}

# Friend Service
location /backend/friend/ {
    proxy_pass http://127.0.0.1:3001;
    rewrite ^/backend/friend/?(.*) /$1 break;
}

# Games Service
location /backend/games/ {
    proxy_pass http://127.0.0.1:3002;
    rewrite ^/backend/games/?(.*) /$1 break;
}

# OTP Service
location /backend/otp/ {
    proxy_pass http://127.0.0.1:3003;
    rewrite ^/backend/otp/?(.*) /$1 break;
}

# Mailing Service
location /backend/mailing/ {
    proxy_pass http://127.0.0.1:3004;
    rewrite ^/backend/mailing/?(.*) /$1 break;
}  

Chat Service

location /backend/chat/ {
    proxy_pass http://127.0.0.1:3005;
    rewrite ^/backend/chat/?(.*) /$1 break;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# Tic-Tac-Toe Service
location /backend/tictactoe/ {
    proxy_pass http://127.0.0.1:3006;
    rewrite ^/backend/tictactoe/?(.*) /$1 break;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# API Service
location /backend/api/ {
    proxy_pass http://127.0.0.1:3007;
    rewrite ^/backend/api/?(.*) /$1 break;
}

Frontend

location / {
    root /var/www/frontend;
    index index.html;
    try_files $uri $uri/ /index.html;
}

listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/game-hub.duckdns.org/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/game-hub.duckdns.org/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
if ($host = www.game-hub.duckdns.org) {
return 301 https://$host$request_uri;
} # managed by Certbot

if ($host = game-hub.duckdns.org) {
    return 301 https://$host$request_uri;
} # managed by Certbot

listen 80;
server_name game-hub.duckdns.org www.game-hub.duckdns.org;
return 404; # managed by Certbot

}

This is my frontend's code

export const CHAT_SERVICE_SOCKET_URL = "https://game-hub.duckdns.org/backend/chat";
// export const CHAT_SERVICE_SOCKET_URL = "http://localhost:3005/backend/chat"; // Dev

export const TICTACTOE_SOCKET_URL = "https://game-hub.duckdns.org/backend/tictactoe";

import { io } from "socket.io-client";
import { CHAT_SERVICE_SOCKET_URL } from "./constant";

const socket = io(CHAT_SERVICE_SOCKET_URL);

export default socket;

import { io } from "socket.io-client";
import { TICTACTOE_SOCKET_URL } from "./constant";

const socket = io(TICTACTOE_SOCKET_URL);

export default socket;

import { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import socket from "../../../utils/getChatSocket";
import { receiveMessage } from "../../../config/chatSlice";
import { toast } from "react-toastify";

let isChatRoomActive = false;

const useChatRoom = () => {
const accessToken = useSelector((state) => state.userDataSlice.accessToken);
const dispatch = useDispatch();
const cleanupRef = useRef(false);

useEffect(() => {
    if (!accessToken) {
        toast.error("User not logged in!");
        return;
    }

    if (isChatRoomActive) {
        return;
    }

    socket.emit("join-room", { accessToken }, (response) => {
        if (response.error) {
            // TODO- retry if failed to join
        }
        isChatRoomActive = true;
    });

    socket.on("receive-message", (data) => {
        dispatch(
            receiveMessage({
                senderId: data.senderId,
                messageContent: data.messageContent,
                timestamp: data.timestamp
            })
        );
    });

    return () => {
        if (!cleanupRef.current) {
            return; // Don't clean up on component unmount
        }

        socket.off("receive-message");
        socket.off("join-room");
    };
}, [accessToken, dispatch]);

const cancelChatRoom = () => {
    cleanupRef.current = true;
    socket.off("receive-message");
    // socket.emit("leave-room", { accessToken });
    isChatRoomActive = false;
};

return { cancelChatRoom };

};

export default useChatRoom;

useEffect(() => {
// Listen for game start
socket.on("gameStart", ({ players }) => {
setBoard(Array(9).fill(null));
setWinner("");
setRematchRequested(false);

        if (players[0].userId === selfUserId) {
            setSelfUserRole(players[0].role);
            setOpponentUserId(players[1].userId);
        } else {
            setSelfUserRole(players[1].role);
            setOpponentUserId(players[0].userId);
        }

        if (players[0].role === "O") {
            setPlayingTurn(players[0].userId);
        } else {
            setPlayingTurn(players[1].userId);
        }
        setGameStarted(true);
    });

    // Listen for game updates
    socket.on("gameUpdate", (game) => {
        setBoard(game.board);
        setPlayingTurn(game.currentPlayer);
    });

    // Listen for game over
    socket.on("gameOver", ({ winner }) => {
        setWinner(winner);
    });

    return () => {
        socket.off("gameStart");
        socket.off("gameUpdate");
        socket.off("gameOver");
    };
}, [selfUserId, opponentUserId]);

This is one service
import express from "express";
import cors from "cors";
import router from "./routes/index.js";
import { PORT } from "./config/index.js";
import { connectWithDB, socketHandler } from "./utils/index.js";
import { Server as SocketIO } from "socket.io";

const app = express();

// TODO Configure this later
app.use(cors());

// TODO Add Limit on this
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

app.use("/", router);

const server = app.listen(PORT, async () => {
console.log("Listening on port: ", PORT);

connectWithDB().catch(() => {
    console.log("Error connecting MongoDB");
});

});

// TODO Configure this CORS later
const io = new SocketIO(server, {
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});

socketHandler(io);

process.on("unhandledRejection", (err) => {
console.log(Unhandled rejection ${err.name} occurred);
server.close(() => {
process.exit(1);
});
});

import chatService from "../services/chatService.js";
import verifyAccessTokenForSocket from "./verifyAccessTokenForSocket.js";

const socketHandler = (io) => {
io.on("connection", (socket) => {
socket.on("join-room", async (data, callback) => {
const { accessToken } = data;

        // Verify access token and get userId
        const userId = await verifyAccessTokenForSocket(accessToken);
        if (!userId) {
            return callback({ error: true, message: "Access Token Error" });
        }

        // Join the room with id = userId
        socket.join(userId);
        callback({ error: false, message: Joined room ${userId} });
    });

    socket.on("send-message", async (data, callback) => {
        const { messageContent, accessToken, otherUserId } = data;

        const senderId = await verifyAccessTokenForSocket(accessToken);
        if (!senderId) {
            return callback({ error: true, message: "Access Token Error" });
        }

        try {
            await chatService.sendMessage(
                senderId,
                otherUserId,
                messageContent
            );
            io.to(otherUserId).emit("receive-message", {
                senderId,
                messageContent,
                timestamp: new Date()
            });
            callback({ error: false });
        } catch (error) {
            console.error("Error sending message:", error.message);
            callback({ error: true, message: "Sending Message Error" });
        }
    });

    socket.on("disconnect", () => {
        // TODO - Can be use for updating user online status and last active status
    });
});

};

export default socketHandler;

This is other service's backend code

import express from "express";
import { PORT } from "./config/index.js";
import cors from "cors";
import router from "./routes/index.js";
import { Server as SocketIO } from "socket.io";
import socketHandler from "./utils/socketHandler.js";

const app = express();

const initializeServer = () => {
// TODO Configure this later
app.use(cors());

// TODO Add Limit on this
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

app.use("/", router);

};

const server = app.listen(PORT, async () => {
initializeServer();
console.log("Listening on port: ", PORT);
});

// TODO Configure this CORS later
const io = new SocketIO(server, {
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});

socketHandler(io);

import verifyAccessTokenForSocket from "./verifyAccessTokenForSocket.js";
import generateGameId from "./generateGameId.js";
import checkWinner from "./checkWinner.js";
import updateScore from "./updateScore.js";

let games = {};
let activeGames = {};

setInterval(() => {
const now = Date.now();
for (const gameId in activeGames) {
if (now - activeGames[gameId].createdAt > 10 * 60 * 1000) {
console.log(Game ID ${gameId} expired due to inactivity);
delete activeGames[gameId];
}
}
for (const gameId in games) {
if (now - games[gameId].createdAt > 10 * 60 * 1000) {
console.log(Game ID ${gameId} expired due to inactivity);
delete games[gameId];
}
}
}, 60 * 1000);

const socketHandler = (io) => {
io.on("connection", (socket) => {
socket.on("createGame", async ({ accessToken }, callback) => {
const userId = await verifyAccessTokenForSocket(accessToken);
if (!userId) {
return callback({ error: true, message: "Access Token Error" });
}
const gameId = generateGameId(activeGames);
activeGames[gameId] = {
createdAt: Date.now(),
players: [{ userId, role: null, readyForRematch: false }]
};
socket.join(gameId);
callback(gameId);
});

    socket.on("joinGame", async ({ accessToken, gameId }, callback) => {
        const userId = await verifyAccessTokenForSocket(accessToken);
        if (!userId) {
            return callback({ error: true, message: "Access Token Error" });
        }

        const game = activeGames[gameId];
        if (!game) {
            return callback({
                success: false,
                message: "Game ID does not exist or is inactive"
            });
        }

        if (game.players.length >= 2) {
            return callback({
                success: false,
                message: "Game already has two players"
            });
        }

        socket.join(gameId);
        game.players.push({ userId, role: null, readyForRematch: false });

        if (game.players.length === 2) {
            const roles = ["X", "O"];
            const randomIndex = Math.floor(Math.random() * 2);
            game.players[0].role = roles[randomIndex];
            game.players[1].role = roles[1 - randomIndex];

            games[gameId] = {
                board: Array(9).fill(null),
                currentPlayer: game.players.find(
                    (player) => player.role === "O"
                ).userId,
                players: game.players,
                createdAt: Date.now()
            };

            io.to(gameId).emit("gameStart", { players: game.players });
            delete activeGames[gameId];
        }

        callback({ success: true, message: "Joined game successfully" });
    });

    socket.on("makeMove", async ({ accessToken, gameId, index }) => {
        const userId = await verifyAccessTokenForSocket(accessToken);
        if (!userId) {
            return;
        }

        const game = games[gameId];
        if (!game || game.board[index] !== null) {
            return;
        }

        const player = game.players.find((p) => p.userId === userId);
        if (!player) {
            return;
        }

        if (game.currentPlayer !== userId) {
            return;
        }

        game.board[index] = player.role;

        const nextPlayer = game.players.find((p) => p.userId !== userId);
        game.currentPlayer = nextPlayer.userId;

        const winner = checkWinner(game.board);
        io.to(gameId).emit("gameUpdate", game);
        if (winner) {
            io.to(gameId).emit("gameOver", {
                winner: winner === "X" || winner === "O" ? userId : "Draw"
            });
            if (winner === "X" || winner === "O") {
                updateScore(userId);
            }
        } else if (!game.board.includes(null)) {
            io.to(gameId).emit("gameOver", { winner: "Draw" });
        }
    });

    socket.on("closeLobby", async ({ accessToken, gameId }) => {
        const userId = await verifyAccessTokenForSocket(accessToken);
        if (!userId) {
            return;
        }

        const game = activeGames[gameId] || games[gameId];
        if (!game) {
            return;
        }

        if (game.players[0]?.userId !== userId) {
            return;
        }

        delete activeGames[gameId];
        delete games[gameId];
    });

    socket.on("requestRematch", async ({ accessToken, gameId }) => {
        const userId = await verifyAccessTokenForSocket(accessToken);
        if (!userId) return;

        const game = games[gameId];
        if (!game) return;

        const player = game.players.find((p) => p.userId === userId);
        if (!player) return;

        player.readyForRematch = true;

        if (game.players.every((p) => p.readyForRematch)) {
            game.board = Array(9).fill(null);
            game.players.forEach((p) => (p.readyForRematch = false));

            const roles = ["X", "O"];
            const randomIndex = Math.floor(Math.random() * 2);
            game.players[0].role = roles[randomIndex];
            game.players[1].role = roles[1 - randomIndex];

            game.currentPlayer = game.players.find(
                (p) => p.role === "O"
            ).userId;
            game.createdAt = Date.now();

            io.to(gameId).emit("gameStart", { players: game.players });
        }
    });

    // Disconnect
    // socket.on("disconnect", () => {
    // console.log('User disconnected:', socket.id);
    // });
});

};

export default socketHandler;

Nothing is getting logged on console in prod and everything is working as expected in dev environment

Only long polling is ongoing which is also not working

No firewall is enables