0

Fiz uma pequena aplicação com node + socket.io para envio de notificação. adicionando o código abaixo na página do cliente, a notificação é exibida na 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">

Minha dúvida agora é como fazer para aparecer aquelas notificações no estilo do facebook. ou para ser mais claro igual as notificações do pushcrew.

Não encontrei nada que possa me ajudar :/ alguém tem algum material ou sabe como posso fazer isso ?

7
  • Eu não entendi o que você quer exatamente, poderia explicar melhor? Commented 30/05/2018 às 12:28
  • @RafaelAugusto Bom dia Rafael posso sim, seguinte... da forma que eu fiz, assim que disparo a notificação ela aparece na pagina pela div MESSAGEBOX porém eu gostaria de invés de aparecer na div, aparece-se dessa forma aquii --> prntscr.com/joj5xi eu não consegui fazer isso :/ Commented 30/05/2018 às 12:33
  • O que você quer é utilizar a API do HTML, Notification da uma olhada developer.mozilla.org/en-US/docs/Web/API/Notifications_API Commented 30/05/2018 às 12:40
  • @RafaelAugusto já tinha visto essa documentação, mas não consegui integrar com a minha aplicação, por falta de conhecimento mais avançado sobre o assunto :/, mesmo assim obrigado. Commented 30/05/2018 às 12:43
  • Vou montar um exemplo funcional para você Commented 30/05/2018 às 12:44

1 Resposta 1

2

Acho que uma solução para o seu problema seria esse

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
        }
    });
}

Código baseado em: Notificações de desktop no Chrome com Javascript

8
  • Obrigado pela contribuição, mas eu não consegui juntar esse código com o meu para fazer funcionar :/ Commented 30/05/2018 às 13:21
  • Aparece algum erro? Commented 30/05/2018 às 13:36
  • Eu editei a minha resposta, copie esse código e dê uma olhada no seu console Commented 30/05/2018 às 13:41
  • opa, apareceu assim no console --> prntscr.com/jokdyq mas a notificação não apareceu, e sempre que disparo ele pergunta se quero aceitar receber notificação Commented 30/05/2018 às 13:47
  • fiz isso --> prntscr.com/jokj9q mas a notificação ainda não aparece :/ Commented 30/05/2018 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .