I am trying to set up a real time chat application using socket.io, I have been having issues with the socket connection on frontend, I need a bit clarification on how to go about it.
on the backend
backend/socket.js
const { Server } = require("socket.io");
const http = require("http");
const express = require("express");
const socketJwt = require("./middleware/socketJWT");
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin:
process.env.NODE_ENV === "production"
? false
: [
"http://localhost:5500",
"http://127.0.0.1:5500",
"http://localhost:3000",
],
methods: ["GET", "POST"],
transports: ["websocket", "polling"],
credentials: true,
},
allowEIO3: true,
});
io.engine.use(socketJwt);
io.on("connection", (socket) => {
console.log(socket.id);
const user = socket.request.user;
const userSocketMap = {};
if (user != "undefined") userSocketMap[user] = user;
io.emit("getOnlineUsers", Object.keys(userSocketMap));
console.log(user);
});
module.exports = { server, app };
backend/app.js
require("dotenv").config();
const { server, app } = require("./newSocket");
const express = require("express");
const path = require("path");
const PORT = process.env.PORT || 3500;
const { logger, logEvents } = require("./middleware/logger");
const errorHandler = require("./middleware/errorHandler");
const connectDB = require("./config/dbConn");
const mongoose = require("mongoose");
const cors = require("cors");
const corsOptions = require("./config/corsOptions");
const cookieParser = require("cookie-parser");
const verifyJwt = require("./middleware/verifyJwt");
app.use(cors(corsOptions));
app.use(express.json());
app.use(cookieParser());
app.use("/", express.static(path.join(__dirname, "/public")));
app.use("/", require("./routes/root"));
app.use("/contacts", require("./routes/contactRoutes"));
app.use("/users", require("./routes/useRoutes"));
app.use("/login", require("./routes/authRoutes"));
app.use("/refresh", require("./routes/refreshRoute"));
app.use("/logout", require("./routes/logOutRoute"));
app.use("/employees", require("./routes/api/employees"));
app.use(logger);
app.all("*", (req, res) => {
res.status(404);
if (req.accepts("html")) {
res.sendFile(path.join(__dirname, "views", "404.html"));
} else if (req.accepts("json")) {
res.json({ message: "404 Not found" });
} else {
res.type("txt").send("404 Not Found");
console.log("res.headersSent");
}
});
app.use(errorHandler);
mongoose.connection.once("open", () => {
console.log("Connected to MongoDB");
});
mongoose.connection.on("error", (err) => {
console.log(err);
logEvents(
`${err.no}:${err.code}t${err.syscall}t${err.hostname}`,
"mongoErrLog.log"
);
});
server.listen(PORT, () => {
connectDB();
console.log(`Server running on port ${PORT}`);
});
`
frontend/src/hooks/socketContext.js
`
import { createContext, useContext, useEffect, useState } from "react";
import { io } from "socket.io-client";
import { useAuth } from "./useAuth";
const url = "ws://localhost:3500";
const SocketContext = createContext();
export const SocketContextProvider = ({ children }) => {
const [socket, setSocket] = useState(null);
const [onlineUsers, setOnlineUsers] = useState([]);
const { user, token } = useAuth();
useEffect(() => {
if (user) {
const socket = io(url, {
autoConnect: false,
reconnection: false,
extraHeaders: {
authorization: `bearer ${token}`,
},
});
setSocket(socket);
socket.on("getOnlineUsers", (users) => {
setOnlineUsers(users);
});
return () => socket.close();
} else {
if (socket) {
socket.close();
setSocket(null);
}
}
}, [user, token, socket]);
return (
<SocketContext.Provider value={{ socket, onlineUsers }}>
{children}
</SocketContext.Provider>
);
};
export const useSocket = () => {
return useContext(SocketContext);
};
`
frontend/src/index.js
`
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter } from "react-router-dom";
import { SocketContextProvider } from "./hooks/socketContext";
import { AuthProvider } from "./hooks/useAuth";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<AuthProvider>
<SocketContextProvider>
<App />
</SocketContextProvider>
</AuthProvider>
</BrowserRouter>
</React.StrictMode>
);
I created a context and established the socket connection there which I shared across the application, however the socket has failed to connect. the getOnlineUsers event emitted in the server is not listened to by the client, also the server has failed to receive any connection event from the client.
please, help me out, I have been finding it difficult to ask questions here, am begging you guys to help. thanks in anticipation
if you can show me how to do the connection with redux it will be nice.
