Socket.io Not listening event on client side

Question

I am using official code example of socket.io and trying to understand about how it works.

event is triggering and receiving on server side but client side not listening on that event.

Server i am running on node.js port 3000 and

client i am running on VSCode GoLive Extension on port 5500

Here is my detailed code

Package.json

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "socket.io": "^4.1.2"
  },
  "scripts": {
    "start": "DEBUG=* nodemon index.js"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Index.html (Due to Stackoverflow restrictions i am unable to paste whole page code Here is only body code without css)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>

<ul id="messages"></ul>
<div id="form">
  <input id="input" autocomplete="off" />
  <button id="btn_submit">Send</button>
</div>

<script>
  $(function () {
    var socket = io("http://localhost:3000");
    socket.on("connect", function () {
      console.log("client is connected", socket.connected);
      socket.emit("message", "Welcome To Chat");
    });
    var messages = document.getElementById("messages");
    var input = document.getElementById("input");

    $("#btn_submit").on("click", function () {
      if (input.value) {
        console.log(input.value);
        socket.emit("message", input.value, (response) => {
          console.log(response); // "got it"
        });
        input.value = "";
      }
    });
    console.log(socket);
    socket.on("message", function (msg) {
      console.log(msg);
      var item = document.createElement("li");
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  });
</script>

index.js

const app = require('express')();
var cors = require('cors');
const http = require('http').Server(app);
const io = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});
const port = process.env.PORT || 3000;

app.use(cors())
const connections = [];

io.on('connection', (socket) => {
  connections.push(socket);
  console.log(" %s sockets is connected", connections.length);

  socket.on("disconnect", () => {
    connections.splice(connections.indexOf(socket), 1);
    console.log("Now %s sockets is connected", connections.length);
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});

Answer 1

In your index.js file you've initialized the socket but I can't see any event receiving or emitting method. You should use socket.emit() in server side to send the data to client and socket.on() to receive the data from client. You should send socket.emit("message", "Message") from index.js file. You can find better explanation here.