對接已有網站 · webim-plugin

本系統是依附于已有網站而存在的即時通訊插件，其目的為讓已有網站只需幾部操作就可以擴展webim組件 ### 1、已有網站自定義token獲取接口本系統不做額外的登陸退出操作，用戶身份識別及登陸狀態都是通過已有網站的token接口獲取的token做的標識已有網站需要自定義一個token接口，此接口所做操作為將token和用戶id對應關系寫到redis中，類型為string(可以設置過期時間)鍵名為 im_token:用戶自定義token，值為用戶id。返回格式為json格式： ``` { "code": 0, "message": "獲取成功", "data": { "token": "2d64b4a34b5c815d09eff3a0ecb7b0eb" } } ``` 返回值說明： | 字段 | 說明 | |---|---| | code | 返回狀態碼。0代表成功 1代表出錯 | |message | 錯誤提示信息 | | data.token | 聊天憑證token | token接口代碼示例： ``` //$_SESSION['user_id']要替換成自己的用戶表主鍵 $config為對應redis配置 //驗證用戶登陸狀態 if(empty($_SESSION['user_id'])){ echo json_encode(['code'=>1,'messgae'=>'登陸后才可開啟聊天組件','data'=>(object)[]]); exit(); } //獲取redis鏈接需要將host、port、password換成自己的redis配置信息 $redis = new \Redis(); $redis->connect($config['host'], $config['port']); //連接Redis $redis->auth($config['password']); //密碼驗證 $token = $redis->get('im_uid:' . $_SESSION['user_id']); if (!$token) { //不存在token則重新生成 $user_id = $redis->get('im_token:' . $token); if (!$user_id) { $token = md5($_SESSION['user_id'] . time().rand(0,999));//生成token } } //不存在token存入redis或存在重置有效期 $redis->setex('im_token:' . $token, 3600 * 6, $_SESSION['user_id']); $redis->setex('im_uid:' . $_SESSION['user_id'], 3600 * 6, $token); echo json_encode(['code'=>0,'messgae'=>'獲取成功','data'=>['token'=>$token]]); exit(); ``` ### 2、已有網站PC端引入注意：PC端和手機端引入方式不同，用戶要嚴格區分。 PC端html頁面加入以下代碼在對應網頁的右下角就會彈出聊天組件注意：如果未登錄就引入的話會提示登錄后才可使用聊天系統，筆者建議用php判斷下登錄后才引入下面js模塊 ``` <?php if(!empty($_SESSION['user_id'])){ //$_SESSION['user_id']需要換成自己的用戶id，判斷登錄狀態登錄后才引入?> <script> var im_config= { token: { url:''//第一步的token請求接口地址 ,type:'post'//請求方式 ,dataType:'json' //請求格式類型，一般為json } ,url_domain : ' ' //webserver地址（非80/443端口需要帶著端口號） http://或https://開頭 ,dataType:"jsonp" //ajax請求接口(不包括上傳文件和圖片data獲取接口及token接口)返回格式默認json 不跨域可不填這里一般會跨域無需改動 ,socketHost:'', //webSocket連接地址即gateway地址（需要帶著端口號），gateway服務器開啟ssl以wss://開頭,未開啟以ws://開頭 } function myDefined(Layui,layer,layim,$,socket){ //自定義js處理請寫在這里可直接使用Layui;lay;socket和$ 注:jQuery版本為jQuery1.11最穩定的一個版本 } </script> <script src="webserver地址域名(非80/443端口需要帶著端口號)/public/dist/js/common.js" charset="utf-8"></script> <?php } ?> ``` ### 3、已有網站手機端引入注意：PC端和手機端引入方式不同，用戶要嚴格區分。手機端只要引入一段代碼然后在特定的html元素上加上im_mobile的class,點擊對應元素就會跳轉到對應的手機聊天主頁面。注意：如果未登錄就引入的話會提示登錄后才可使用聊天系統，筆者建議用php判斷下登錄后才引入下面js模塊手機端html頁面加入以下代碼 ``` <?php if(!empty($_SESSION['user_id'])){ //$_SESSION['user_id']需要換成自己的用戶id ,判斷登錄狀態登錄后才引入?> <script> var im_config = { mobile_define :true ,token: { url:''//第一步的token請求接口地址 ,type:'post'//請求方式 ,dataType:'json' //請求格式類型，一般為json } ,referer_url:location.href//即時通訊出錯的回跳地址 ,url_domain : '' //webserver地址（非80/443端口需要帶著端口號） http://或https://開頭 ,socketHost:'' //webSocket連接地址即gateway地址（需要帶著端口號），gateway服務器開啟ssl以wss://開頭,未開啟以ws://開頭 //接收消息的回調函數用戶可以在收到消息后根據消息類型自定義處理,這里做的處理是有聊天消息更新消息數量 ,messageCallBack:function(type,data) { //這里需要自定義 // if(type == 'message'){//代表收到一條聊天消息 // if (data.type == 'friend' && data.remove_cid) {//代表是自己發送的好友消息 // return ; // } // $('.msg-num').html(parseInt($('.msg-num').html())+1); // $('.msg-num').show(); //} //if(type == 'messageList'){//代表收到若干離線消息 // $('.msg-num').html(data.length); // $('.msg-num').show(); //} } } function myDefined(Layui,layer,layim,$,socket){ //自定義js處理請寫在這里可直接使用layui;lay;socket和$ 注:jQuery版本為jQuery1.11最穩定的一個版本 //將參數暴露到全局 window.$=$; } </script> <script src="webserver地址域名(非80/443端口需要帶著端口號)/public/dist/js/common.js" charset="utf-8"></script> <?php } ?> ``` 這里提供一個php判斷是否是手機端打開頁面的函數，用戶自由選擇使用。 ``` //判斷是否是手機端還是電腦端 function is_mobile(){ // 如果有Http_X_WAP_PROFILE則一定是移動設備 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])){ return true; } // 如果via信息含有wap則一定是移動設備,部分服務商會屏蔽該信息 if (isset ($_SERVER['HTTP_VIA'])){ // 找不到為flase,否則為true return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false; } // 腦殘法，判斷手機發送的客戶端標志,兼容性有待提高 if (isset ($_SERVER['HTTP_USER_AGENT'])){ $clientkeywords = array ('nokia', 'sony', 'eriCSSon', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile' ); // 從HTTP_USER_AGENT中查找手機瀏覽器的關鍵字 if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))){ return true; } } // 協議法，因為有可能不準確，放到最后判斷 if (isset ($_SERVER['HTTP_ACCEPT'])){ // 如果只支持wml并且不支持HTML那一定是移動設備 // 如果支持wml和html但是wml在html之前則是移動設備 if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))){ return true; } } return false; } ```