UniChat 社交IM 集成环信

1.消息页

//读取会话消息Vue代码
function fnInitData(){
        vue = new Vue({
            el: '#vue',
            data: {
                messages: [],
                currentLocalConversationId: '',
                loop: ''
            },
            beforeCreate: function() {
                let that = this;
                let userInfo = api.getPrefs({
                    key: 'userInfo',
                    sync: true
                });

                userInfo = JSON.parse(userInfo);
                UIEaseChat = api.require('easeChat');
                UIEaseChat.login({
                   username: userInfo.username,
                   password: window.cfg.easePassword,
                   autoLogin: false
                },function(ret, err) {
                    if (ret.status || err.code == 200) {
                        //从本地缓存加载
                        fnInitDB();
                        fnGetConversation(userInfo.id, 0, 50, function(ret, err){
                          if (ret.status) {
                              let data = ret.data;

                              for(let index in data){
                                  if(index == 0){
                                      //设置当前本地缓存的最大朋友圈消息Id
                                      that.currentLocalConversationId = data[index].uid;
                                  }
                                  that.messages.push(JSON.parse(data[index].content));
                              }
                          }else{
                              console.log(JSON.stringify(err));
                          }
                        });

                        // 添加消息监听
                        UIEaseChat.addMessageListener({
                            name: 'receive'
                        }, function(ret) {
                            updateConversationList(ret['messages']);
                            //广播出去,聊天页面做数据更新
                            api.sendEvent({
                                name: 'messageReceived',
                                extra: {
                                    messages: ret['messages']
                                }
                            });
                        });

                        that.syncConversation();
                    } else {
                        console.log(JSON.stringify(err));
                        api.alert({
                            msg: '网络不好,退出重试'
                        });
                    }
                });
            },
            methods: {
                syncConversation: function(){
                    let that = this;
                    let userInfo = api.getPrefs({
                        key: 'userInfo',
                        sync: true
                    });

                    userInfo = JSON.parse(userInfo);
                    UIEaseChat = api.require('easeChat');

                    UIEaseChat.getAllConversations(function(ret) {
                        let conversations = ret.conversations;
                        let length = conversations.length;

                        // 按照最新一条消息接收时间排序
                        for (let i = 0; i < length; i++) {
                            for (j = i + 1; j < length; j++) {
                                if (parseInt(conversations[i]['latestMessage']['timestamp'], 10) < parseInt(conversations[j]['latestMessage']['timestamp'], 10)) {
                                    tmp = conversations[i];
                                    conversations[i] = conversations[j];
                                    conversations[j] = tmp;
                                }
                            }
                        }

                        // 加载会话的头像、昵称、汇总总未读消息数量
                        showList(conversations);
                        that.messages = listData;

                        //保存到本地缓存
                        if(listData.length > 0){
                            fnInitDB();
                            fnAddConversation(userInfo.id, listData, function(ret, err){
                              if (ret.status) {
                                  //console.log('add Conversation success');
                                  let latestMessageConversation = conversations[0];
                                  that.currentLocalConversationId = latestMessageConversation.conversationId;
                                  //console.log(that.currentLocalConversationId);
                              }else{
                                  console.log(JSON.stringify(err));
                              }
                            });
                        }

                        // 缓存所有的聊天对象的头像
                        window.cacheConversationsAvatar(function () {
                            refreshAvartars();
                        });
                    });
                }
            }
        });
    }

2.通讯录

function fnInitListData(callback) {
            let data = api.getPrefs({
                key: 'friends',
                sync: true
            });
            window.cacheConversationsAvatar(function(){});
            if (data == "") {
                setTimeout(function () {
                    api.sendEvent({
                        name: 'tabviewappear1'
                    });
                }, 400);
                return;
            }
            data = JSON.parse(data);
            let chat = data['chat']; // 好友
            let groups = data['groupChat']; // 群组
            let rooms = data['chatRoom']; // 聊天室
            let ret = {};
            for (let i=0; i<chat.length; i++) {
                let key = window.getPy(chat[i]['nickname']);
                if (ret.hasOwnProperty(key)) {
                    ret[key].push({
                        placeholderImg: 'widget://image/error-img.png',
                        img: chat[i]['avatar'],
                        title: chat[i]['nickname'],
                        titleSize: 16,
                        username: chat[i]['username'],
                        id: chat[i]['id']
                    });
                } else {
                    ret[key] = [
                        {
                            placeholderImg: 'widget://image/error-img.png',
                            img: chat[i]['avatar'],
                            title: chat[i]['nickname'],
                            titleSize: 16,
                            username: chat[i]['username'],
                            id: chat[i]['id']
                        }
                    ];
                }
            }
            // 排序
            let newKey = Object.keys(ret).sort();
            let newObj = {
                 common: [
                     {
                         img: 'widget://image/icons/new-friends.png',
                         title: '新的朋友',
                         titleSize: 16
                     }, {
                         img: 'widget://image/icons/group.png',
                         title: '群聊',
                         titleSize: 16
                     }
                 ]
            };
            //为了把公共选项放在前面，不用重新复制数据吧
            for (let i=0; i<newKey.length; i++) {
                newObj[newKey[i]] = ret[newKey[i]];
            }

            callback(newObj);
        }

