Push notification with Socket.io

Question

I made a small application with Node + socket.io to send notification. adding the code below on the client page, the notification is displayed in the div "messagebox".

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://localhost:4555/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost:4555', {transports: ['websocket', 'polling', 'flashsocket']});
  socket.on('notificacao', function (data) {
    document.getElementById('messagebox').innerHTML = data;

  });
</script>

<div id="messagebox">

My question now is how to make those notifications appear in the facebook style. or to be clearer equal to the pushcrew notifications.

I haven’t found anything that can help me :/ someone has some material or knows how I can do it ?

Answer 1

I think a solution to your problem would be this

var socket = io('http://localhost:4555', {transports: ['websocket', 'polling', 'flashsocket']});
socket.on('notificacao', function (data) {
    console.log(data) //VERIFIQUE OS DADOS QUE ESTÃO CHEGANDO 
    notify(data.nome,data.mensagem)
});

function notify(nome,mensagem) {
    Notification.requestPermission(function() {
        var notification = new Notification(nome, {
            icon: 'ICONE DA SUA APLICAÇÃO',
            body: mensagem
        });
        notification.onclick = function() {
            //SUA LÓGICA AQUI
        }
    });
}

Code based on: Desktop notifications in Chrome with Javascript