Usage of Node js calling socket.io functions

Question

In my nodeClient.js, i am having one function

socket.emit( 'message', { name: nameVal, message: msg } );

and

socket.on( 'message', function( data ) {
var actualContent = $( "#messages" ).html();
var newMsgContent = '<li> <strong>' + data.name + '</strong> : ' + data.message + '</li>';
var content = newMsgContent + actualContent;

$( "#messages" ).html( content );
});

it is clearly visible here that, the socket.on() function is using here to push the data into that particular id,

but, if I check the id in the html

<ul id="messages">
    <?php 
        $query = $pdo->prepare( 'SELECT * FROM message ORDER BY msgid DESC' );
        $query->execute();

        $messages = $query->fetchAll( PDO::FETCH_OBJ );
        foreach( $messages as $message ):
    ?>
            <li> <strong><?php echo $message->name; ?></strong> : <?php echo $message->message; ?> </li>
        <?php endforeach; ?>
</ul>

in the html page, we are fetching the data from the database using mysql query, this is working fine with php without node js also... Now, my question is "How the socket.on() or socket.emit() functions are helping out to get the result."

This is my complete nodeClient.js file

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

$( "#messageForm" ).submit( function() {
var nameVal = $( "#nameInput" ).val();
var msg = $( "#messageInput" ).val();
//alert(msg);
socket.emit( 'message', { name: nameVal, message: msg } );

// Ajax call for saving datas
$.ajax({
url: "./ajax/insertNewMessage.php",
type: "POST",
data: { name: nameVal, message: msg },
success: function(data) {

}
});

return false;
});

socket.on( 'message', function( data ) {
var actualContent = $( "#messages" ).html();
var newMsgContent = '<li> <strong>' + data.name + '</strong> : ' + data.message + '</li>';
var content = newMsgContent + actualContent;

$( "#messages" ).html( content );
});

and this is my nodeServer.js

var socket = require( 'socket.io' );
var express = require( 'express' );
var http = require( 'http' );

var app = express();
var server = http.createServer( app );

var io = socket.listen( server );

io.sockets.on( 'connection', function( client ) {
    console.log( "New client !" );

    client.on( 'message', function( data ) {
        console.log( 'Message received ' + data.name + ":" + data.message );

        client.broadcast.emit( 'message', { name: data.name, message: data.message } );
        io.sockets.emit( 'message', { name: data.name, message: data.message } );
    });
});

server.listen( 8080 );

Anyone please help me for this. Thanks in advance!

Answer 1

Nodejs updates the content of your div real time. You don't have to load the page. If you use only php you need to refresh the page to see the changes.