3.发现页

function fnInitData(){
          let userInfo = window.getUserInfo();

          //从本地加载缓存
          fnInitDB();
          fnGetFriendsCircle(userInfo.id, 0, 1, function(ret, err) {
              if (ret.status) {
                  currentLocalMaxMessageId = ret.data[0].messageId;

                  //此处用同步接口，加载本地未缓存的朋友圈数据
                  window.Ajax({
                      url: 'moments/sync',
                      params: {
                          currentLocalMaxMessageId: currentLocalMaxMessageId
                      }
                  }, function(data) {
                      if (data.length > 0) {
                          //反向读取朋友圈数据，插入已存在的数组
                          let currentServerMaxMessageId = data[data.length-1].id;

                          //同步朋友圈时，新消息存入本地缓存
                          fnAddFriendsCircles(userInfo.id, data, function(ret, err) {
                              if (ret.status) {
                                  currentLocalMaxMessageId = currentServerMaxMessageId;

                                  api.sendEvent({
                                      name: 'syncFirendsCircle',
                                      extra: {
                                          datas: data
                                      }
                                  });
                              }else{
                                  console.log(JSON.stringify(err));
                              }
                          });
                      }
                  });
              }else{
                  console.log(JSON.stringify(err));
              }
          });
        }

4.我的页

