web 版im即時通訊舊版本

vue 頁面

1.引用webim.js

我在app.vue中全局引用

import './api/webim.js'

2. 登錄im , 方法在created中運行。 接口返回對象， webim.login 初始化im

methods:{
    imLogin:function(uuid){
      var vm=this;
      //註冊監聽事件
      var listeners = {
          "onConnNotify": vm.onConnNotify, //監聽連接狀態回調變化事件,必填
          "onMsgNotify": vm.onMsgNotify, //監聽新消息(私聊，普通羣(非直播聊天室)消息，全員推送消息)事件，必填
          "onKickedEventCall": vm.onKickedEventCall //被其他登錄實例踢下線
      };

      //初始化時，其他對象，選填
      var options = {
          'isAccessFormalEnv': true, //是否訪問正式環境，默認訪問正式，選填
          'isLogOn': false //是否開啓控制檯打印日誌,默認開啓，選填
      };

      port.imSing.r({identifier: uuid}).then(loginInfo=>{
          vm.loginInfo=loginInfo.data;
          window.webim.login(
            loginInfo.data, listeners, options,
            function (resp) {
              if (resp.ErrorCode === 0 && resp.ActionStatus === "OK") {
                  // vm.loginInfo.identifierNick = resp.identifierNick;//設置當前用戶暱稱
                  // vm.loginInfo.headurl = resp.headurl;//設置當前用戶頭像
                  console.log("登錄成功  resp = " + JSON.stringify(resp));
                  
              }
            }, function (err) {
                console.log(err.ErrorInfo);
            }
          );
      });
        
    },
},
created(){
    this.imLogin(uuid);
}

3.listeners 中調用的函數  寫在methods中

methods:{
    //監聽連接狀態回調變化事件
    onConnNotify : function (resp) {
        console.log(resp)
          var info;
          switch (resp.ErrorCode) {
              case window.webim.CONNECTION_STATUS.ON:
                  console.log('建立連接成功: ' + resp.ErrorInfo);
                  break;
              case window.webim.CONNECTION_STATUS.OFF:
                  info = '連接已斷開，無法收到新消息，請檢查下你的網絡是否正常: ' + resp.ErrorInfo;
                  console.log(info);
                  break;
              case window.webim.CONNECTION_STATUS.RECONNECT:
                  info = '連接狀態恢復正常: ' + resp.ErrorInfo;
                  console.log(info);
                  break;
              default:
                  console.log('未知連接狀態: =' + resp.ErrorInfo);
                  break;
          }
    },
    //被新實例踢下線的回調處理
    onKickedEventCall() {
        this.$toast("其他地方登錄，被T了");
    },

    //newMsgList 爲新消息數組，結構爲[Msg]
    onMsgNotify:function(newMsgList) {
      console.log("MSG") ;
      // console.log(newMsgList) ;
      for (var i in newMsgList) {//遍歷新消息
          if(newMsgList[i].elems[0].content.text=="__end__"){
              this.$toast('已結束');
              //清除session
              util.session('getList','');
              util.session('doctorInfos','');

              setTimeout(function(){
                this.$router.push({path:'/'})
              },3000)
              return;
          }
          
          var cont = newMsgList[i].elems[0].content.text
         
          this.dataList.push({
              content:cont,
              sendTime:util.CurentTime(),
         

          });
          console.log(this.dataList)
      
          this.$nextTick(() => {
            this.$refs.pageCont.scrollTop = this.$refs.pageCont.scrollHeight
          })
      }

    }

}

此時im已經調通 。

4. 發送數據（1）通過接口發送到後臺（2）發送到im

//發送內容
    sendContent(content,callback){
      let vm = this;
      vm.talkValue = null;
      if(content == null && vm.seedimg==null){
        vm.$toast('空的內容不能發送');
      }else{
        var params=JSON.stringify({
              communicationId: vm.getList.comunicationId,  //通訊標識
              content:content,
              imgs:vm.seedimg
        })
        port.seedTalk.r(params).then(rs=>{
          if(rs.data.code == 1){
            vm.dataList.push({
                    content:content?content:vm.seedimg,
                    sendTime:util.CurentTime(),
                    talkImg:vm.seedimg?true:false
                });
            
                vm.$nextTick(() => {
                  vm.$refs.pageCont.scrollTop = vm.$refs.pageCont.scrollHeight
                })
                vm.sentToIm(content?content:vm.seedimg);//發送im
                callback && callback();
          }else{
            vm.$toast('發送失敗') ;
          }
        })
      }

    sentToIm(content){
      var vm = this;
      var selSess = null;
      if(!this.selSess){
              this.selSess = new window.webim.Session(window.webim.SESSION_TYPE.C2C, this.doctorInfos.uuid,this.doctorInfos.uuid, '', Math.round(new Date().getTime() / 1000));
          }
          selSess=this.selSess;
          var isSend = true;//是否爲自己發送
          var seq = -1;//消息序列，-1表示 SDK 自動生成，用於去重
          var random = Math.round(Math.random() * 4294967296);//消息隨機數，用於去重
          var msgTime = Math.round(new Date().getTime() / 1000);//消息時間戳
          var subType=window.webim.C2C_MSG_SUB_TYPE.COMMON;//消息子類型
          var msg = new window.webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
          var text_obj = new window.webim.Msg.Elem.Text(content);
          msg.addText(text_obj);
          msg.addText(new window.webim.Msg.Elem.Text(vm.getList.comunicationId));//消息ID
          window.webim.sendMsg(msg,function(){
            console.log("IM  發送成功") ;
            // console.log(msg) ;
          },function(e){
            console.log("IM 發送失敗") ;
            // console.log(msg) ;
            console.log(e) ;
          });
      
    }   

此寫法是 舊版本 im   

在此版本webim下載地址 ：https://download.csdn.net/download/p930318/12022155