How can i make React JS and Socket IO connect together via Express JS server?

user_12201187 0
Viewed 168

So i was trying to use socket io now recently, but it does not allow me to connect to the React JS. In console.log it gives me some weird error messages. Take a look at the code down below. I will post a image of React and the localhost.enter image description here

Server (Express JS):

const app = require("express")();
const bodyParser = require("body-parser");
const cors = require("cors");
const http = require("http").createServer(app);
const io = require("socket.io")(http);
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
io.on("connect", (socket) => {console.log("connected");});
app.listen(5000, () => console.log(`Running on port...`));
reactjs express node.js sockets javascript
2 Answers

You need to add a dummy route that the GET request can reach.

Try this:

const express = require("express");
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const cors = require("cors");
const http = require("http").createServer(app);
const io = require("socket.io")(http);

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

router.get("/", (req, res) => {
  res.send({ response: "I am alive" }).status(200);
});

app.use("/socket.io", router);

io.on("connect", (socket) => {
  console.log("connected");
});

app.listen(5000, () => console.log(`Running on port...`));
user_108420390

You either initialize socket inside the useEffect hook or use io.connect(URL) instead of io(URL) Backend looks fine. I wrote a blog article about it.

user_132397460
Related