thinkphp3.2+workerman(GatewayWorker)+ Layim做即时通讯_菜鸟的博客-CSDN博客

baacloud免费翻墙vpn注册使用

来源: thinkphp3.2+workerman(GatewayWorker)+ Layim做即时通讯_菜鸟的博客-CSDN博客

此博客参考https://fly.layui.com/jie/12624/

一,程序实现的逻辑:

后端还是和以前一样,传值给前端。
前端与GatewayWorker建立连接获取特定的连接id
(这样前端就有用户id和连接id)

3.前端通过ajax方法发送用户id和链接id给后端,后端进行绑定

4.监控前端发送消息,发送人id,当触发该事件,传到后端,后端根据用户id值,发送给特定的人

5.监控前端接收消息,当有新消息过来就在页面执行相应的代码

 

 

二,环境的搭建

1,下载GatewayWorker

(地址:http://www.workerman.net/download/GatewayWorker-for-win.zip)

2,修改Applications/YourApp/目录下的start_geteway.php 24行左右 修改为$gateway = new Gateway(“websocket://0.0.0.0:8282″);(端口号和前端保持一致)

3,下载workerman的GatewayClient(https://github.com/walkor/GatewayClient);

4,将下载好的Gateway重命名为Gateway.class.php并修改命名空间为namespace Org\Util;

 

将前面重命名Gateway.class.php复制到thinkphp/library/org/util/目录下
双击启动GatewayWorker根目录下的start_for_win.bat()
如果出现下面:

 

说明启动成功

如果没有启动成功将有以下解决方法

将php设置为全局环境变量(网上有很多方法)测试是否成功在命令行执行php –v,如果提示“php不是内部或外部命令“之类的就说明没有设置好
如果有下图之类的提示

上图那样有三个问题

php_mcrypt.dll – 找不到指定的模块。
php_pdo.dll – 找不到指定的模块。
proc_open() has been disabled for security reasons.
找不到指定模块:解决方法打开php.ini文件,查找模块名(比如上图php_pdo.dll);找到在这句前面加上“;”。注释掉即可

has been disabled for security reasons.解决方法:就是把这个方法的禁止打开,也是在php.ini文件修改;找到这个方法,直接删掉即可

 

三,代码部分

后端部分
因为该篇主要讲即时通讯的实现,所以用户信息获取那部逻辑就不做展示。
后端绑定和发送信息

后端接收前端数据的时候,还做了把数据存入数据库的处理,这样就可以实现数据的持久化

 

前端部分

引入文件
<script src=”__PUBLIC__/JQuery/2.0.0/JQuery.js”></script>

<link rel=”stylesheet” href=”__PUBLIC__/layim/css/layui.mobile.css”>

<script src=”__PUBLIC__/layim/layui.js”></script>
自己信息的初始化
layui.use(‘mobile’, function(layim){

var mobile = layui.mobile

,layim = mobile.layim;

layim.config({

init: {

mine: {

“username”: “{$user.name}” //我的昵称

,”id”: “user{$user.id}” //我的ID

,type: ‘kh’//类型

,”avatar”: “{$user.img}” //我的头像

}

} , chatTitleColor:”#fff”,

chatLog: ‘/chat/log/’

});

(3)创建客服信息

layim.chat({

id: “kf{$kf.id}”

,name: ‘客服{$kf.id}’

,type: ‘kefu’ //friend、group等字符,如果是group,则创建的是群聊

,avatar: ‘/luntan/{$kf.img}’

});

(4)建立连接

var socket = new WebSocket(‘ws://localhost:8282’);//服务器改成ip地址加端口号

连接方法

第一次连接,会收到两次信息,接收后端传来数据也是在这里处理

 

我们可以在onmessage方法里面进行处理,取出连接值,再传给后端,这样就绑定好了

除了是登录事件,登出事件,就是后端正常我们自己发送的数据了

我们把接收到的值,再进行展示,这样就可以实现我们需要的效果了。

//连接成功时触发
socket.onopen = function(e){

//这里可以写一些提示语

}

//监听收到的消息
socket.onmessage = function(e){
var data = e.data

// console.log(e);

data=data.replace(‘\r\n’,”);//删除换行符

var arr=data.split(” “);

if(arr[0]==”Hello”){

var client_id=arr[1].trim();

//绑定client_id

$.ajax({type: “POST”, url: “{:U(‘Workerman/bind’)}”, data: {

‘uid’:”user{$user[‘id’]}”,

‘client_id’: client_id}, dataType: ‘json’, success: function (res) {

console.log(res);

}});

}else if(arr[1]!=”login”&&arr[1]!=”logout”){

//接收服务器信息

data=JSON.parse(data);

if(data[‘sendid’]==”kf{$kf.id}”){

$(“#link”).html(“可点击进行评价”);

//console.log(data[‘sendname’]);

var obj = {};

obj = {

username:data[‘sendname’]

,avatar: data[‘img’]

,id: ‘kf1’

,type:”kefu”

,content: data[‘content’]

}

layim.getMessage(obj);

}

}

(5)监听用户发送信息

layim.on(‘sendMessage’, function(data){

console.log(data);

var sendid=data.mine.id;

var sendtype=”kh”;

var sendname=data.mine.username;

var sendimg=data.mine.avatar;

var contents=data.mine.content;

var toid=data.to.id;

var toname=data.to.name;

var totype=data.to.type;

var toimg=data.to.avatar;

var talkid=data.mine.id+”|”+data.to.id;

var talktip=data.mine.username+”|”+data.to.name;

$.ajax({

type: “POST”,

url: “{:U(‘User/getcontents’)}”,

data: {

‘sendid’:sendid,

‘sendname’: sendname,

‘sendtype’:sendtype,

‘sendimg’:sendimg,

‘contents’:contents,

‘toid’:toid,

‘toname’:toname,

‘totype’:totype,

‘toimg’:toimg,

‘talkid’:talkid,

‘talktip’:talktip,

},

dataType: ‘json’,

success: function (res) {

console.log(res);

}

})
至此即时通讯的修改就出来

 

 

四,数据的持久化,跨设备储存

把聊天记录根据自己的需求存入数据库

单用户进入聊天界面时,根据是谁与谁的聊天,读取相应数据,然后前端得到数据再进行展示。

注意layim聊天记录的要求时间戳是精确到毫秒的

(1),php获取当前毫秒的方法

public function getMillisecond() {

$time = explode (” “, microtime () );

$time = $time [1] . ($time [0] * 1000);

$time2 = explode ( “.”, $time );

$time = $time2 [0];

return $time;

}
(2),前端初始化数据

localStorage.clear();
(3),前端获取数据,并展示

$.ajax({type: “POST”, url: “{:U(‘User/getmsg’)}”, data: {

‘uid’:”user{$user[‘id’]}”,’kid’:”kf{$kf.id}”},

dataType: ‘json’, success: function (res) {

if(res.stu==1){

$(“#link”).html(“获取历史记录成功”);

var msg=res.msg;

// console.log(msg)

for ($i=0;$i<msg.length;$i++){

var isme=false;

if(“user{$user[‘id’]}”==msg[$i].sendid){

isme=true;

}

var obj = {};

obj = {

username:msg[$i].sendname//消息来源用户名

,avatar: msg[$i].sendimg //消息来源用户头像

,id: msg[$i].sendid//消息的来源ID(如果是私聊,则是用户id,如果是群聊,则是群组id)

,type:msg[$i].totype //聊天窗口来源类型,从发送消息传递的to里面获取

,content: msg[$i].contents //消息内容

,mine: isme

,timestamp: parseInt(msg[$i].time) //服务端时间戳毫秒数。注意:如果你返回的是标准的 unix 时间戳,记得要 *1000

}

layim.getMessage(obj);

}

}

}})
这样数据的持久化算是实现了

不过这里还有一个小bug,当执行layim.getMessage()如果是对方数据的时候就有声音提示(也就是上面isme变量为false的时候),所以一打开这个页面就有声音提示,这个是默认打开的,因此我们要把他关闭了

在layim.config里面最后加上“,voice: false“

然后我们自己写收到实时信息的时候发送提示音

Js发送语音提示方法

function playSound() {

var borswer = window.navigator.userAgent.toLowerCase();

if ( borswer.indexOf( “ie” ) >= 0 )

{

//IE内核浏览器

var strEmbed = ‘<embed name=”embedPlay” src=”/Public/layim/css/modules/layim/voice/default.wav” autostart=”true” hidden=”true” loop=”false”></embed>’;

if ( $( “body” ).find( “embed” ).length <= 0 )

$( “body” ).append( strEmbed );

var embed = document.embedPlay;

embed.volume = 100;

} else

{

//非IE内核浏览器

var strAudio = “<audio id=’audioPlay’ src=’/Public/layim/css/modules/layim/voice/default.wav’ hidden=’true’>”;

if ( $( “body” ).find( “audio” ).length <= 0 )

$( “body” ).append( strAudio );

var audio = document.getElementById( “audioPlay” );

//浏览器支持 audion

audio.play();

}
然后再自己需要提示音的时候调用这个方法即可

 

效果图

 

 

 

 

 

最后提示:

如果在服务器搭建的时候记得打开你程序设定的端口的防火墙
命令行窗口不能关闭
以上都是在windows系统搭建的 ,linux搭建这种websocket环境,网上也有很方法
Layim如何修改默认展示的聊天记录的条数
因为layim默认展示20条聊天记录,多的话,以前的记录会被折叠

可以修改lay\modules\mobile.js文件 查找“c=20”后面的条数修改为你需要展示的条数,然后清除浏览器缓存即可(此方法适用于引入moblie的手机版js,pc端可去试试其他文件)

 

 

如若有误或者有其他问题请与我交流:2359582968(微信qq同号)
————————————————
版权声明:本文为CSDN博主「一个菜鸡路上不肯回头的人」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38211838/article/details/82020708

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