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


前言
項(xiàng)目需要做個(gè)客服功能,用戶端小程序,客服人員web端,于是用到了騰訊的tim
準(zhǔn)備工作
在騰訊云官網(wǎng)上創(chuàng)建應(yīng)用,獲取到相應(yīng)的SDKAppID和相應(yīng)的秘鑰信息
安裝SDK
(1) web項(xiàng)目使用命令
// IM Web SDK npm install tim-js-sdk --save // 發(fā)送圖片、文件等消息需要的 COS SDK npm install cos-js-sdk-v5 --save
(2) 小程序項(xiàng)目使用命令
// IM 小程序 SDK npm install tim-wx-sdk --save // 發(fā)送圖片、文件等消息需要的 COS SDK npm install cos-wx-sdk-v5 --save
main.js中引入
import TIM from 'tim-js-sdk';
// import TIM from 'tim-wx-sdk'; // 微信小程序環(huán)境請(qǐng)取消本行注釋,并注釋掉 import TIM from 'tim-js-sdk';
import COS from 'cos-js-sdk-v5';
// import COS from 'cos-wx-sdk-v5'; // 微信小程序環(huán)境請(qǐng)取消本行注釋,并注釋掉 import COS from 'cos-js-sdk-v5';
// 創(chuàng)建 SDK 實(shí)例,TIM.create() 方法對(duì)于同一個(gè) SDKAppID 只會(huì)返回同一份實(shí)例
let options = {
SDKAppID: 0 // 接入時(shí)需要將0替換為您的即時(shí)通信應(yīng)用的 SDKAppID
};
let tim = TIM.create(options); // SDK 實(shí)例通常用 tim 表示
// 設(shè)置 SDK 日志輸出級(jí)別,詳細(xì)分級(jí)請(qǐng)參見(jiàn) setLogLevel 接口的說(shuō)明
tim.setLogLevel(0); // 普通級(jí)別,日志量較多,接入時(shí)建議使用
// tim.setLogLevel(1); // release級(jí)別,SDK 輸出關(guān)鍵信息,生產(chǎn)環(huán)境時(shí)建議使用
// 將騰訊云對(duì)象存儲(chǔ)服務(wù) SDK (以下簡(jiǎn)稱 COS SDK)注冊(cè)為插件,IM SDK 發(fā)送文件、圖片等消息時(shí),需要用到騰訊云的 COS 服務(wù)
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
// 監(jiān)聽(tīng)事件 收到離線消息和會(huì)話列表同步完畢通知
tim.on(TIM.EVENT.SDK_READY, onReadyStateUpdate, this)
// 收到SDK進(jìn)入not ready狀態(tài)通知,此時(shí)SDK無(wú)法正常工作
tim.on(TIM.EVENT.SDK_NOT_READY, onReadyStateUpdate, this)
// 收到被踢下線通知
tim.on(TIM.EVENT.KICKED_OUT, kickOut, this)
// 出錯(cuò)統(tǒng)一處理
tim.on(TIM.EVENT.ERROR, onError, this)
// 收到推送的消息,遍歷event.data獲取消息列表數(shù)據(jù)并渲染到頁(yè)面
tim.on(TIM.EVENT.MESSAGE_RECEIVED, messageReceived, this)
// 更新會(huì)話列表
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)絡(luò)狀態(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ù),被踢下線之后需要設(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)絡(luò)錯(cuò)誤不彈toast && sdk未初始化完全報(bào)錯(cuò)
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)絡(luò)', duration: 2000 }
case TIM.TYPES.NET_STATE_CONNECTING:
return { title: '當(dāng)前網(wǎng)絡(luò)不穩(wěn)定', duration: 2000 }
case TIM.TYPES.NET_STATE_DISCONNECTED:
return { title: '當(dāng)前網(wǎng)絡(luò)不可用', duration: 2000 }
default:
return ''
}
}
//網(wǎng)絡(luò)狀態(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,'首頁(yè)信息')
if (videoCustom.version === 3) {
switch (videoCustom.action) {
// 對(duì)方呼叫我
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
// 對(duì)方取消
case 1:
wx.navigateBack({
delta: 1
})
break
// 對(duì)方拒絕
case 2:
$bus.$emit('onRefuse')
break
// 對(duì)方不接1min
case 3:
wx.navigateBack({
delta: 1
})
break
// 對(duì)方接聽(tīng)
case 4:
$bus.$emit('onCall', videoCustom)
break
// 對(duì)方掛斷
case 5:
$bus.$emit('onClose')
break
// 對(duì)方正在通話中
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)
}
到此這篇關(guān)于vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊的文章就介紹到這了,更多相關(guān)vue騰訊TIM即時(shí)通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue柱狀進(jìn)度條圖像的完美實(shí)現(xiàn)方案
本文是對(duì)bar進(jìn)度條實(shí)現(xiàn)的2種方案進(jìn)行分享,第一種是很簡(jiǎn)單,純css的實(shí)現(xiàn),第二種是echart的實(shí)現(xiàn)。對(duì)vue柱狀進(jìn)度條圖像的實(shí)現(xiàn)方案,感興趣的朋友跟隨小編一起看看吧2019-08-08
使用mint-ui開(kāi)發(fā)項(xiàng)目的一些心得(分享)
下面小編就為大家?guī)?lái)一篇使用mint-ui開(kāi)發(fā)項(xiàng)目的一些心得(分享)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的,但是根據(jù)業(yè)務(wù)的不同,好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的,即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新,再次回到登錄也,驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn),感興趣的朋友一起看看吧2022-08-08
安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案
這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10

