vue項目中集成騰訊TIM即時通信

上圖

前言

項目須要作個客服功能，用戶端小程序，客服人員web端，因而用到了騰訊的tim

準備工做

1. 在騰訊雲官網上建立應用，獲取到相應的SDKAppID和相應的祕鑰信息

   1. 安裝SDK

   （1） web項目使用命令

// IM Web SDK
npm install tim-js-sdk --save
// 發送圖片、文件等消息須要的 COS SDK
npm install cos-js-sdk-v5 --save

（2） 小程序項目使用命令

// IM 小程序 SDK
npm install tim-wx-sdk --save
// 發送圖片、文件等消息須要的 COS SDK
npm install cos-wx-sdk-v5 --save

1. main.js中引入

import TIM from 'tim-js-sdk';
// import TIM from 'tim-wx-sdk'; // 微信小程序環境請取消本行註釋，並註釋掉 import TIM from 'tim-js-sdk';
import COS from 'cos-js-sdk-v5';
// import COS from 'cos-wx-sdk-v5'; // 微信小程序環境請取消本行註釋，並註釋掉 import COS from 'cos-js-sdk-v5';

// 建立 SDK 實例，TIM.create() 方法對於同一個 SDKAppID 只會返回同一份實例
let options = {
  SDKAppID: 0 // 接入時須要將0替換爲您的即時通訊應用的 SDKAppID
};
let tim = TIM.create(options); // SDK 實例一般用 tim 表示
// 設置 SDK 日誌輸出級別，詳細分級請參見 setLogLevel 接口的說明
tim.setLogLevel(0); // 普通級別，日誌量較多，接入時建議使用
// tim.setLogLevel(1); // release級別，SDK 輸出關鍵信息，生產環境時建議使用

// 將騰訊雲對象存儲服務 SDK （如下簡稱 COS SDK）註冊爲插件，IM SDK 發送文件、圖片等消息時，須要用到騰訊雲的 COS 服務
wx.$app = tim
wx.$app.registerPlugin({'cos-wx-sdk': COS})
wx.store = store
wx.TIM = TIM
 wx.dayjs = dayjs
 dayjs.locale('zh-cn')
let $bus = new Vue()
Vue.prototype.TIM = TIM
Vue.prototype.$type = TYPES
Vue.prototype.$store = store
Vue.prototype.$bus = $bus
// 監聽事件 收到離線消息和會話列表同步完畢通知
tim.on(TIM.EVENT.SDK_READY, onReadyStateUpdate, this)
// 收到SDK進入not ready狀態通知,此時SDK沒法正常工做
tim.on(TIM.EVENT.SDK_NOT_READY, onReadyStateUpdate, this)
// 收到被踢下線通知
tim.on(TIM.EVENT.KICKED_OUT, kickOut, this)
// 出錯統一處理
tim.on(TIM.EVENT.ERROR, onError, this)
// 收到推送的消息,遍歷event.data獲取消息列表數據並渲染到頁面
tim.on(TIM.EVENT.MESSAGE_RECEIVED, messageReceived, this)
// 更新會話列表
tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, convListUpdate, this)
// 更新羣組列表
tim.on(TIM.EVENT.GROUP_LIST_UPDATED, groupListUpdate, this)
// 更新黑名單
tim.on(TIM.EVENT.BLACKLIST_UPDATED, blackListUpdate, this)
// 網絡狀態變化
tim.on(TIM.EVENT.NET_STATE_CHANGE, netStateChange, this)
function onReadyStateUpdate ({ name }) {
  const isSDKReady = (name === TIM.EVENT.SDK_READY)
  if (isSDKReady) {
  //用戶信息
    wx.$app.getMyProfile().then(res => {
      store.commit('updateMyInfo', res.data)
      uni.setStorageSync('name', res.data.nick);
      console.log(name,'updateMyInfo');
    })
    //黑名單列表，存入vuex中
    wx.$app.getBlacklist().then(res => {
      store.commit('setBlacklist', res.data)
    })
  }
  store.commit('setSdkReady', isSDKReady)
}
//被踢下線函數,被踢下線以後須要設置從新登陸
function kickOut (event) {
  store.dispatch('resetStore')
  wx.showToast({
    title: '你已被踢下線',
    icon: 'none',
    duration: 1500
  })
  setTimeout(() => {
    wx.reLaunch({
      url: '../account/login'
    })
  }, 500)
}
function onError (event) {
  // 網絡錯誤不彈toast && sdk未初始化徹底報錯
  if (event.data.message && event.data.code && event.data.code !== 2800 && event.data.code !== 2999) {
    store.commit('showToast', {
      title: event.data.message,
      duration: 2000
    })
  }
}
//
function checkoutNetState (state) {
  switch (state) {
    case TIM.TYPES.NET_STATE_CONNECTED:
      return { title: '已接入網絡', duration: 2000 }
    case TIM.TYPES.NET_STATE_CONNECTING:
      return { title: '當前網絡不穩定', duration: 2000 }
    case TIM.TYPES.NET_STATE_DISCONNECTED:
      return { title: '當前網絡不可用', duration: 2000 }
    default:
      return ''
  }
}
//網絡狀態變化函數
function netStateChange (event) {
  console.log(event.data.state)
  store.commit('showToast', checkoutNetState(event.data.state))
}
//消息收發
function messageReceived (event) {
console.log(event,'main.js');
  for (let i = 0; i < event.data.length; i++) {
    let item = event.data[i]
    if (item.type === TYPES.MSG_GRP_TIP) {
      if (item.payload.operationType) {
        $bus.$emit('groupNameUpdate', item.payload)
      }
    }
    if (item.type === TYPES.MSG_CUSTOM) {
      if (isJSON(item.payload.data)) {
        const videoCustom = JSON.parse(item.payload.data)
        console.log(item,'首頁信息')
        if (videoCustom.version === 3) {
          switch (videoCustom.action) {
            // 對方呼叫我
            case 0:
              if (!store.getters.isCalling) {
                let url = `call?args=${item.payload.data}&&from=${item.from}&&to=${item.to}&&name=`+uni.getStorageSync('name')+'&&nick='+'';
                console.log(url,'url')
                wx.navigateTo({url})
              } else {
                $bus.$emit('isCalling', item)
              }
              break
            // 對方取消
            case 1:
              wx.navigateBack({
                delta: 1
              })
              break
            // 對方拒絕
            case 2:
              $bus.$emit('onRefuse')
              break
            // 對方不接1min
            case 3:
              wx.navigateBack({
                delta: 1
              })
              break
            // 對方接聽
            case 4:
              $bus.$emit('onCall', videoCustom)
              break
            // 對方掛斷
            case 5:
              $bus.$emit('onClose')
              break
            // 對方正在通話中
            case 6:
              $bus.$emit('onBusy')
              break
            default:
              break
          }
        }
      }
    }
  }
  store.dispatch('onMessageEvent', event)
}
function convListUpdate (event) {
  store.commit('updateAllConversation', event.data)
}

function groupListUpdate (event) {
  store.commit('updateGroupList', event.data)
}

function blackListUpdate (event) {
  store.commit('updateBlacklist', event.data)
}

最後

其他的代碼很少作描述，直接看demo源碼。
須要源碼的能夠看本人主頁聯繫我