CODEWITHSUNDEEP
javascriptjquerynode.jssocket.ioexpress
Jack
Jack

Reputation: 15872

Is it possible to update a single part of a page using Nodejs and Socket.io?

I'm trying to create a basic Node application, every time a client connects I want to update the counter which is displayed on the page. (My goal is to create this application in its most simple, and learnable form to demonstrate node to my lecturer).

Server side application snippets:

Making the connection

var clients = 0;

io.sockets.on('connection', function (socket) {
  socket.on('connect', function () { clients += 1 });  
  socket.on('disconnect', function(){ clients -= 1 });  
});

Rendering the page

app.get(navigation.chat.page, function(req, res){ 
  res.render('chat', {
    title: navigation.chat.title,
    connected: clients
  });
});

Chat page jade template snippet:

  span#client_count #{connected}
  |  connected clients

Client side jQuery, Socket.io and JavaScript

var socket = io.connect('http://localhost');

$(document).ready(function(){
  socket.on('connect', socket.emit('connect'));
});

Problem: The number of connected clients only updates upon page refresh. I would like the number to be updated asynchronously. I'm quite new to node, socket.io and express so i'm unsure how to tackle the problem!

Upvotes: 1

Views: 2932

Answers (1)

Adam Jurczyk
Adam Jurczyk

Reputation: 2131

rather than incrementing on client side, better keep counter value on server side, increment on connection and decrement on disconnect io events. Then, you can send updated counter (in the same event handlers where value was changed). On client side, listen for event with counter and when received, replace value in html.

server :

var users_count = 0;

io.sockets.on('connection', function (socket) {
    //on connection, update users count
    ++users_count;
    //send it to every opened socket
    io.sockets.emit('users_count', users_count);

    //when this socket is closed
    socket.on('disconnect', function () {
        //user disconnected
        --users_count;
        //emit to every opened socket, so everyone has up to date data
        io.sockets.emit('users_count', users_count);
    });
});

client :

jQuery(function($){
    //connect to localhost
    var socket = io.connect('http://localhost');
    //handle users_count event, by updating our html
    socket.on('users_count', function(data){
        $('#client_count').text(data);
    });
});

Upvotes: 6

Related Questions