Workerman之GatewayWorker框架 - 在線客服,實時通訊

1、綁定用戶id實現一對一客服聊天

相關文檔:LibGateway類提供的接口html

JS:git

<script>

    var fromid = {$fromid};

    var toid = {$toid};

     var ws =  new WebSocket("ws://127.0.0.1:8282");

      ws.onmessage = function(e){

       var message =  eval("("+e.data+")");
          switch (message.type){
              case "init":
                  var bild = '{"type":"bind","fromid":"'+fromid+'"}';
                   ws.send(bild);
                  return;
              case "text":
                  $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url(http://chat.com/static/newcj/img/123.jpg)"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+message.data+'</span> </div>');
                  return;
          }
    }

     $(".send-btn").click(function(){

         var text = $(".send-input").val();

         var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';

         $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span> <span class="char-img" style="background-image: url(http://chat.com/static/newcj/img/132.jpg)"></span> </div>');

         ws.send(message);

         $(".send-input").val("");
     })

</script>

clipboard.png

/**
     * 當客戶端鏈接時觸發
     * 若是業務不需此回調能夠刪除onConnect
     * 
     * @param int $client_id 鏈接id
     */
    public static function onConnect($client_id)
    {
        global $num;
        // 向當前client_id發送數據
        //Gateway::sendToClient($client_id, "Hello $client_id\r\n");
        // 向全部人發送
       // Gateway::sendToAll("$client_id login\r\n");

        echo "connect".++$num.":".$client_id."\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_data = json_decode($message,true);
       if(!$message_data){
           return;
       }
       switch($message_data['type']){
           case "bind":
               $fromid = $message_data['fromid'];
               Gateway::bindUid($client_id, $fromid);
               return;
           case "say":

               $text = nl2br(htmlspecialchars($message_data['data']));
               $fromid = $message_data['fromid'];
               $toid = $message_data['toid'];

               $date=[
                   'type'=>'text',
                   'data'=>$text,
                   'fromid'=>$fromid,
                   'toid'=>$toid,
                   'time'=>time()
               ];
                Gateway::sendToUid($toid, json_encode($date));
//               Gateway::sendToAll(json_encode($date));
               return;
       }
   }

Test:github

clipboard.png

clipboard.png

2、數據持久化與優化兩個聊天對象的惟一性

public static function onMessage($client_id, $message)
   {
       $message_data = json_decode($message,true);
       if(!$message_data){
           return;
       }
       switch($message_data['type']){
           case "bind":
               $fromid = $message_data['fromid'];
               Gateway::bindUid($client_id, $fromid);
               return;
           case "say":
               $text = nl2br(htmlspecialchars($message_data['data']));
               $fromid = $message_data['fromid'];
               $toid = $message_data['toid'];

               $date=[
                   'type'=>'text',
                   'data'=>$text,
                   'fromid'=>$fromid,
                   'toid'=>$toid,
                   'time'=>time()
               ];

               if(Gateway::isUidOnline($toid)){
                   Gateway::sendToUid($toid, json_encode($date));
                   $date['isread']= 1;
               }else{
                   $date['isread']=0;
               }

               $date['type']="save";
               Gateway::sendToUid($fromid,json_encode($date));

               return;
       }
   }
ws.onmessage = function(e){

       var message =  eval("("+e.data+")");
          switch (message.type){
              case "init":
                   var bild = '{"type":"bind","fromid":"'+fromid+'"}';
                   ws.send(bild);

                  return;
              case "text":
                  //指定兩個聊天對象聊天
                      if(toid==message.fromid) {

                          $(".chat-content").append(' <div class="chat-text section-left flex"> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>' + message.data + '</span> </div>');
                      }
                  return;
              case "save":
                  //數據持久化
                  save_message(message);
                  return;
          }
    }

3、發圖片、QQ表情、聊天列表、全部頁面websocket,消息推送、實時更新

clipboard.png

clipboard.png

clipboard.png

相關代碼:https://github.com/tcyfree/ch...web

參考教程:workerman實戰之PHP在線客服json

相關文章
相關標籤/搜索