隨着技術的發展;現代的網站;愈來愈趨於應用形式了;php
再也不是像之前那樣須要用戶刷新頁面;獲取數據了;html
服務器端能夠主動向用戶推送數據;更加及時性了;前端
比較突出的就是即時通信在線聊天;git
今個;咱們要打造的就是相似於網頁版微信的功能;ajax
示例項目:http://git.oschina.net/shuaibai123/thinkphp-bjyadminthinkphp
一:註冊融雲帳號數據庫
若是咱們不是以即時通信爲主營業務;那麼建議使用第三方的服務;這裏以融云爲例;json
註冊融雲;建立應用;得到App Key和App Secret;瀏覽器
二:設置配置項
/Application/Common/Conf/config.php
'RONG_IS_DEV' => true,//是不是在開發中 'RONG_DEV_APP_KEY' => '8luwapkvu3xwl', //融雲開發環境下的key 僅供測試使用 'RONG_DEV_APP_SECRET' => '1Aw1D7F6Td25', //融雲開發環境下的SECRET 僅供測試使用 'RONG_PRO_APP_KEY' => '', //融雲生產環境下的key 'RONG_PRO_APP_SECRET' => '', //融雲生產環境下的SECRET
將key和sercet替換爲本身應用;
三:集成php部分sdk
引入融雲sdk:/ThinkPHP/Library/Org/Xb/RongCloud.class.php
公共函數:/Application/Common/Common/function.php
/** * 根據配置項獲取對應的key和secret * @return array key和secret */ function get_rong_key_secret(){ // 判斷是須要開發環境仍是生產環境的key if (C('RONG_IS_DEV')) { $key=C('RONG_DEV_APP_KEY'); $secret=C('RONG_DEV_APP_SECRET'); }else{ $key=C('RONG_PRO_APP_KEY'); $secret=C('RONG_PRO_APP_SECRET'); } $data=array( 'key'=>$key, 'secret'=>$secret ); return $data; } /** * 獲取融雲token * @param integer $uid 用戶id * @return integer token */ function get_rongcloud_token($uid){ // 從數據庫中獲取token $token=D('OauthUser')->getToken($uid,1); // 若是有token就返回 if ($token) { return $token; } // 獲取用戶暱稱和頭像 $user_data=M('Users')->field('username,avatar')->getById($uid); // 用戶不存在 if (empty($user_data)) { return false; } // 獲取頭像url格式 $avatar=get_url($user_data['avatar']); // 獲取key和secret $key_secret=get_rong_key_secret(); // 實例化融雲 $rong_cloud=new \Org\Xb\RongCloud($key_secret['key'],$key_secret['secret']); // 獲取token $token_json=$rong_cloud->getToken($uid,$user_data['username'],$avatar); $token_array=json_decode($token_json,true); // 獲取token失敗 if ($token_array['code']!=200) { return false; } $token=$token_array['token']; $data=array( 'uid'=>$uid, 'type'=>1, 'nickname'=>$user_data['username'], 'head_img'=>$avatar, 'access_token'=>$token ); // 插入數據庫 $result=D('OauthUser')->addData($data); if ($result) { return $token; }else{ return false; } } /** * 更新融雲頭像 * @param integer $uid 用戶id * @return boolear 操做是否成功 */ function refresh_rongcloud_token($uid){ // 獲取用戶暱稱和頭像 $user_data=M('Users')->field('username,avatar')->getById($uid); // 用戶不存在 if (empty($user_data)) { return false; } $avatar=get_url($user_data['avatar']); // 獲取key和secret $key_secret=get_rong_key_secret(); // 實例化融雲 $rong_cloud=new \Org\Xb\RongCloud($key_secret['key'],$key_secret['secret']); // 更新融雲用戶頭像 $result_json=$rong_cloud->userRefresh($uid,$user_data['username'],$avatar); $result_array=json_decode($result_json,true); if ($result_array['code']==200) { return true; }else{ return false; } }
寫一個控制器用來獲取token、好友列表的頭像和用戶名:/Application/Api/Controller/RongController.class.php
/** * 獲取token */ public function get_token(){ // 獲取用戶id $uid=get_uid(); // 獲取token $token=get_rongcloud_token($uid); $data=array( 'token'=>$token ); ajax_return($data,'獲取成功',0); } /** * 傳遞一個、或者多個用戶id * 獲取用戶頭像用戶名;用來組合成好友列表 */ public function get_user_info(){ $uids=I('post.uids'); // 組合where數組條件 $map=array( 'id'=>array('in',$uids) ); $data=M('Users') ->field('id,username,avatar') ->where($map) ->select(); ajax_return($data,'獲取用戶數據成功',0); }
四:集成前端部分
html要引入融雲js的sdk;
<script src="http://cdn.ronghub.com/RongIMLib-2.0.6.beta.min.js"></script> <script src="http://cdn.ronghub.com/RongEmoji-2.0.2.beta.min.js"></script>
而後下面是我痛苦的研究了融雲的sdk後簡化了的使用方法;
/Public/statics/rongcloud/js/main.js
而後配置html便可;
/tpl/Home/Index/user1.html
/tpl/Home/Index/user2.html
最終的效果是這樣的:
固然;樣式能夠本身改;
測試項目示例的時候;切記使用兩個不一樣的瀏覽器分別打開表明兩個用戶的連接;
用來模擬是兩個用戶在聊天;
本文爲白俊遙原創文章,轉載無需和我聯繫,但請註明來自白俊遙博客http://baijunyao.com