干货！手把手教你如何使用第三方通讯服务实现LayIM Socket组件开发。

前言

　　之前写了一系列的文章,是关于使用ASP.NET SignalR技术实现LayIM的功能对接，有兴趣的同学移步：http://www.cnblogs.com/panzi/p/5767095.html。

　　此篇会从头到尾详细介绍开发流程，和对接方法。文章会比较长，准备点小零食，细细品读吧，如果只能够跟着实践最好。

　　本篇文章主要讲解内容如下：

• 融云服务WebSDK的对接
• LayIM接口的对接
• 如何将外网js模块化，使其符合layui标准
• 其他细节等

准备工作

　　首先，LayIM不多介绍了，想了解的同学移步：http://www.layui.com/doc/modules/layim.html 。已经了解过的同学可以忽略。因为这次用的是第三方融云服务实现，所以，我们先去官网注册一个账号吧。融云官网地址：http://rongcloud.cn.先注册一个账号，然后选择创建应用。创建应用之后，不用上线，我们选择测试环境即可。我们要的就是拿到appkey和appsecret 。

js模块化

　　为什么叫js模块化呢，一般正常情况下，我们直接按照融云所给的文档里面那么调用即可。文档地址，如果不想去看融云文档的话，可以直接看开发完成后的源代码即可。融云Web开发文档地址：http://www.rongcloud.cn/docs/web.html 。文档中的调用方式如下：

　　其实如上图调用也完全没问题，但是我们要开发layui组件的话，就必须要改一下了。因为我们最终想使用 layui.use的方式，而不是直接像上图那样引用js。看一下文档结构：

　　

　　首先，rmlib对应RongIMLib-2.2.4.min.js,protobuf对应protobuf.2.1.5.min.js,socket 就是业务封装层了。

　　rmlib的改造比较简单，直接将js内容粘贴下来，然后根据layui语法exports即可。

　　

　　为什么要加protobuf这个js呢，说一下原因，首先在原生的融云js调用的时候，会加载一个protobuf.min.js

　　

　　而由于公司网络不好的原因，经常会出现加载该js卡住的情况，而导致通讯失败，那么我们将他同样复制粘贴下来，改造一下。同样：

　　

　　当我们美滋滋的执行程序的时候，会发现，这玩意还是会被加载，就会导致出现加载两次的情况，当然这是由于rmlib.js中某段代码加载了该js，我们要做的就是找到那段代码，然后不让它加载就可以了。如下图：

　　

　　当我们取查代码的时候，哇，忘记了，是压缩过的代码。从何查起呢，查找protobuf，不起作用，后来我就查找了2.1.5，就找到如下这段代码

