react+php 一个简陋的聊天室

本文介绍如何使用React前端和PHP Laravel后端构建一个简单的聊天室应用。前端依赖于antd pro和laravel-echo-client,后端基于laravel 5.7和laravel-echo-service。主要流程包括前端订阅频道并接收消息,后端设置触发器、配置channels和启动队列。错误排查方法包括检查redis队列、测试laravel-echo-service接口等。
摘要由CSDN通过智能技术生成

环境:

        前端:antd  pro + laravel-echo-client

        后端:laravel 5.7,laravel-echo-service

大概流程:

        前端:主页创建client,开始请求数据 (频道 user_id)。如有数据就发送一个通知。

               聊天室页创建client,进入后请求数据 (频道 order_id)。如有数据就在聊天页显示内容。

        后端:laravel-echo-service 配置好conifg,启动 

                laravel 创建触发器-监视器,

                laravel 配置 channels

                启动队列(redis),

                event() 触发事件。

                流程:event->redis存入队列->laravel-echo-service接收并发送给客户端.

需求文档:

        laravel-echo-client

        laravel-echo-service

错误排查方法:

        1.event 触发事件后 redis 中会有队列生成,keys * 能够查看是否有队列。

        2.laravel-echo-service 文档中有测试接口,可以判断是否因为laravel是否因为laravle原因导致不通。

        3.laravel-echo-service 有测试模式,cmd能够看到客户端是否连接和是否发送消息。

        4.启动队列的命令为 php artisan queue:work 能够看到是否触发了任务。

实际代码:

        前端:       

            import Echo from "laravel-echo"; #引入laravel-echo包

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

            window.Echo = new Echo({ #创建echo 实例

             broadcaster: 'socket.io',

                    host: window.location.hostname + ':16001' #修改的监听端口,默认6001            

            });

            window.Echo.private('otc_orderNotice.'+getId()) #监听的频道名

    .listen('.server.orderNotice', (e) => { #触发器别名

    //逻辑

    });

    后端:

//触发器类
class 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值