vue 통합 텐 센트 TIM 실시 간 통신 실현

본 고 는 vue 가 통합 텐 센트 TIM 인 스 턴 트 메 신 저 를 실현 하고 여러분 에 게 공유 하 는 것 을 소 개 했 습 니 다.구체 적 으로 다음 과 같 습 니 다.
위의 그림


머리말
프로젝트 는 고객 지원 기능 을 해 야 합 니 다.사용자 쪽 애플 릿,고객 센터 웹 쪽 에서 텐 센트 의 tim 을 사 용 했 습 니 다.
준비 작업
텐 센트 클 라 우 드 홈 페이지 에 응용 프로그램 을 만 들 고 해당 하 는 SDKAppID 와 해당 하 는 비밀 키 정 보 를 얻 을 수 있 습 니 다.
SDK 설치
(1)웹 프로젝트 사용 명령

// 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

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)
}

여기 서 vue 통합 텐 센트 TIM 인 스 턴 트 메 신 저 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 텐 센트 TIM 인 스 턴 트 메 신 저 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!