隨着技術的發展;現代的網站;愈來愈趨於應用形式了;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