打造微信一样的聊天功能：tp5+workerman实现在线聊天客服功能（一）

国庆放假在家充充电哈，

开始学习workerman，因为之前也一直想研究下socket通信，趁此机会把学到的分享给大家哈~~，话不多说直接上效果图：

效果图是用户10与20间的聊天截图，因为界面是自己随便做的，比较丑请大神见谅哈。。。。。。。

1，先到workerman官网下载GatewayWorker框架；

2、将下载好的解压放在tp5的vendor里面，GatewayWorker本身就是框架可与tp5独立运行，是互不干扰的。

3、Tp5框架新建控制器方法index和视图index.html；

如下：

index.html代码视图：

扫描二维码关注公众号，回复： 12339628 查看本文章

<!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实现在线聊天客服功能（二）》发布…………

打造微信一样的聊天功能：tp5+workerman实现在线聊天客服功能（一）

猜你喜欢