使用web方式开发cordova(ionic)应用即时聊天(im)功能(2)

把前置工做作完以后就能够正式进入开发环节了

界面编写

界面你们就自由发挥了，各有各的风格你们自由发挥呗，因为本人ui水平大概初中生的水平，因此是在网络上找ui资源，而后切出来的，感受也还能够。若是你们也是用ionic开发，也不想麻烦的话，能够用下这个资源，是ionic出的几个模版，代码也有了，能够拿来直接使用。

保存历史记录

融云 Web SDK 最新提供 getHistoryMessages，来帮助开发者获取历史消息纪录。 使用此方法前提是 APP 必须开启历史消息云存储，如 APP 没有开启消息漫游则执行 onError 方法。

能够看到，若是不开通历史消息云存储的话，是须要收费的。不过这里若是不须要在不一样的设备上也要浏览历史记录的话是能够用h5的本地存储作到的，很幸运的是，我这个项目就不须要，若是须要的话，就须要服务端配合了，由于融云有提供服务端获取历史消息的接口，不过融云那边一小时同步一次。这里我用的是angular-local-storage，他有个挺不错的功能就是能够把对象和localStorage里的项绑定起来，这个在咱们的项目里十分方便。

设置消息监听

根据这个文档来设置消息监听，而后根据message.messageType，来判断不一样的消息类型来进行不一样的操做。这里分为两步

1. 将接收到的消息保存起来

2. 通知相应的页面接受到消息，用向下广播($rootScope.$broadcast)的方式

例如:

// 检查发送该消息的讨论组是否已经在会话列表中
angular.forEach(recentContact, function (val, key) {

    if (val.id === message.targetId) {

        // 标记为从对方接受
        message.from = 'friend';

        isInlist = true;

        // 是否在当前打开的讨论组中
        if (selectedContactor && message.targetId === selectedContactor.id && $state.current.name === 'im') {

            // 广播接受到当前讨论组的消息
            $rootScope.$broadcast('currentContactGetTheMessage', message);

        // 不是的话未读数量+1
        } else {

            val.unreadMessageCount = val.unreadMessageCount ? val.unreadMessageCount + 1 : 1;
        }

        val.recentMessage.push(message);

        recentContact.splice(key, 1);

        recentContact.unshift(val);

        saveToStore(recentContact);
    }
});