Vue在H5 專案中使用融雲進行實時個人單聊通訊

阿新 • • 發佈：2020-12-16

由於其他部落格的相關融雲的Vue專案開發不是特別完善，此專案加入了自己的一些思考，可供大家有一點方向。

1.融雲官網註冊賬號，建立應用並獲取必要的初始化引數 appkey

appkey

2.融雲web開發文件本人使用3.x 版本

3.vue專案引入cdn(index.html)

專案需求：使用者當前會話列表+使用者當前會話頁面

// 注意在dom之前引入

<script src="https://cdn.ronghub.com/RongIMLib-3.0.0-dev.js"></script>

4.在專案開始之前先獲取融雲返回的Token(此操作需要後端操作，token用於後面初始化連線融雲時使用)

// 獲取融雲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('連結成功,連結使用者 id 為: ',res.id); 
    // 改變使用者連線狀態 用於監聽使用者是否已連線 
    this.$store.commit('changeConnectStatus',true)
  }).catch((error) => {
    // console.log('連結失敗: ',error.code,error.msg);
  });
},

7.會話列表(用於監聽會話列表及渲染當前會話列表)

// 用於監聽會話列表
ImWatch() {
  let IM = this.IM
  let conversationList = [];
  let option = {
    count: 30
  }
  IM.Conversation.getList(option).then((allConversationList) => {
    // console.log('獲取會話列表成功',allConversationList);
    conversationList = IM.Conversation.merge({
      conversationList: conversationList,updatedConversationList: allConversationList
    }); // TODO 更新會話列表介面
    this.list = conversationList
  });
  IM.watch({
    conversation: (event) =>{
      var updatedConversationList = event.updatedConversationList; // 更新的會話列表
      // console.log('更新會話彙總:',updatedConversationList);
      // console.log('最新會話列表:',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('已主動斷開連線');
        break;
      case RongIMLib.CONNECTION_STATUS.NETWORK_UNAVAILABLE:
        console.log('網路不可用'); // SDK 內部會自動進行重連
        break;
      case RongIMLib.CONNECTION_STATUS.SOCKET_ERROR:
        console.log('Socket 連結錯誤'); // SDK 內部會自動進行重連
        break;
      case RongIMLib.CONNECTION_STATUS.KICKED_OFFLINE_BY_OTHER_CLIENT:
        console.log('其他裝置登入,本端被踢'); // 己端被踢,不可進行重連. 否則會造成多端迴圈互踢
        break;
      case RongIMLib.CONNECTION_STATUS.BLOCKED:
        console.log('連結斷開,使用者已被封禁');
        break;
      default:
        console.log('連結狀態變化為:',status);
        break;
      }
    }
  })
},

會話列表

8.會話頁面(用於監聽當前新訊息是否是當前聊天物件以及是否渲染在當前會話頁面)

// 用於當前會話頁面
ImWatch() {
  let IM = this.IM
  var conversation = IM.Conversation.get({
    targetId: this.targetId,type: RongIMLib.CONVERSATION_TYPE.PRIVATE
  });
  var option = {
    timestrap: 0,// 為0從當前時間最新獲取
    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('收到新訊息',// 監聽會話
    conversation:(res) => {
      var updatedConversationList = res.updatedConversationList;
      // 傳送資訊過來--使用者id
      // 傳送過來id != 當前使用者id 或者當前會話id 則不渲染在列表中
      // 等於當前id 或 會 話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)
    },

9.會話頁面(用於點擊發送之後監聽傳送資訊及渲染當前頁面)

// 監聽當前傳送的資訊
send() {
  if(this.context == '') {
    Toast('請輸入內容');
    return;
  }
  var conversation = this.IM.Conversation.get({
    targetId: this.targetId,// 傳送的目標id
    type: RongIMLib.CONVERSATION_TYPE.PRIVATE,// 單聊
  });
  conversation.send({
    messageType: RongIMLib.MESSAGE_TYPE.TEXT,// 'RC:TxtMsg'
    content: {
      content: this.context,// 文字內容
      // 傳送訊息攜帶的引數 用於頁面渲染及相關判斷
      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('傳送文字訊息成功',message);
    this.context = ''
  }).catch((error) => {
    Toast('傳送失敗，請重試')
  });
}

會話頁面