laravel5.8 广播事件的监听

最新推荐文章于 2025-01-05 16:09:51 发布

卉翊

最新推荐文章于 2025-01-05 16:09:51 发布

阅读量688

点赞数

分类专栏： Laravel

本文链接：https://blog.youkuaiyun.com/qq_39801208/article/details/105512409

版权

Laravel 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在 Laravel 框架中利用 WebSocket 技术实现实时消息推送，包括安装配置过程、事件监听及前后端代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件的监听则需要安装node.js软件搭建npm服务。去官网下载就可以。安装则改下安装路径就行。

默认安装会直接将npm写入到path路径中，方便直接使用npm命令。

用composer安装predis/predis。

在config\app.php文件中取消注释 App\Providers\BroadcastServiceProvider::class,

修改.env文件
在这里插入图片描述

接下来

	1.npm install --save socket.io-client    //安装websocket客户端
	2.npm install --save laravel-echo     //安装websocket客户端封装
	3.npm install -g laravel-echo-server  //安装websocket服务端
	4.npm install               //安装所有依赖
	5.npm rum watch     //监听前端资源文件变化
	6.laravel-echo-server init   //初始化websocket服务端
	7.laravel-echo-server start   //启动

在这里插入图片描述

后续开启只需要从第5步开始即可。不要忘记predis下载好后，安装好redis服务并开启。

在这里插入图片描述

这样环境安装差不多了，该启动的也启动了。该写代码了。
1.生成事件

		php artisan make:events PushMsgEvent

在这里插入图片描述

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PushMsgEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
	
	public $msg;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($msg)
    {
        //
		$this->msg =$msg;
		
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('news'); //news为你要设定的监听的名称
    }
	

}

这里可以看到监听的名称为laravel_database_news.
laravel_database_是框架默认添加的前缀。
在这里插入图片描述

修改resource/bootstrap.js，新增

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

window.Echo.channel('laravel_database_news')   
//laravel_database_news就是我们监听到的名字
    .listen('PushMsgEvent', (e) => {  //PushMsgEvent就是之前生成的文件
        var msg =e.msg;
        var num =$('#notice_num').val();
        var new_num =num+1;
       // alert(msg);
        layer.msg('您有新的消息', {
            time: 20000, //20s后自动关闭
            btn: ['明白了',  '哦']
        });
        $.get("/backbin/msg",function(data,status){  
        //ajax得到未读消息的数量并写到div中
       
            $('#notice_num').text(data);
        });

    });

前端文件引用app.js，因为app.js内容包含bootstrap.js

<script src="{{asset('js/app.js')}}"></script>

在这里插入图片描述
监听设置完成。接下来写控制器内容


		$input =Input::all();

		$notice =$input['notice'];

        $msg =New Msg();

        $data =[
            'title'=>$input['title'],
            'add_time'=>date('Y-m-d H:i:s'),
            'content'=>$notice,
        ];

        $title =$input['title'];

        $msg ->add($data);//消息存入数据库

        Redis::hmset($title,$data);//将消息存入redis中

        Redis::lpush('msg:all',$title);  //将消息存入redis中

		event(new \App\Events\PushMsgEvent($notice));  //这就话就是实现发送监听事件

写入内容


        $msg = Redis::LRANGE('msg:all',0,-1);

        foreach ($msg as $k=>$value){

            $key = $value;

            $notice[] = Redis::HGETALL($key);
        }
        $condition =[];

        $num['total'] = $this->msgnum($condition); //统计消息数据

        $condition =['read'=>0];

        $num['unread'] = $this->msgnum($condition);

		return view('admin.notice.notice',compact('notice','num'));