Connecting WebSocket server with HBS

Question

I'm working on a simple WebSocket project which is developed using NodeJS, Socket.IO, and HBS. It is throwing an error, once I try to connect with my socket.io server using socket.io client in frontend using below code

let socket = io("http://localhost:5000");

or

let socket = io();

Error :

polling-xhr.js:199 GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=Nnpj-9M 404 (Not Found)
create @ polling-xhr.js:199
Request @ polling-xhr.js:116
request @ polling-xhr.js:62
doPoll @ polling-xhr.js:90
poll @ polling.js:74
doOpen @ polling.js:23
open @ transport.js:46
open @ socket.js:197
Socket @ socket.js:122
./node_modules/engine.io-client/lib/index.js.module.exports @ index.js:3
open @ manager.js:115
Manager @ manager.js:44
lookup @ index.js:38
(anonymous) @ controlserver?hostname=local.host.11&macaddress=11:11:11:11:11:11:140

To give a better idea, my app.js code is developed to use HBS view engine. Full code snippet as below. (Note: websocket server also attached to express server)

const express = require("express");
const mysql = require("mysql");
const dotenv = require("dotenv");
const path = require("path");
const cookieParser = require("cookie-parser");
const http = require("http");
const socketIO = require("socket.io");

dotenv.config({ path: "./.env" });

const db = mysql.createConnection({
  host: process.env.DATABASE_HOSTNAME,
  user: process.env.DATABSE_USERNAME,
  password: process.env.DATABSE_PASSWORD,
  database: process.env.DATABASE,
});

const publicDirectory = path.join(__dirname, "./public");

const PORT = process.env.APPLICATION_PORT || 3000;

const app = express();

const server = http.createServer(app);

const io = socketIO(server);

app.use(express.static(publicDirectory));

//Parse url encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: false }));
// Parse JSON bodies (as sent by API clients)
app.use(express.json());

app.use(cookieParser());

app.set("view engine", "hbs");

db.connect((error) => {
  if (error) {
    console.log(`${error}`);
  } else {
    console.log(
      `DB connection established - host : ${process.env.DATABASE_HOSTNAME}, database : ${process.env.DATABASE}`
    );
  }
});

//Define routes
app.use("/", require("./routes/pages"));
app.use("/auth", require("./routes/auth"));

//Parse URL-Encoded bodies (as sent by HTML forms)
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

//socket IO algorithm

io.on("connection", (socket) => {
  console.log(
    "A new user just connected from " +
      socket.handshake.address +
      " @ " +
      socket.handshake.time +
      " - " +
      "client id : " +
      socket.id
  );     

  socket.on("disconnect", () => {
    console.log(
      "User was disconnected from " +
        socket.handshake.address +
        " @ " +
        socket.handshake.time +
        " - " +
        "client id : " +
        socket.id
    );
  });
});

app.listen(5000, "0.0.0.0", () => {
  console.log(`Server started on ${PORT} `);
});

UI:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
<body>
    <p id="p1">Welcome to the App</p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>
     

    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Initially, these socket.io js files (/socket.io/socket.io.js) were not identified as described in Node.js /socket.io/socket.io.js not found express 4.0, however after implementing the said solution here, the program identifies the js file, but there is no luck with the connection.

Can someone please help with this?

Connecting WebSocket server with HBS

0 Answers0