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}/`); });