随着技术的发展；现代的网站；越来越趋于应用形式了；
不再是像以前那样需要用户刷新页面；获取数据了；
服务器端可以主动向用户推送数据；更加及时性了；
比较突出的就是即时通讯在线聊天；
今个；我们要打造的就是类似于网页版微信的功能；

注册融云账号

如果我们不是以即时通讯为主营业务；那么建议使用第三方的服务；这里以融云为例；
官网：http://www.rongcloud.cn/
新手指南

1.注册融云；创建应用；获得App Key和App Secret

引入sdksdk下载

2.配置好配置项

1
2
3
4
5
6
7
8
9
<?php
return [
    //融云
    'RONG_IS_DEV'            => true,//是否是在开发中
    'RONG_DEV_APP_KEY'       => '', //融云开发环境下的key    仅供测试使用
    'RONG_DEV_APP_SECRET'    => '', //融云开发环境下的SECRET  仅供测试使用
    'RONG_PRO_APP_KEY'       => '', //融云生产环境下的key
    'RONG_PRO_APP_SECRET'    => '', //融云生产环境下的SECRET
];

3.先看看php部分需要做点什么吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
//先定义下这2个模块都是需要登录才能操作
public function behaviors()
{
    return [
        'access' => [
            'class' => AccessControl::className(),
            'only'  => ['user1', 'user2'],
            'rules' => [
                [
                    'actions' => ['user1', 'user2'],
                    'allow'   => true,
                    'roles'   => ['@'],
                ],
            ],
        ]
    ];
}

//第一个用户
public function actionUser1()
{
    $data = [];
    $user = Yii::$app->user->identity;
    $data = array(
        'uid'        => $user->getId(), // 用户id
        'avatar'     => 'http://www.missxiaolin.com/8ad4b31c8701a18bbef9f231982f07082838feba.jpg',// 头像
        'username'   => $user->username,// 用户名
        'rong_key'   => Yii::$app->params['RONG_DEV_APP_KEY'],// 融云key
        'rong_token' => $this->token()//获取融云token
    );
    return $this->renderPartial('user1', $data);
}

//第二个用户
public function actionUser2()
{
    $data = [];
    $user = Yii::$app->user->identity;
    $data = array(
        'uid'        => $user->getId(), // 用户id
        'avatar'     => 'http://www.missxiaolin.com/8ad4b31c8701a18bbef9f231982f07082838feba.jpg',// 头像
        'username'   => $user->username,// 用户名
        'rong_key'   => Yii::$app->params['RONG_DEV_APP_KEY'],// 融云key
        'rong_token' => $this->token()//获取融云token
    );
    return $this->renderPartial('user2', $data);
}

//获取token
public function token()
{
    //获取融云key
    $user = Yii::$app->user->identity;
    $token = $user->password_reset_token;
    // 如果有token就返回
    if ($token) {
        return $token;
    }
    $key = Yii::$app->params['RONG_DEV_APP_KEY'];
    $secret = Yii::$app->params['RONG_DEV_APP_SECRET'];
    $rong_cloud = new RongCloud($key, $secret);
    $token_json = $rong_cloud->getToken($user->getId(), $user->username, 'http://www.missxiaolin.com/8ad4b31c8701a18bbef9f231982f07082838feba.jpg');
    $token_array = json_decode($token_json, true);
    $token = $token_array['token'];
    $user_model = User::findOne($user->getId());
    $user_model->password_reset_token = $token;
    $user_model->save();
    return $token;
}

php部分其实就是这么简单，当然你还可以自己定义其他

4.html要引入融云js的sdk

1
2
<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>

下面就看看融云给我们的API吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
//发送消息传入这个方法就可以了
/**
 * 发送消息
 * @param  {integer} uid  用户id
 * @param  {string}  word 发送的消息
 */
function rongSendMessage(uid,word){
     // 定义消息类型,文字消息使用 RongIMLib.TextMessage
     var msg = RongIMLib.TextMessage.obtain(word);
     var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
     var targetId = uid; // 目标 Id
     RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
        // 发送消息成功
        onSuccess: function (message) {
            //message 为发送的消息对象并且包含服务器返回的消息唯一Id和发送消息时间戳
            console.log("Send successfully");
        },
        onError: function (errorCode,message) {
            var info = '';
            switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                    info = '超时';
                    break;
                case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                    info = '未知错误';
                    break;
                case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                    info = '在黑名单中，无法向对方发送消息';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                    info = '不在讨论组中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_GROUP:
                    info = '不在群组中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                    info = '不在聊天室中';
                    break;
                default :
                    info = x;
                    break;
            }
            console.log('发送失败:' + info);
        }
    });


}

//接受消息
 // 消息监听器
 RongIMClient.setOnReceiveMessageListener({
    // 接收到的消息
    onReceived: function (message) {
        // 判断消息类型
        switch(message.messageType){
            case RongIMClient.MessageType.TextMessage:
                // message.content.content => 消息内容
            	// message.senderUserId;   => 用户id
                break;
            case RongIMClient.MessageType.VoiceMessage:
                // 对声音进行预加载                
                // message.content.content 格式为 AMR 格式的 base64 码
                break;
            case RongIMClient.MessageType.ImageMessage:
               // message.content.content => 图片缩略图 base64。
               // message.content.imageUri => 原图 URL。
               break;
            case RongIMClient.MessageType.DiscussionNotificationMessage:
               // message.content.extension => 讨论组中的人员。
               break;
            case RongIMClient.MessageType.LocationMessage:
               // message.content.latiude => 纬度。
               // message.content.longitude => 经度。
               // message.content.content => 位置图片 base64。
               break;
            case RongIMClient.MessageType.RichContentMessage:
               // message.content.content => 文本消息内容。
               // message.content.imageUri => 图片 base64。
               // message.content.url => 原图 URL。
               break;
            case RongIMClient.MessageType.InformationNotificationMessage:
                // do something...
               break;
            case RongIMClient.MessageType.ContactNotificationMessage:
                // do something...
               break;
            case RongIMClient.MessageType.ProfileNotificationMessage:
                // do something...
               break;
            case RongIMClient.MessageType.CommandNotificationMessage:
                // do something...
               break;
            case RongIMClient.MessageType.CommandMessage:
                // do something...
               break;
            case RongIMClient.MessageType.UnknownMessage:
                // do something...
               break;
            default:
                // do something...
        }
    }
});

大功告成，来看看实际效果如何


融云还能实现推送消息、讨论组、群聊、聊天室、语音发送……大家自己研究把

总结一下：其实融云消息通道强制设置为长链接方式，默认为web socket->xhr-polling层层降级方式.设置方式为window.WEB_XHR_POLLING=true;等下次有时间自己写个websocket通信好了……