Chat with warning notification in Lockable

Asked

Viewed 733 times

1

I’m developing a chat with Laravel, and follow this tutorial. The chat is working fine, but wanted to know how to appear a notification of this type:

inserir a descrição da imagem aqui

When a message is sent to a user and has not read it yet.

Can someone help me?

  • You must use Laravel Notifications along with Pusher or Laravel Echo

  • Good afternoon. Use this guy here https://laravel.com/docs/5.6/notifications ?

  • Exactly, Jeffrey Way’s tutorials use it.

  • Okay. I’ll take a look. Thank you

  • Right video: https://laracasts.com/series/real-time-laravel-with-socket-io/episodes/1

  • You want it in real time?

  • Yes yes... Facebook style you know.

Show 2 more comments

1 answer

1


In your Migration "messages", add:

 $table->timestamp('read_at')->nullable();

With this field, you can know the messages that have already been read and the messages that have not been read.

Now, all you have to do is search for unread messages like this:

$mensagemsNaoLidas = App\Message::where('user_id', $user_id)->whereNull('read_at')->get();

And return to your view the values, like this:

return view('suaview', $mensagensNaoLidas);

With this, you pass to your view these unread messages and format according to the photo in this way:

a.notif {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  background: url(...url para o icone...);
  background-size: contain;
  text-decoration: none;
}
.num {
  position: absolute;
  right: 11px;
  top: 6px;
  color: #fff;
}

<a href="" class="notif">
<span class="num">
<?php
     echo count($mensagensNaoLidas);
?>
</span></a>

That way, it displays as per the image, and then you decide how you want the code to decide when it read a message.

  • Good afternoon Vinicius. But in this case that you passed me, I would use some event to keep checking if you have new messages? Type some Ajax event?

  • By asking, I understood that it didn’t need to be real-time, so I made it static, just updates the notifications by reloading the page. You can use Ajax to check from time to time for new messages. There is also the possibility to reuse the code you used to refresh the page in real time when receiving messages to update notifications.

  • Good evening Vinicius. The way you spoke to me worked. Thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.