Skip to main content

How to implement Real time notification in NodeJs

Here are simple steps to create real time notification using NodeJs, Socket.io and Mysql

Socket.IO enables real-time bidirectional event-based communication.It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Install Socket.IO


npm install --save socket.io

I hope you have install express and mysql. This are basic few code inside server file.

var express = require( 'express' );
var app = express();
app.use( express.static( __dirname + '/public') );

var mysql = require('mysql');
var server = require( 'http' ).Server( app );
var io = require( 'socket.io' )( server );
server.listen( 3000, function(){
  console.log( 'listening on *:3000' );

} );
app.get('/', function(req, res) {
   res.sendFile(__dirname + '/index.html');

});

The require('socket.io')(http) creates a new socket.io instance attached to the http server.

Now make mysql connection

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "nodejs"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");

});

Now in index.html I add the following snippet before the </body>:
It load the socket.io-client, and then connect with server.
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

</script>

Now in server file I add the following snippet. It will check connection event for incoming sockets,

io.on('connection', function(socket){
  console.log('a user connected');
});

Now add event on client side
socket.on('user list', function(list){
$('.blink_me').text(list[0].totalUsers);

});

Handle event in server side.

io.on('connection', function(socket){
  setInterval(function() { // send total users after 4 second
      con.query("SELECT count(*) as totalUsers FROM customer", function(err, result) {
if(err){
throw err;
}
io.emit('user list', result);
  });
   }, 4000);

});

Some Important points

Socket Event Handling

In order to send an event to everyone, Socket.IO gives us the io.emit:

io.emit('some event', { for: 'everyone' });

You can create and execute custom events using the socket.emit function.

eg: socket.emit('customEvent', { content: 'A custom event created !'});

in view file use it
var socket = io();
socket.on('customEvent', function(data){document.write(data.content)});

You can also emit events from the client side. To emit an event from your client, use the emit function on the socket object.
var socket = io();
socket.emit('clientEvent', 'Sent an event from the client!');

inside server file
socket.on('clientEvent', function(data) {
  console.log(data);

});

Socket Broadcasting
Broadcasting means sending a message to all connected clients.To broadcast an event to all the clients, we can use the io.sockets.emit method.

inside server file:
var clients = 0;
io.on('connection', function(socket) {
   clients++;
   io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   socket.on('disconnect', function () {
      clients--;
      io.sockets.emit('broadcast',{ description: clients + ' clients connected!'});
   });
});

On the client side
socket.on('broadcast',function(data) {
document.write(data.description);

});

Comments

Post a Comment

Popular posts from this blog

Generate XML file in Cakephp

Steps to Generate XML file using CakePHP: Step-1 Enable to parse xml extension in config route.php file.     Router::parseExtensions('xml'); Step-2 Add Request Handler Component to the Controller    var $components = array(‘RequestHandler’); Step-3 Add controller Action For XML Generation in Post Controller     function generateXMLFile()     {         if ($this->RequestHandler->isXml()) { // check request type             $this->layout = 'empty'; // create an empty layout in app/views/layouts/empty.ctp              }        }  Add header code in empty layout <?php header('Content-type: text/xml');?> <?php echo $this->Xml->header(); ?> <?php echo $content_for_layout; ?> Step-4 Set up View To generate XML Create xml folder inside Posts vi...

How To Create Shortcodes In WordPress

We can create own shortcode by using its predified hooks add_shortcode( 'hello-world', 'techsudhir_hello_world_shortcode' ); 1. Write the Shortcode Function Write a function with a unique name, which will execute the code you’d like the shortcode to trigger: function techsudhir_hello_world_shortcode() {    return 'Hello world!'; } Example: [hello-world] If we were to use this function normally, it would return Hello world! as a string 2. Shortcode function with parameters function techsudhir_hello_world_shortcode( $atts ) {    $a = shortcode_atts( array(       'name' => 'world'    ), $atts );    return 'Hello ' . $a['name'] . !'; } Example: [hello-world name="Sudhir"] You can also call shortcode function in PHP using do_shortcode function Example: do_shortcode('[hello-world]');

How to replace plain URLs with links

Here we will explain how to replace Urls with links from string Using PHP $string ='Rajiv Uttamchandani is an astrophysicist, human rights activist, and entrepreneur. Academy, a nonprofit organization dedicated to providing a robust technology-centered education program for refugee and displaced youth around the world.  CNN Interview - https://www.youtube.com/watch?v=EtTwGke6Jtg   CNN Interview - https://www.youtube.com/watch?v=g7pRTAppsCc&feature=youtu.be'; $string = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.%-=#]*(\?\S+)?)?)?)@', '<a href="$1">$1</a>', $string); Using Javascript <script> function linkify(inputText) {     var replacedText, replacePattern1, replacePattern2, replacePattern3;     //URLs starting with http://, https://, or ftp://     replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;     replacedText = inputT...