socketio client didn't received the NodeJS emitting message

Question

[SOLVED]

issue : socket.io version.

description: the socket.io version 3.0.4 is not working. the version 2.3.1 is working.

https://github.com/thura-ntu/simple-socket-io-chat.git

==== Origin question

I created a simple socketio server => client connection as follow and I get the "Client connected [id=Uen6E2T9OCJOCpy2AAAI]" as client connection. But the client didn't received server emitted message. Please help me.

=== updated

full source code.

Now I realize, socket is just handshaking but both server and client neither send nor received each other. How can I solve it?

server.js

var app = require("express")();
var mysql = require("mysql");
var http = require('http').Server(app);
var io = require("socket.io")(http);

/* Creating POOL MySQL connection.*/



var pool = mysql.createPool({
    connectionLimit: 100,
    host: host,
    user: user,
    password: password,
    database: database,
    debug: false
});


/*  This is auto initiated event when Client connects to Your Machien.  */

io.on('connection', function (socket) {
    var hs = socket.handshake;
    console.log(hs);
    console.log('A socket with sessionID ' + hs  + ' connected!');
    console.info(`Client connected [id=${socket.id}]`);

    socket.on('status added', function (status) {
        add_status(status, function (res) {
            if (res) {
                io.emit('refresh feed', status);
            } else {
                io.emit('error');
            }
        });
    });
});

var add_status = function (status, callback) {
    pool.getConnection(function (err, connection) {
        if (err) {
            callback(false);
            return;
        }
        connection.query("INSERT INTO `status` (`s_text`) VALUES ('1');", function (err, rows) {
            connection.release();
            if (!err) {
                callback(true);
            }
        });
        connection.on('error', function (err) {
            callback(false);
            return;
        });
    });
}

http.listen(3000, function () {
    console.log("Listening on 3000");
});

client.html

<html>
<head>
    <title>Socket.io</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var socket = io('localhost:3000');
            $("#add_status").click(function () {
                socket.emit('status added', $("#comment").val());
            });
            socket.on('refresh feed', function (msg) {
                $("#show_comments").append(msg + '<br /><br />');
            });
        });
    </script>
</head>
<body>
<div id="comment_box" style="padding:5%;">
    <textarea id="comment" rows="5" cols="70"></textarea><br/><br/>
    <input type="button" id="add_status" value="Add Status">
</div>
<div
        id="show_comments"
        class="jumbotron"
        style="width: 38%;
                height: 100%;
                padding: 2%;
                margin-left:5%;
                margin-top:-53px;"
>
</div>
</body>
</html>

socket.handshake

{ headers:
   { host: 'localhost:3000',
     connection: 'keep-alive',
     'sec-ch-ua':
      '"Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"',
     accept: '*/*',
     'sec-ch-ua-mobile': '?0',
     'user-agent':
      'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36',
     origin: 'http://localhost:63342',
     'sec-fetch-site': 'same-site',
     'sec-fetch-mode': 'cors',
     'sec-fetch-dest': 'empty',
     referer: 'http://localhost:63342/',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'en-GB,en-US;q=0.9,en;q=0.8' },
  time:
   'Sat Jan 02 2021 16:35:43 GMT+0800 (Singapore Standard Time)',
  address: '::1',
  xdomain: true,
  secure: false,
  issued: 1609576543893,
  url: '/socket.io/?EIO=4&transport=polling&t=NR2FFQE',
  query: { EIO: '4', transport: 'polling', t: 'NR2FFQE' } }

I have tried to reproduce it but I stuck in line 4. The let io = require('socket.io').listen(http);produces an TypeError listen is not an function — Aalexander
I found the problem and updated the origin question. Happy New Year!!! — Thu Ra

Bidzina Aivazashvili Bidzina Aivazashvili · Accepted Answer · 2021-01-01T20:33:10

You need to pass HTTP server to socket.io

let io = require('socket.io').listen(http); // incorrect

Use:

let io = require('socket.io')(http);

Finally hope you include socket.io-client library in your client html. Use CDN or relative path from your local directory

<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script>
     const socket = io.connect('localhost:8085');
     socket.on('Welcome', function (data) {
         console.log(data);
     });
</script>

If you get CORS Error (Check console) use:

let io = require('socket.io')(http, {
    cors: {
        origin: "*", // Be careful with * 
    }
});

socketio client didn't received the NodeJS emitting message

1 Answers