Pictured above,



preface

The project needed to build a customer service function, client side small program and web side for customer service personnel, so Tencent’s Tim was used

The preparatory work

  1. Create an application on the Official website of Tencent Cloud and obtain the corresponding SDKAppID and key information

    1. Installing the SDK

    (1) Web project use command

// IM Web SDK NPM install tim-js-sdk --save // COS SDK NPM install cos-js-sdK-v5 --save

(2) Small program project use command

// IM miniprogram SDK NPM install tim-wx-sdk --save // COS SDK NPM install cos-wx-SDK-v5 --save
  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 '; import COS from' cos-js-sdK-v5 '; Options = {SDKAppID: 0 // Replace 0 with the SDKAppID of your instant messaging application}; let tim = TIM.create(options); // Set the output level of SDK logs. For details, see the setLogLevel interface description tim.setLogLevel(0). // Tim.setloglevel (1); // Tim.setloglevel (1); // Tim.setloglevel (1); // Register Tencent Cloud Object storage service SDK (hereinafter referred to as COS SDK) as a plug-in. When IM SDK sends messages such as files and pictures, $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, Tim.on (tim.event.sdk_not_ready, onReadyStateUpdate, Tim.on (tim.event.kicked_out, kickOut, this) Tim.on (tim.event.message_received, messageReceived, Tim.on (tim.event.conversation_list_updated, convListUpdate, Tim.on (tim.event.group_list_updated, groupListUpdate, groupListUpdate, Tim.on (tim.event.blacklist_updated, blackListUpdate, this) tim.on(tim.event.net_state_change, TIM.EVENT.NET) netStateChange, this) function onReadyStateUpdate ({ name }) { const isSDKReady = (name === TIM.EVENT.SDK_READY) if (isSDKReady) { $app.getMyProfile().then(res => {store.com MIT ('updateMyInfo', res.data) uni. SetStorageSync ('name', 'name') res.data.nick); console.log(name,'updateMyInfo'); }) // Blacklist, $app.getblacklist ().then(res => {store.com MIT ('setBlacklist', res.data)})} store.com MIT ('setSdkReady', Function kickOut (event) {store.dispatch('resetStore') wx.showtoast ({title: 'You've been kicked off ', icon:' None ', duration: 1500}) setTimeout(() => {wx.relaunch ({url: '.. /account/login' }) }, If (event.data.message && event.data.code &&) {if (event.data.message && event.data.code &&) {if (event.data.message && event.data.code &&) {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: Case tim.types.net_state_connecting: return {title: 'Connected ', duration: 2000} case tim.types.net_state_connecting: return {title:' connected ', duration: 2000} Case tim.types.net_state_disconnected: return {title: 'current network unavailable ', duration: 2000} default: Return ''}} function netStateChange (event) {console.log(event.data.state) store.com MIT ('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,' home page information ') 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='+''; Log (url,'url') wx.navigateto ({url})} else {$bus.$emit('isCalling', item)} break case 1: Wx. navigateBack({delta: 1}) case 2: $emit('onRefuse') break case 3: $emit('onRefuse') break Wx. navigateBack({delta: 1}) case 4: $bus.$emit('onCall', videoCustom) break case 4: $emit('onCall', videoCustom) break case 5: $bus.$emit('onClose') break default: $bus.$emit('onClose') 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) }

The last

The rest of the code is not described, directly look at the demo source code. Need source code can see my home page contact me