实时通知使用 Laravel Livewire

huangapple go评论71阅读模式
英文:

Real-time notifications using Laravel Livewire

问题

特别是,我正在尝试在用户收到消息时向其发出警告。

问题是,一旦发送消息,收件箱计数直到重新加载页面才会更新。

我想使用来自后端的实时数据更新视图。我该怎么办?

这是我的Wire视图:
实时通知使用 Laravel Livewire

这是我的Wire组件:
实时通知使用 Laravel Livewire

PS:为了测试这个,我已经实现了一个增量方法,并且在点击后它可以正常工作。但对于unreadCount()方法来说情况不同。我对LiveWire不太熟悉,所以对于提供的任何帮助都将不胜感激。

英文:

Specifically, I am trying to alert a user when he/she has a message.

The problem is that once a message is sent, the inbox count does not update until I reload the page.

I want to Update the view with real-time data from the back-end. What do I do?

This is my wire view:
实时通知使用 Laravel Livewire

This is my wire-component:
实时通知使用 Laravel Livewire

PS: to test this, I've implemented an increment method and it works upon clicking. Same can't be said for unreadCount(). I am new to livewire so, any help rendered will be appreciated

答案1

得分: 3

这并不是一项容易的任务,但我希望我能帮助你。

基本上,有两种解决方法。

第一种方法是使用 Livewire Polling,在这种情况下,你的前端每2秒请求一次数据库,以检查是否有新的通知给这个用户。具体来说,你可以在你的情况下使用 wire:poll.keep-alive

<div class="{{$this->unreadCount > 0 ? 'block' : 'hidden'}}"
     wire:poll.keep-alive>
    You have {{$this->unreadCount}} new notifications.
</div>

需要明确的是,根据你的项目规模和用户数量,这种方法可能会频繁请求数据库,可能会使数据库负载过重

另一种方法是使用 WebSocket,这是第二种也是理想的方法。它充当监视器,检查你的后端应用程序,只有在发出 事件 时才将未读计数发送到前端。

这两种方法的区别在于,第一种方法每2秒都会向数据库发出请求,而第二种方法只会在事件被触发时才发送请求。

值得注意的是,WebSocket 解决方案更复杂,需要了解 Laravel 的 事件和监听器。然而,有许多关于 WebSockets 的 在线资源可用。如果你对这些概念感到舒适并且打算扩展你的应用程序,可以尝试一下。

有免费的 WebSocket 解决方案,但我建议你使用 Pusher,因为 Laravel 应用程序已经预先配置好了。使用 Pusher,你有一个免费计划,每天最多接收20万条消息和100个连接,对于小型项目来说非常不错。

希望这对你有所帮助!

英文:

That is not an easy task, but I hope I can help you.

Basically, there are two ways to resolve this.

The first one is using Livewire Polling, where your frontend requests the database every 2 seconds to check if there are any new notifications for this user. Specifically, you can use wire:poll.keep-alive in your case.

&lt;div class=&quot;{{$this-&gt;unreadCount &gt; 0 ? &#39;block&#39; : &#39;hidden&#39;}}&quot;
     wire:poll.keep-alive&gt;
    You have {{$this-&gt;unreadCount}} new notifications.
&lt;/div&gt;

It is important to clarify that, depending on the size of your project and the number of users, this solution may overload your database with frequent requests.

In advance, you can use a WebSocket solution, which is the second and ideal approach. It acts as a monitor that checks your backend application and only sends the unreadCount to your frontend when an event is emitted.

The difference between the two approaches is that the first one makes requests to the database every 2 seconds, while the second one only does when the event is emitted.

It's worth to know that the WebSocket solution is more complex and requires knowledge of Laravel events and listeners. However, there are plenty of online resources available about WebSockets. If you are comfortable with these concepts and pretend to scale your application, you can give it a try.

There are free WebSocket solutions, but I recommend you to go with Pusher because the Laravel App is already pre-configured for use it. Using pusher, you have a free plan that receives until 200k messages per day and 100 connections that is just nice for small projects.

I hope this helps!

huangapple
  • 本文由 发表于 2023年6月13日 07:51:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76460913.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定