打造微信一样的聊天功能:tp5+workerman实现在线聊天客服功能(一)
国庆放假在家充充电哈,开始学习workerman,因为之前也一直想研究下socket通信,趁此机会把学到的分享给大家哈~~,话不多说直接上效果图:效果图是用户10与20间的聊天截图,因为界面是自己随便做的,比较丑请大神见谅哈。。。。。。。1,先到workerman官网下载GatewayWorker框架;2、将下载好的解压放在tp5的vendor里面,GatewayWo...
国庆放假在家充充电哈,
开始学习workerman,因为之前也一直想研究下socket通信,趁此机会把学到的分享给大家哈~~,话不多说直接上效果图:
效果图是用户10与20间的聊天截图,因为界面是自己随便做的,比较丑请大神见谅哈。。。。。。。
1,先到workerman官网下载GatewayWorker框架;
2、将下载好的解压放在tp5的vendor里面,GatewayWorker本身就是框架可与tp5独立运行,是互不干扰的。
3、Tp5框架新建控制器方法index和视图index.html;
如下:
index.html代码视图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Document</title>
<style>
#mbox{
width:50%;
margin: 0 auto;
border: 1px solid #ccc;
box-sizing: content-box;
padding: 10px;
max-height:500px;
overflow: scroll;
}
#xiaoxi{width:80%;}
@media screen and (max-width: 768px) {
#mbox{
width:98%;
margin: 0 auto;
border: 1px solid #ccc;
}
#xiaoxi{width:60%;}
}
#mbox h3{
color:red;
}
</style>
</head>
<body>
<div id="mbox">
<h3></h3>
<hr>
<div id="message">
</div>
</div>
<div id="mbox" style="overflow: hidden;">
<form enctype="multipart/form-data">
<input type="text" name="name" id="xiaoxi" style="height:30px;">
<input type="button" value="发送消息" id="send" >
</form>
</div>
<script src="http://192.168.1.103/tp/public/static/jquery.2.1.1.min.js"></script>
<script>
var ws =new WebSocket("ws:192.168.1.103:8282");
var fid={$fid};
var tid={$tid};
//接受服务器端消息
ws.onmessage=function(e){
console.log(e.data);
var mesage=JSON.parse(e.data);
switch(mesage.type)
{
case "init":
var bind='{"type":"bind","fid":"'+fid+'"}';
$("h3").text("与"+tid+"聊天……");
//发送消息给服务器
ws.send(bind);
break;
case "text":
if(tid==mesage.fid)//当前聊天对象
{
$("#message").append('<p style="float:right">'+mesage.data+':SAY'+tid+'<img src="http://192.168.1.103/tp/public/static/'+tid+'.png" style="border-radius:50%"></p><div style="clear: both;"></div>');
}
break;
default:
$("#message").append('<p>没有数据!</p>');
}
}
$("#send").click(function(){
var mes=$("#xiaoxi").val();
$("#message").append('<p style="float:left"><img src="http://192.168.1.103/tp/public/static/'+fid+'.png" style="border-radius:50%">'+fid+'SAY:'+mes+'</p><div style="clear: both;"></div>');
mes='{"type":"text","data":"'+mes+'","fid":"'+fid+'","tid":"'+tid+'"}';
ws.send(mes);
$("#xiaoxi").val('');
})
</script>
</body>
</html>
Index控制器index方法:
public function index()
{
$this->assign('fid',input('fid'));
$this->assign('tid',input('tid'));
return view();
}
4、找到gatewayWoker/Applications/YourApp的Events.php根据功能需求编写代码:
public static function onConnect($client_id)
{
// 向当前client_id发送数据
//Gateway::sendToClient($client_id, "Hello $client_id\r\n");
// 向所有人发送
//Gateway::sendToAll("$client_id login\r\n");
//
Gateway::sendToClient($client_id,
json_encode(
["type"=>"init",
"client_id"=>$client_id])
);
}
/**
* 当客户端发来消息时触发
* @param int $client_id 连接id
* @param mixed $message 具体消息
*/
public static function onMessage($client_id, $message)
{
$message=json_decode($message,true);
if(!$message)
{
return;
}
switch ($message['type']) {
case "bind":
Gateway::bindUid($client_id,$message['fid']);
break;
case "text":
$date=[
"type"=>"text",
"fid"=>$message['fid'],
"tid"=>$message['tid'],
"data"=>nl2br(htmlspecialchars($message['data'])),
"time"=>time()
];
Gateway::sendToUid($message['tid'],json_encode($date));
break;
default:
Gateway::sendToAll("21211");
break;
}
// 向所有人发送
//Gateway::sendToAll("$client_id say $message\r\n");
}
5、运行,如果你是win系统直接,运行GatewayWorker下的start_for_win.bat即可,如果是linux则运行:php start.php start -d
至此大功告成,一个简单的在线及时交流客服功能,就此实现!
如果您还期待后期功能完善的话,请您关注下一期的《打造微信一样的聊天功能:tp5+workerman实现在线聊天客服功能(二)》发布…………
更多推荐
所有评论(0)