Socket io client cannot communicate to socket io server

Question

Need your help/guidance/suggestion for our scenario.

Issue : I am having some trouble connecting socket.io client to socket.io server. The error I got after running this code is connection time out.

My server code is:

const port = process.env.PORT || 4004;
const http = require('http');
const socket = require('socket.io');
const app = express();
const httpServer = http.createServer(app);
const io = new socket.Server(httpServer);

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

httpServer.listen(port, () => {
    console.log("Listening on port ",port);
});

My client code is:

<script src = "socket.io.min.js"> </script>
<script>
    var socket = io.connect(`wss://${document.location.hostname}:${port}`);
    console.log(socket);
    socket.on('done', (data) => {
        console.log(data);
    });
 </script>

Answer 1

Your server code does not start in my node installation.

I correct your server code with this below and seems to work fine on my node installation. You forgot to link express library

const port = process.env.PORT || 4004;
const http = require('http');
const socket = require('socket.io');
const express = require('express');
const app = express();
const httpServer = http.createServer(app);
const io = new socket.listen(httpServer);

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

httpServer.listen(port, () => {
    console.log("Listening on port ", port);
});

Answer 2

You can do with this script. This is my personal working script for socket IO chat app.

Backend Server

require("dotenv").config();
const port = process.env.SOCKET_PORT || 3000;
const main_server_url = process.env.SERVER_URL;
var express = require("express");
var app = express();
var server = app.listen(port);
var connectionOptions = {
  "force new connection": true,
  "reconnection": true,
  "reconnectionDelay": 2000,                  //starts with 2 secs delay, then 4, 6, 8, until 60 where it stays forever until it reconnects
  "reconnectionDelayMax": 60000,              //1 minute maximum delay between connections
  "reconnectionAttempts": "Infinity",         //to prevent dead clients, having the user to having to manually reconnect after a server restart.
  "timeout": 10000,                           //before connect_error and connect_timeout are emitted.
  "transports": ["websocket"]                 //forces the transport to be only websocket. Server needs to be setup as well/
}
var io = require("socket.io").listen(server, connectionOptions);
var axios = require("axios");

var users = [];
var connections = [];

console.log("Server connected done");

io.sockets.on("connection", function (socket) {
  var server_url = main_server_url;
  console.log(server_url);

  console.log(people);
  connections.push(socket);
  console.log("Connected : total connections are " + connections.length);

  // rest of events of socket
});

Front End JS for load IO for client

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

<script type="text/javascript">
    var base_url = YOUR_BASE_URL;
    var port = YOUR_SOCKET_PORT;
    var socket_port_url = base_url + ":" + port;
    var socket = io(socket_port_url);
    socket.on('done', (data) => {
        console.log(data);
    });
</script>