CODEWITHSUNDEEP
htmlnode.jssocket.io
KaoriYui
KaoriYui

Reputation: 922

How to display connected clients using node.js and socket.oi.js on HTML

I am new with node.js and socket.io i was able to start a local server via node.js and get the numbers of client connected on port 3000 using console.log now my next step is displaying it on my HTML, i was reading about how to include socket.io.js on HTML and tried the on('connect') method but its returning a undefined error , Any advice would be great thanks in advance!

My server.js

var express = require('express');

    var app = express();
    var server = require('http').createServer(app);
    var io = require('socket.io').listen(server);
    users = [];
    connections = [];

    server.listen(process.env.PORT || 3000);
    console.log('listening to port 3000, server is running..');

    app.get('/', function (req,res){

        res.sendFile(__dirname + '/index.html');

    });

    io.sockets.on('connection',function(socket){

        connections.push(socket);
        console.log('Connected: %s sockets connected', connections.length);



        //Disconnect
        socket.on('disconnect', function(data){
            users.splice(users.indexOf(socket.username), 1);
            updateUsernames();
            connections.splice(connections.indexOf(socket), 1);
            console.log('Disconnected: %s sockets connected', connections.length);
        });



    });

On my index.html

//This is located on my html head tag
<script src="http://localhost/socket.io/socket.io.js"></script>


 <div class="col-lg-12">
        <h1 id="users"></h1>
    </div>

  <script>
    var socket = io.connect('http://localhost:3000');

    socket.on('connect',function(){

        $('#users').html = socket.users.length;

    ));

 </script>

Upvotes: 2

Views: 2010

Answers (2)

KaoriYui
KaoriYui

Reputation: 922

I manage to display the numbers of connected users on client side by emitting a event than client will receive and display it.

revised my server.js 

  io.sockets.on('connection',function(socket){

    connections.push(socket);
    console.log('Connected: %s sockets connected', connections.length);

    //added this below
    io.sockets.emit ('totalUsers', {count: connections.length});


    //Disconnect
    socket.on('disconnect', function(data){
        users.splice(users.indexOf(socket.username), 1);
        updateUsernames();
        connections.splice(connections.indexOf(socket), 1);
        console.log('Disconnected: %s sockets connected', connections.length);

       //added this below
    io.sockets.emit ('totalUsers', {count: connections.length});

    });

Then on my index.html

 socket.on('totalUsers', function(data){

        console.log(data.count);
         $users.html('Total connected users: '+data.count);

    });

Upvotes: 2

Nelson Estuesta Jr
Nelson Estuesta Jr

Reputation: 275

You must include or link your socket.io.js before the io.connect() on your html. like this

<script type="text/javascript" src="assets/nodejs/node_modules/socket.io-client/dist/socket.io.js"></script>

you can use this cdn

https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

but it is better to use your socket.io.json your local folder it is in the node_modules/socket.io-client/dist/socket.io.js if you are using latest version of node.

Hope it will help.

Upvotes: 1

Related Questions