function fnInitData(){
            vue = new Vue({
                el: '#vue',
                data: {
                    nickname: '',
                    username: ''
                },
                beforeCreate: function() {},
                updated: function() {},
                mounted: function() {
                    let userInfo = window.getUserInfo();
                    let nickname = userInfo.nickname;
                    let username = userInfo.username;
                    this.username = username;
                    this.nickname = nickname;
                    let avatar = userInfo.avatar;
                    this.localPic(avatar, 'pictor');
                },
                methods: {
                    localPic: function(url, dom) {
                        api.imageCache({
                            url: url,
                            policy: 'cache_only',
                            thumbnail: false
                        }, function(ret, err) {
                            let localPath = ret.url;
                            $api.attr($api.byId(dom), 'src', localPath);
                        });
                    },
                    changeAvatar: function (type, dom) {
                        window.getPicture(function(url) {
                            window.Ajax({
                                url: 'user/changeAvatar',
                                method: 'post',
                                params: {
                                    path: url,
                                    type: type
                                }
                            }, function(res) {
                                vue.localPic(url, dom);
                                window.refreshLogin();
                            });
                        });
                    },
                    toQrcode: function (type) {
                        api.openWin({
                            name: 'qrcode-' + type,
                            url: '../win.html',
                            pageParam: {
                                title: '个人二维码',
                                url: './set/qrcode.html',
                                params: {
                                    value: type,
                                    text: '扫一扫加好友'
                                }
                            }
                        });
                    },
                    changeName: function () {
                        let that = this;
                        api.prompt({
                            title: '修改昵称',
                            type: 'text',
                            buttons: ['确定', '取消']
                        }, function(ret, err) {
                            var index = ret.buttonIndex;
                            var text = ret.text;

                            if (index == 1){
                                if (!text) {
                                    api.alert({
                                        title: '提示',
                                        msg: '不能为空',
                                    }, function(ret, err){});
                                    return;
                                };
                                if (text.length > 20) {
                                    api.alert({
                                        title: '提示',
                                        msg: '最多20个字哟',
                                    }, function(ret, err){});
                                    return;
                                }
                                api.showProgress({
                                    style: 'default',
                                    animationType: 'fade',
                                    title: '修改中...',
                                    text: '请稍候...',
                                    modal: false
                                });

                                // 修改昵称
                                window.Ajax({
                                    url: 'user/changeUserInfo',
                                    params: {
                                        key: 'nickname',
                                        value: text
                                    }
                                }, function (data) {
                                    api.hideProgress();
                                    api.toast({
                                        msg: '修改成功',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                    that.nickname = text;
                                    window.refreshLogin();
                                });
                            }
                        });
                    }
                }
            });
        }

5.聊天页

function fnInitData(){
            vue = new Vue({
                el: '#vue',
                data: {
                    messages: [],
                    isOwner: false,
                    owner: '',
                    firstLoad: true,
                    emotionData: [],
                    conversationId: api.pageParam.params.conversationId,
                    chatType: api.pageParam.params.chatType,
                    userInfo: window.getUserInfo(),
                    bonus: {
                        show: false,
                        name: '',
                        avatar: '',
                        msg: '',
                        message: '',  // 消息原始数据
                    },
                    currentLocalMaxMessageId: '',
                    page: 0,
                    pageSize: 10
                },
                beforeCreate: function() {
                    UIPhotoViewer = api.require('UIPhotoViewer');
                },
                updated: function() {
                    if (this.firstLoad) {
                        let that = this;
                        this.firstLoad = false;
                        setTimeout(function() {
                            that.scrollToBottom();
                        }, 100);
                    }
                },
                beforeDestroy: function () {
                    api.removeEventListener({
                        name: 'messageReceived'
                    });
                },
                mounted: function() {
                    //监听新消息事件
                    let that = this;

                    //获取最近的聊天记录
                    that.syncServiceMessageToLocal();

                    //收到消息后响应方法
                    api.addEventListener({
                        name: 'messageReceived'
                    }, function(ret, err) {
                        let msgs = ret.value.messages;
                        let flag = false;
                        for (let i = 0; i < msgs.length; i++) {
                            if (msgs[i].conversationId == api.pageParam.params.conversationId) {
                                flag = true;
                                msgs[i]['showHeader'] = true;
                                if (that.messages.length &&
                                    msgs[i].timestamp - that.messages[that.messages.length - 1]. timestamp < 5 * 60 * 1000) {
                                        msgs[i]['showHeader'] = false;
                                    }
                                that.messages.push(msgs[i]);
                                setTimeout(function() {
                                    //滚动聊天区域到底部
                                    that.scrollToBottom();
                                }, 100);

                                // 如果不是语音且不是红包,则标记已读
                                if (msgs[i].body.type != 'voice' && !that.isBonus(msgs[i])) {
                                    // 标记已读
                                    UIEaseChat.markMessageAsRead({
                                        conversationId: api.pageParam.params.conversationId,
                                        type: api.pageParam.params.chatType,
                                        messageId: msgs[i]['messageId']
                                    },function(ret,err) {});
                                }

                            }
                        }
                        // 更新主页的数据
                        if (flag) {
                            api.sendEvent({
                                name: 'messageReaded',
                                extra: {
                                    conversationId: api.pageParam.params.conversationId
                                }
                            });
                        }
                    });

                    //注释原因：不使用UIeaseChat输入框，不需要初始化底部的输入框
                    //that.initChatBox();

                    //注释原因：不使用UIeaseChat输入框，获取emotion的所有路径
                    //that.initEmotionData();
                },
                methods: {
                    loadMessageFromLocal: function() {
                      let that = this;
                      let userInfo = window.getUserInfo();

                      that.page = that.page + 1;

                      fnGetFriendsChat(userInfo.id,
                        api.pageParam.params.conversationId,
                        that.currentLocalMaxMessageId,
                        that.page,
                        that.pageSize,
                        function(ret, err){
                            if (ret.status) {
                              let data = ret.data;
                              // console.log(that.currentLocalMaxMessageId);
                              // console.log(JSON.stringify(data));
                              for(let index in data){
                                  //console.log('data array index:'+index);
                                  if(index == 0){
                                      //设置当前本地缓存的最大朋友圈消息Id
                                      that.currentLocalMaxMessageId = data[index].messageId;
                                  }

                                  vue.messages.splice(0, 0, JSON.parse(data[index].content));
                              }

                              mescroll.endSuccess();
                            }else{
                                console.log(JSON.stringify(err));
                            }
                      });
                    },
                    syncServiceMessageToLocal: function() {
                        let that = this;

                        UIEaseChat = api.require('easeChat');
                        UIEaseChat.loadMessageFromDB({
                            conversationId: api.pageParam.params.conversationId,
                            type: api.pageParam.params.chatType,
                            pagesize: that.pageSize
                          }, function(ret) {
                            if(ret.messages.length > 0){
                              //存在未缓存的消息
                                let messages = ret.messages;
                                let lastIndex = 0;
                                for (let i=0; i<messages.length; i++) {
                                    if (i == 0) {
                                        messages[i]['showHeader'] = true;
                                        that.currentLocalMaxMessageId =  messages[i]['messageId'];
                                    }
                                    let pre = i - 1 >= 0 ? i - 1 : 0;
                                    if (i == messages.lenght - 1 && messages[i].timestamp - messages[pre].timestamp > 5 * 60 * 1000) {
                                        messages[i]['showHeader'] = true;
                                    }
                                    if (messages[i].timestamp - messages[lastIndex].timestamp > 30 * 60 * 1000) {
                                        messages[i]['showHeader'] = true;
                                        lastIndex = i;
                                    }

                                    // 如果不是语音且不是红包,则标记已读
                                    if (messages[i].body.type != 'voice' && !that.isBonus(messages[i])) {
                                        if (!messages[i].isRead) {
                                            // 标记已读
                                            UIEaseChat.markMessageAsRead({
                                                conversationId: api.pageParam.params.conversationId,
                                                type: api.pageParam.params.chatType,
                                                messageId: messages[i]['messageId']
                                            },function(ret,err) {});
                                        }
                                    }

                                }

                                that.messages = messages;

                                // console.log(JSON.stringify(messages));

                                //当前新消息时，同步消息到本地
                                // if(messages.length > 0){
                                //   let userInfo = window.getUserInfo();
                                //   fnAddFriendsChat(userInfo.id,api.pageParam.params.conversationId,messages,
                                //     function(ret, err){
                                //         if(ret.status){
                                //           console.log('add message success');
                                //         }else{
                                //           console.log(JSON.stringify(err));
                                //         }
                                //   });
                                // }
                            }
                        });
                    }
            });
        }

6.朋友圈页

function fnInitData(){
          vue = new Vue({
              el: '#vue',
              data: {
                  datas: [],
                  page: 0,
                  pageSize: 10,
                  currentLocalMaxMessageId: 0
              },
              beforeCreate: function() {},
              updated: function() {},
              mounted: function() {
                  let userInfo = window.getUserInfo();
                  let topBack = userInfo.pyqImg;
                  let avatar = userInfo.avatar;
                  this.localPic(avatar, 'avatar');
                  this.localPic(topBack, 'cover');

                  //从本地缓存加载一页数据
                  // if(this.currentLocalMaxMessageId == 0){
                  //   this.photoSync();
                  // }else{
                    this.photoShow();
                  // }
              },
              methods: {
                  localPic: function(url, dom) {
                      // 缓存图片
                      api.imageCache({
                          url: url,
                          policy: 'cache_only',
                          thumbnail: false
                      }, function(ret, err) {
                          let localPath = ret.url;
                          $api.attr($api.byId(dom), 'src', localPath);
                      });
                  },
                  photoSync: function() {
                      // 与服务器同步朋友圈 下拉操作
                      let that = this;

                      //此处用同步接口，加载本地未缓存的朋友圈数据
                      window.Ajax({
                          url: 'moments/sync',
                          params: {
                              currentLocalMaxMessageId: that.currentLocalMaxMessageId
                          }
                      }, function(data) {
                          let currentServerMaxMessageId = '';

                          if (data.length > 0) {
                              //反向读取朋友圈数据，插入已存在的数组
                              for (var i = data.length-1; i >= 0; i--){
                                  that.datas.splice(0, 0, data[i]);

                                  if(i == 0){
                                      currentServerMaxMessageId = data[i].id;
                                  }
                              }

                              //同步朋友圈时，新消息存入本地缓存
                              let userInfo = window.getUserInfo();
                              fnAddFriendsCircles(userInfo.id, data, function(ret, err) {
                                  if (ret.status) {
                                      // console.log('add success');

                                      that.currentLocalMaxMessageId = currentServerMaxMessageId;
                                  }else{
                                      console.log(JSON.stringify(err));
                                  }
                              });

                              //从本地加载缓存
                              // fnGetFriendsCircle(userInfo.id, 1, 2, function(ret, err) {
                              //     if (ret.status) {
                              //         console.log(JSON.stringify(ret));
                              //     }else{
                              //         console.log(JSON.stringify(err));
                              //     }
                              // });
                          }

                          mescroll.endSuccess();
                      });
                  }
              }
          });
        }