php lumen 聊天室,laravel5.4实现实时聊天室

阅读: 评论:0

php lumen 聊天室,laravel5.4实现实时聊天室

php lumen 聊天室,laravel5.4实现实时聊天室

一、修改laravel的广播驱动

修改 .env中:

BROADCAST_DRIVER=redis

二、创建laravel事件广播

比如要创建一个发送聊天消息的事件,则

php artisan make:event SendChat

后在app/events里面会有SendChat.php

SendChat.php:

//由于该事件需要广播,则该类需要实现ShouldBroadcast

Class SendChat implements ShouldBroadcast {

//然后将需要广播的数据以public形式写在此类作为成员属性

public $input;

//new对象时存入的数据

public function __construct($input) {

$this->input = $input;

}

public function broadcastOn() {

//公共channel

return ['test-channel'];

}

}

最后将会得到如下数据:

频道:test-channel

数据:{"event":"AppEventsUserSignUp","data":{"input":"xulibin","socket":null},"socket":null}

Redis版本:

若不用laravel 的broadcast,则可以用Redis(它也有发布和订阅功能)

$data = ['event' => 'SendChat','data' => ['input' => 'xlb'] ];

Redis::publish('test-channel',json_encode($data));

最后将会得到如下数据:

频道:test-channel

数据:{"event":"SendChat","data":{"input":"xlb"}}

三、创建node服务器,接受laravel事件广播,再转广播给前端client,此处Node服务器是占用了3000端口,待会client也要监听这个3000端口。

1、另外还需要引入socket.io和ioredis

npm install socket.io ioredis --save

2、创建socket.js(这次是创建在项目根目录,也可其他目录)

var server = require('http').Server();

var io = require('socket.io')(server);

var Redis = require('ioredis');

var redis = new Redis();

redis.subscribe('test-channel');

<('message',function(channel,message){

message = JSON.parse(message);

console.log(channel+':'+message.event);

//这里是以“频道:事件”的方式去发送,需要接受此事件的client就接受此格式的事件

//test-channel:SendChat

});

server.listen(3000);

然后一定要开启node服务器

node socket.js //(如果js位置不同,也要加上前面的目录)

四、Client

引入vue.js(非必要),socket.is.js,vue-resource(非必要)

New Users:

  • @{{chat}}

提交

//监听服务器的3000端口

var socket = io('192.168.10.10:3000');

new Vue({

el:'#container',

data:{

users:[],

chatInput:'',

submitUrl: 'localhost:8000/api/submit' ,

chatList:[]

},

mounted:function(){

//('test-channel:UserSignUp',function(data){

<('test-channel:App\Events\UserSignUp',function(data){

console.log(data);

this.chatList.push(data.input);

}.bind(this));

},

methods:{

submit(){

var that = this;

that.$http.post(

this.submitUrl,

{'input':this.chatInput}

).then(function(response){ //接口返回数据

},function(error){

})

}

}

});

然后该按钮提交后,服务端的代码如下

$input = $request->input('input');

//触发发送聊天信息事件

event(new SendChat($input));

return $input;

五、流程图

图片1.png

本文发布于:2024-02-01 04:45:19,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170673392233955.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:聊天室   实时   php   lumen
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23