j=e.1o.iq(s,{a5:r+"5b.4e.2Z/a5-2.1.5.9n.js","ds":r+"5b.4e.2Z/sg.js"

　　可以分析一下，r应该是http或者https，而5b.4e.2z对应cdn.ronghub.com,a5应该就是protobuf了，刚开始我是直接把a5删掉，后来发现会出现请求undefined的情况，后来将代码中的，a5改成空值。即 a5:''.大功告成，终于不用再加载cdn的代码了。如下图，只会加载我们自己定义的protobuf.js

　　

　　最后一个js，socket.由于它是直接封装业务的，所以，我们将依赖加上，然后暴漏socket。到这里的我们的基本准备工作就算结束了，下面就是业务开发了。

　　

核心业务-连接服务器

　　由于这里呢，我不想把太多.NET的东西带进来，所以，LayIM的对接后台这次就不在阐述了，主要目的是让大家拿到这个东西直接运行通讯功能。主要是前端的开发工作。首先呢，我们知道，既然使用了融云，那就有必要了解一下它是怎么工作的。直接进入代码阶段。（里面内容不懂得可以看融云官方文档，下文中的lib即官网中的RongIMLib）

　　很简单，先来一段 init，初始化，很简单吧，这里用到了我们之前拿到的 appkey。

 lib.RongIMClient.init(conf.key);
 this.initListener();
 this.defineMessage();

　　下面呢，我们要监听融云的连接状况，就用到了initListener,详细代码如下，直接从官网文档copy即可。里面会监听到各种状态，包括监听消息接收。

 　　　　　　// 设置连接监听状态 （ status 标识当前连接状态 ）
            // 连接状态监听器
            log('注册服务连接监听事件');
            var code = im.code.errorUnKnown;
            RongIMClient.setConnectionStatusListener({
                onChanged: function (status) {
                    switch (status) {
                        case lib.ConnectionStatus.CONNECTED:
                            break;
                        case lib.ConnectionStatus.CONNECTING:
                            break;
                        case lib.ConnectionStatus.DISCONNECTED:
                            break;
                        case lib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                            break;
                        case lib.ConnectionStatus.DOMAIN_INCORRECT:
                            break;
                        case lib.ConnectionStatus.NETWORK_UNAVAILABLE:
                            break;
                    }
                    listener(code);
                }
            });

            // 消息监听器
            RongIMClient.setOnReceiveMessageListener({
                // 接收到的消息
                onReceived: function (message) {
                    log(message);
                    // 判断消息类型
                    switch (message.messageType) {

                    }
                }
            });

　　最后一个defineMessage，这个有点意思，就是说，融云给我们提供了多种数据类型，但是都不满足我们的需求，所以我们就要自己定义消息类型了。这里呢，我们需要的消息类型是什么呢？先不要看下文，想一下，这里接受消息要定义什么样的类型，根据什么来定义？

　　想到了没有？当然是layim想要的消息格式。根据文档可知，就是如下消息类型：

layim.getMessage({
  username: "纸飞机" //消息来源用户名
  ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息来源用户头像
  ,id: "100000" //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
  ,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
  ,content: "嗨，你好！本消息系离线消息。" //消息内容
  ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
  ,mine: false //是否我发送的消息，如果为true，则会显示在右方
  ,fromid: "100000" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
  ,timestamp: 1467475443306 //服务端动态时间戳
});

　　为了方便，我只加了其中几个必要的属性。注册自定义消息方法如下：

 　　　　　　var defineMsg = function (obj) {
                RongIMClient.registerMessageType(obj.msgName, obj.objName, obj.msgTag, obj.msgProperties);
            }
            //注册普通消息
            var textMsg = {
                msgName: 'LAYIM_TEXT_MESSAGE',//自己定义的名称
                objName: 'LAYIM:CHAT',
                msgTag: new lib.MessageTag(false, false),
                msgProperties: ["username", "avatar", "id", "type", "content"]
            };
            //注册
            defineMsg(textMsg);

　　init完了之后我们要做什么呢，就需要用户连接服务器了，那么融云连接服务器是需要根据用户id生成一个token的，涉及到服务端的东西。这里怎么避免先不用服务端的呢，我们可以在融云接口调试里面自己根据用户id生成token，因为token是永久性的（可以设置），所以，我们如果想做测试，可以直接生成两个token即可，不过，因为后台我已经完成了token的生成功能，所以，自己生成token需要大家自行去官网找一下。找到API调试，输入用户id得到token复制即可。

　　

　　当我们拿到token之后呢，我们连接一下服务器：

　　

 　　　　　　　　RongIMClient.connect(token, {
                    onSuccess: function (userId) {
                      　　//连接成功
                    },
                    onTokenIncorrect: function () {
　　　　　　　　　　　　　　//token错误，如果出现token错误，我们重新生成一个即可
                    },
                    onError: function (errorCode) {
                        var info = '';
                        var code = im.code.errorUnKnown;
                        switch (errorCode) {
                            case RongIMLib.ErrorCode.TIMEOUT:
                               //超时break;
                            case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                               //未知错误break;
                            case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                               //版本不正确break;
                            case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                                //被拒绝break;
                            case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                                //服务不可用break;
                        }
                    }
                });

　　我们连接之后呢，打开调试看一下network，可以看到，websocket连接，已经成功了。

　　

　　看一下日志打印：

　　

核心业务-发送消息

　　那么上一步已经连接成功了，下一步，我们就要发送消息了。之前已经定义好了消息类型，根据融云文档提供的方法，我们将消息组织好，发送即可。首先呢，这里要用到layim的 sendMessage监听方法了。

                layim.on('sendMessage', function (data) {
                    //调用socket方法，发送消息
                    im.sendMsg(data);
                });

　　是不是很简单，先看一下 layim提供的data是神马东东：

　　

　　里面的内容不用我多解释了吧，我们只要将mine和to解析一下，然后转换成我们想要的格式即可，这里要注意，group 和 friend 有些区别。请看代码：

sendMsg: function (data) {
            //根据layim提供的data数据，进行解析
            var mine = data.mine;
            var to = data.to;
            var id = conf.uid || mine.id;//当前用户id
            var group = to.type == 'group';
            if (group) {
                id = to.id;//如果是group类型，id就是当前groupid，切记不可写成 mine.id否则会出现一些问题。
            }
            //构造消息
            var msg = {
                username: mine.username
                      , avatar: mine.avatar
                      , id: id
                      , type: to.type
                      , content: mine.content
            }
            //这里要判断消息类型
            var conversationType = group ? lib.ConversationType.GROUP : lib.ConversationType.PRIVATE; //私聊,其他会话选择相应的消息类型即可。
            var targetId = to.id;
            //构造消息体，这里就是我们刚才已经注册过的自定义消息
            var detail = new RongIMClient.RegisterMessage.LAYIM_TEXT_MESSAGE(msg);
            //发送消息
            RongIMClient.getInstance().sendMessage(conversationType, targetId, detail, {
                onSuccess: function (message) {
                    log('发送消息成功');
                },
                onError: function (errorCode) {
                }
            });
        },

　　当我们发送消息之后，对方肯定会收到。（除了初始化有问题之外可能收不到，第三方还是比较稳定的，消息都能送达）我们看一下接收到的消息格式，一大堆，其实对我们有用的有timestamp和content里面的内容。

　　

　　因为之前我们已经初始化了消息接收监听事件。所以，后边我们简单的一句调用就可以了。

　　 layim.getMessage(message.content);

效果预览

　　

　　效果虽然有了，但是和真正的应用还有很大的差距，不过，那些都可以在修改socket.js来满足需求，同样，新手可以引用此组件轻松实现聊天功能对接，而且不用写很多代码。下面看一下最终的代码编写方式：

　　

　　现在你无需关心layim是怎么接收消息的，以及他的消息格式类型是什么，你只要引入相应的组件，然后做一下简单的配置，即可完成通讯功能，对于想快速开发并且，不需要保存消息历史记录的需求，这个东西就很方便了。对接起来也容易，因为并不是他简单，而是核心内容已经给封装好了，做一个简单的配置即可使用。

细节补充

　　日志打印是否开放：

  //记录日志
    var log = function (msg) {
        conf.log && console.log(msg);
    }

　　监听方法的实现，抄袭layim 嘿嘿。

 //事件监听
    var listener = function (code) {
        code && (call['status'] ? call['status'](code) : log(code));

    }

　　如果初始化比较慢，为了不影响消息发送，采用临时数组保存。

  sendMsgWithQueue: function (data) {
            if (!im.connected) {
                log('当前服务器未连接，将消息加入到未发送队列');
                msgQueue.push(data);
            } else {
                this.sendMsg(data);
            }
        },

　　连接成功之后，消息发送

 connectSuccess: function (uid) {
            im.code.usuccess.uid = uid;
            im.connected = true;//连接成功

            listener(im.code.usuccess);
            if (msgQueue.length) {
                //队列中有消息，发送出去
                for (var i = 0; i < msgQueue.length; i++) {
                    im.sendMsg(msgQueue[i]);
                }
                msgQueue = [];
            }
        },

　　其他细节有兴趣的同学可以看看代码，并给出修改意见，谢谢大家。请注意，本文依赖于Layim3.0+版本。

总结

　　写一篇文章比我开发时间都多了，不过总结一下也是好的，希望能帮到一些需要的同学。同时，完整开发版我会继续开发下去，由于使用了第三方，所以通讯逻辑我就不会在去关心，重点放在项目的架构上，以及其他东西的研究。如果你读到了这里，非常感谢。

　　github地址：https://github.com/fanpan26/LayIM_NetClient/blob/master/LayIM_RongCloud_Chat/Scripts/im/rc/socket.js