這篇文章給大家介紹如何在H5 項(xiàng)目中利用Vue實(shí)現(xiàn)一個(gè)實(shí)時(shí)個(gè)人通訊功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站堅(jiān)信：善待客戶(hù)，將會(huì)成為終身客戶(hù)。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?lài)。我們從不忽悠初訪客戶(hù)，我們用心做好本職工作，不忘初心，方得始終。10年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營(yíng)銷(xiāo)服務(wù)商,為您提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5場(chǎng)景定制、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、微信小程序開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

1.融云官網(wǎng)注冊(cè)賬號(hào)，創(chuàng)建應(yīng)用并獲取必要的初始化參數(shù)appkey

2.融云web開(kāi)發(fā)文檔 本人使用3.x 版本

3.vue項(xiàng)目引入cdn(index.html)

項(xiàng)目需求：用戶(hù)當(dāng)前會(huì)話(huà)列表+用戶(hù)當(dāng)前會(huì)話(huà)頁(yè)面

// 注意在dom之前引入

4.在項(xiàng)目開(kāi)始之前先獲取融云返回的Token(此操作需要后端操作，token用于后面初始化連接融云時(shí)使用)

// 獲取融云token
	// RongToken --- api ---
  getRongToken() {
    let userId = this.$store.state.member.info.member_id
    let name = this.$store.state.member.info.member_name
    let portraitUri = this.$store.state.member.info.member_avatar
    RongToken(userId,name,portraitUri).then((res) => {
      if(res.code == 200) {
        this.appToken = res.data.token
        // 將融云token 存入vuex
        this.$store.commit('setAppToken',res.data.token)
      }else{
        return;
      }
    })
  },

5.融云初始化

// 初始化融云
initRong() {
  this.IM = RongIMLib.init({
    appkey: 'xxxxxxx' // 融云appkey
  })
},

6.建立連接

// 建立連接 

getConnect() {
  var user = {
    token: this.$store.state.im_chat.appToken
  };
  this.IM.connect(user).then((res) => {
    // console.log('鏈接成功, 鏈接用戶(hù) id 為: ', res.id); 
    // 改變用戶(hù)連接狀態(tài) 用于監(jiān)聽(tīng)用戶(hù)是否已連接 
    this.$store.commit('changeConnectStatus',true)
  }).catch((error) => {
    // console.log('鏈接失敗: ', error.code, error.msg);
  });
},

7.會(huì)話(huà)列表(用于監(jiān)聽(tīng)會(huì)話(huà)列表及渲染當(dāng)前會(huì)話(huà)列表)

