使用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);
    }
});