Pictured above,

preface

The project needs to build a customer service function, including a small program on the client side and a Web client for customer service personnel, so Tim of Tencent is used

The preparatory work

  1. Create an application on Tencent cloud official website and obtain the corresponding SDKAppID and the corresponding secret key information

  2. Installing the SDK

(1) Web project use command

// IM Web SDK
npm install tim-js-sdk --save
// COS SDK needed to send pictures, files and other messages
npm install cos-js-sdk-v5 --save

Copy the code

(2) Small program project use command

// IM applets SDK
npm install tim-wx-sdk --save
// COS SDK needed to send pictures, files and other messages
npm install cos-wx-sdk-v5 --save

Copy the code

  1. Introduced in the main. Js

import TIM from 'tim-js-sdk';
// import TIM from 'tim-wx-sdk'; Import TIM from 'tim-js-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 ';

// To create an SDK instance, the tim.create () method returns only one instance for the same SDKAppID
let options = {
  SDKAppID: 0 // Replace 0 with the SDKAppID of your im application
};
let tim = TIM.create(options); // SDK instances are usually represented by Tim
// Set the SDK log output level. For details, see the description of the setLogLevel interface
tim.setLogLevel(0); // This parameter is a common level with a large amount of logs. Therefore, this parameter is recommended for access
// tim.setLogLevel(1); // Release level, SDK output key information, recommended for production environment

// Register the SDK of Tencent Cloud object Storage service (hereinafter referred to as COS SDK) as a plug-in. When IM SDK sends files, pictures and other messages, COS service of Tencent Cloud is needed
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
// Listening event Notification that offline messages and session list are synchronized
tim.on(TIM.EVENT.SDK_READY, onReadyStateUpdate, this)
// Received a notification that the SDK entered the not Ready state, at which time the SDK cannot work properly
tim.on(TIM.EVENT.SDK_NOT_READY, onReadyStateUpdate, this)
// Receive notification of being kicked offline
tim.on(TIM.EVENT.KICKED_OUT, kickOut, this)
// All errors are handled uniformly
tim.on(TIM.EVENT.ERROR, onError, this)
// After receiving a push message, iterate over event.data to get the message list data and render it to the page
tim.on(TIM.EVENT.MESSAGE_RECEIVED, messageReceived, this)
// Update the session list
tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, convListUpdate, this)
// Update the group list
tim.on(TIM.EVENT.GROUP_LIST_UPDATED, groupListUpdate, this)
// Update the blacklist
tim.on(TIM.EVENT.BLACKLIST_UPDATED, blackListUpdate, this)
// The network status changes
tim.on(TIM.EVENT.NET_STATE_CHANGE, netStateChange, this)
function onReadyStateUpdate ({ name }) {
  const isSDKReady = (name === TIM.EVENT.SDK_READY)
  if (isSDKReady) {
  // User information
    wx.$app.getMyProfile().then(res= > {
      store.commit('updateMyInfo', res.data)
	  uni.setStorageSync('name', res.data.nick);
	  console.log(name,'updateMyInfo');
    })
    // The blacklist list is stored in vuex
    wx.$app.getBlacklist().then(res= > {
      store.commit('setBlacklist', res.data)
    })
  }
  store.commit('setSdkReady', isSDKReady)
}
// The function to log in again after being kicked offline
function kickOut (event) {
  store.dispatch('resetStore')
  wx.showToast({
    title: 'You've been kicked out.'.icon: 'none'.duration: 1500
  })
  setTimeout(() = > {
    wx.reLaunch({
      url: '.. /account/login'})},500)}function onError (event) {
  // Network error does not play toast && SDK is not initialized completely error
  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: 'Connected'.duration: 2000 }
    case TIM.TYPES.NET_STATE_CONNECTING:
      return { title: 'Current network is unstable'.duration: 2000 }
    case TIM.TYPES.NET_STATE_DISCONNECTED:
      return { title: 'Current network unavailable'.duration: 2000 }
    default:
      return ' '}}// Network state change function
function netStateChange (event) {
  console.log(event.data.state)
  store.commit('showToast', checkoutNetState(event.data.state))
}
// Send and receive messages
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,'Home Information')
        if (videoCustom.version === 3) {
          switch (videoCustom.action) {
            // The other party called me
            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
            // The other party cancels
            case 1:
              wx.navigateBack({
                delta: 1
              })
              break
            // The other party refuses
            case 2:
              $bus.$emit('onRefuse')
              break
            // The other party does not answer for 1min
            case 3:
              wx.navigateBack({
                delta: 1
              })
              break
            // The other party answers the call
            case 4:
              $bus.$emit('onCall', videoCustom)
              break
            // Hang up
            case 5:
              $bus.$emit('onClose')
              break
            // The other party is on another line
            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)
}


Copy the code

The source code

Concern public “source code trust-mart” reply Tim to get the source code