404 Page not found

[Nagrom33]

Hi,

I am hosting an simple React website on my Raspberry Pi with Apache. What i want is to auto start the node server script on the same Raspberry Pi but the React website is external to view. But I'm getting following error: https://domain.com/socket.io/?EIO=4&transport=polling&t=O3zS4YP

I don't need to open port 3030 for the server right, both are running on the same domain/ip?

Server.js

const express = require("express");
const cors = require("cors");
const http = require("http");
const socketIO = require("socket.io");

const PORT = 3030;
const NEW_MESSAGE_EVENT = "new-message-event";

const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
  cors: true,
  origins:["https://domain.com/l"]
});

app.use(cors());

const room = "general"
io.on("connection", (socket) => {
  socket.join(room);

  socket.on(NEW_MESSAGE_EVENT, (data) => {
    io.in(room).emit(NEW_MESSAGE_EVENT, data);
  });

  socket.on("disconnect", () => {
    socket.leave(room);
  });
});

server.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});

And the component where the chat needs to show:

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

const NEW_MESSAGE_EVENT = "new-message-event";

const useChatRoom = () => {
    const [messages, setMessages] = useState<any>([]);
    const socketRef = useRef<any>();

    useEffect(() => {
        socketRef.current = io();

        socketRef.current.on(NEW_MESSAGE_EVENT, (message: any) => {
            const incomingMessage = {
                ...message,
                isOwner: message.senderId === socketRef.current.id,
            };
            setMessages((messages: string[]) => [...messages, incomingMessage]);
        });

        return () => {
            socketRef.current.disconnect();
        };
    }, []);

    const sendMessage = (messageBody: string) => {
        socketRef.current.emit(NEW_MESSAGE_EVENT, {
            body: messageBody,
            senderId: socketRef.current.id,
        });
    };

    return { messages, sendMessage };
};

export default useChatRoom;

I hope someone can help me out!

[darrachequesne]

Hi! I'm not sure to totally understand the issue, but couldn't you just use Apache as a reverse proxy towards your React website and your Node.js server?