本文主要介紹了vue實現(xiàn)集成騰訊TIM即時通訊，分享給大家，具體如下：

上圖

項目需要做個客服功能，用戶端小程序，客服人員web端，于是用到了騰訊的tim

在騰訊云官網(wǎng)上創(chuàng)建應用，獲取到相應的SDKAppID和相應的秘鑰信息

安裝SDK

（1） web項目使用命令

// IM Web SDKnpm install tim-js-sdk --save// 發(fā)送圖片、文件等消息需要的 COS SDKnpm install cos-js-sdk-v5 --save

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

// IM 小程序 SDKnpm install tim-wx-sdk --save// 發(fā)送圖片、文件等消息需要的 COS SDKnpm install cos-wx-sdk-v5 --save

main.js中引入

import TIM from ’tim-js-sdk’;// import TIM from ’tim-wx-sdk’; // 微信小程序環(huán)境請取消本行注釋，并注釋掉 import TIM from ’tim-js-sdk’;import COS from ’cos-js-sdk-v5’;// import COS from ’cos-wx-sdk-v5’; // 微信小程序環(huán)境請取消本行注釋，并注釋掉 import COS from ’cos-js-sdk-v5’;// 創(chuàng)建 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 輸出關鍵信息，生產(chǎn)環(huán)境時建議使用// 將騰訊云對象存儲服務 SDK （以下簡稱 COS SDK）注冊為插件，IM SDK 發(fā)送文件、圖片等消息時，需要用到騰訊云的 COS 服務wx.$app = timwx.$app.registerPlugin({’cos-wx-sdk’: COS})wx.store = storewx.TIM = TIM wx.dayjs = dayjs dayjs.locale(’zh-cn’)let $bus = new Vue()Vue.prototype.TIM = TIMVue.prototype.$type = TYPESVue.prototype.$store = storeVue.prototype.$bus = $bus// 監(jiān)聽事件 收到離線消息和會話列表同步完畢通知tim.on(TIM.EVENT.SDK_READY, onReadyStateUpdate, this)// 收到SDK進入not ready狀態(tài)通知,此時SDK無法正常工作tim.on(TIM.EVENT.SDK_NOT_READY, onReadyStateUpdate, this)// 收到被踢下線通知tim.on(TIM.EVENT.KICKED_OUT, kickOut, this)// 出錯統(tǒng)一處理tim.on(TIM.EVENT.ERROR, onError, this)// 收到推送的消息,遍歷event.data獲取消息列表數(shù)據(jù)并渲染到頁面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)// 網(wǎng)絡狀態(tài)變化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)}//被踢下線函數(shù),被踢下線之后需要設置重新登錄function kickOut (event) { store.dispatch(’resetStore’) wx.showToast({ title: ’你已被踢下線’, icon: ’none’, duration: 1500 }) setTimeout(() => { wx.reLaunch({ url: ’../account/login’ }) }, 500)}function onError (event) { // 網(wǎng)絡錯誤不彈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: ’已接入網(wǎng)絡’, duration: 2000 } case TIM.TYPES.NET_STATE_CONNECTING: return { title: ’當前網(wǎng)絡不穩(wěn)定’, duration: 2000 } case TIM.TYPES.NET_STATE_DISCONNECTED: return { title: ’當前網(wǎng)絡不可用’, duration: 2000 } default: return ’’ }}//網(wǎng)絡狀態(tài)變化函數(shù)function netStateChange (event) { console.log(event.data.state) store.commit(’showToast’, checkoutNetState(event.data.state))}//消息收發(fā)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實現(xiàn)集成騰訊TIM即時通訊的文章就介紹到這了,更多相關vue騰訊TIM即時通訊內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！