// 用于監(jiān)聽(tīng)會(huì)話(huà)列表
ImWatch() {
  let IM = this.IM
  let conversationList = [];
  let option = {
    count: 30
  }
  IM.Conversation.getList(option).then((allConversationList) => {
    // console.log('獲取會(huì)話(huà)列表成功', allConversationList);
    conversationList = IM.Conversation.merge({
      conversationList: conversationList,
      updatedConversationList: allConversationList
    }); // TODO 更新會(huì)話(huà)列表界面
    this.list = conversationList
  });
  IM.watch({
    conversation: (event) =>{
      var updatedConversationList = event.updatedConversationList; // 更新的會(huì)話(huà)列表
      // console.log('更新會(huì)話(huà)匯總:', updatedConversationList);
      // console.log('新會(huì)話(huà)列表:', IM.Conversation.merge({
      //   conversationList: conversationList,
      //   updatedConversationList: updatedConversationList
      // }));
      this.list = updatedConversationList
    },
    message: function(event){
      var message = event.message;
      // console.log('收到新消息', message);
    },
    status: (event)=>{
      var status = event.status;
      if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
        this.$store.commit('changeConnectStatus',false)
      }
      switch (status) {
      case RongIMLib.CONNECTION_STATUS.CONNECTED:
        console.log('鏈接成功');
        break;
      case RongIMLib.CONNECTION_STATUS.CONNECTING:
        console.log('正在連接中');
        break;
      case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
        console.log('已主動(dòng)斷開(kāi)連接');
        break;
      case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
        console.log('網(wǎng)絡(luò)不可用'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
        break;
      case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
        console.log('Socket 鏈接錯(cuò)誤'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
        break;
      case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
        console.log('其他設(shè)備登錄, 本端被踢'); // 己端被踢, 不可進(jìn)行重連. 否則會(huì)造成多端循環(huán)互踢
        break;
      case RongIMLib.CONNECTION_STATUS.BLOCKED:
        console.log('鏈接斷開(kāi), 用戶(hù)已被封禁');
        break;
      default:
        console.log('鏈接狀態(tài)變化為:', status);
        break;
      }
    }
  })
},

8.會(huì)話(huà)頁(yè)面(用于監(jiān)聽(tīng)當(dāng)前新消息是否是當(dāng)前聊天對(duì)象以及是否渲染在當(dāng)前會(huì)話(huà)頁(yè)面)

// 用于當(dāng)前會(huì)話(huà)頁(yè)面
ImWatch() {
  let IM = this.IM
  var conversation = IM.Conversation.get({
    targetId: this.targetId,
    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
  });
  var option = {
    timestrap: 0, // 為0從當(dāng)前時(shí)間新獲取
    count: 20
  };
  conversation.getMessages(option).then((result) =>{
    var list = result.list; // 歷史消息列表
    var hasMore = result.hasMore; // 是否還有歷史消息可以獲取
    // console.log('獲取歷史消息成功', list, hasMore);
    this.list = list
  });
  IM.watch({
    message: function(event){
      var message = event.message;
      // console.log('收到新消息', message);
    },
    // 監(jiān)聽(tīng)會(huì)話(huà)
    conversation:(res) => {
      var updatedConversationList = res.updatedConversationList;
      // 發(fā)送信息過(guò)來(lái)--用戶(hù)id
      // 發(fā)送過(guò)來(lái)id != 當(dāng)前用戶(hù)id 或者當(dāng)前會(huì)話(huà)id 則不渲染在列表中
      // 等于當(dāng)前id 或 會(huì) 話(huà)id 則即加入列表中
      let updateId = updatedConversationList[0].latestMessage.content.user.id
      let member_id = this.$store.state.member.info.member_id
      let targetId = Number(this.targetId)
      if(updateId != targetId && updateId != member_id){
        return;
      }
      this.list.push(updatedConversationList[0].latestMessage)
    },
    status: (event)=>{
      var status = event.status;
      if(status != RongIMLib.CONNECTION_STATUS.CONNECTED) {
        this.$store.commit('changeConnectStatus',false)
      }
      switch (status) {
      case RongIMLib.CONNECTION_STATUS.CONNECTED:
        console.log('鏈接成功');
        break;
      case RongIMLib.CONNECTION_STATUS.CONNECTING:
        console.log('正在連接中');
        break;
      case RongIMLib.CONNECTION_STATUS.DISCONNECTED:
        console.log('已主動(dòng)斷開(kāi)連接');
        break;
      case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
        console.log('網(wǎng)絡(luò)不可用'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
        break;
      case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
        console.log('Socket 鏈接錯(cuò)誤'); // SDK 內(nèi)部會(huì)自動(dòng)進(jìn)行重連
        break;
      case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
        console.log('其他設(shè)備登錄, 本端被踢'); // 己端被踢, 不可進(jìn)行重連. 否則會(huì)造成多端循環(huán)互踢
        break;
      case RongIMLib.CONNECTION_STATUS.BLOCKED:
        console.log('鏈接斷開(kāi), 用戶(hù)已被封禁');
        break;
      default:
        console.log('鏈接狀態(tài)變化為:', status);
        break;
      }
    }
  })
},

9.會(huì)話(huà)頁(yè)面(用于點(diǎn)擊發(fā)送之后監(jiān)聽(tīng)發(fā)送信息及渲染當(dāng)前頁(yè)面)

// 監(jiān)聽(tīng)當(dāng)前發(fā)送的信息
send() {
  if(this.context == '') {
    Toast('請(qǐng)輸入內(nèi)容');
    return;
  }
  var conversation = this.IM.Conversation.get({
    targetId: this.targetId, // 發(fā)送的目標(biāo)id
    type: RongIMLib.CONVERSATION_TYPE.PRIVATE, // 單聊
  });
  conversation.send({
    messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
    content: {
      content: this.context, // 文本內(nèi)容
      // 發(fā)送消息攜帶的參數(shù) 用于頁(yè)面渲染及相關(guān)判斷
      user:{
        id:this.$store.state.member.info.member_id,
        username:this.$store.state.member.info.member_name,
        shopname:this.storeName,
        portraitUri:this.$store.state.member.info.member_avatar,
      }
    }
  }).then((message) =>{
    // console.log('發(fā)送文字消息成功', message);
    this.context = ''
  }).catch((error) => {
    Toast('發(fā)送失敗，請(qǐng)重試')
  });
}

關(guān)于如何在H5 項(xiàng)目中利用Vue實(shí)現(xiàn)一個(gè)實(shí)時(shí)個(gè)人通訊功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：如何在H5項(xiàng)目中利用Vue實(shí)現(xiàn)一個(gè)實(shí)時(shí)個(gè)人通訊功能-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://weahome.cn/article/iggch.html