本系统是依附于已有网站而存在的即时通讯插件，其目的为让已有网站只需几部操作就可以扩展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;
}
```
