上图
前言
我的项目须要做个客服性能，用户端小程序，客服人员web端，于是用到了腾讯的tim
筹备工作
在腾讯云官网上创立利用，获取到相应的SDKAppID和相应的秘钥信息
装置SDK
（1） web我的项目应用命令
// IM Web SDKnpm install tim-js-sdk --save// 发送图片、文件等音讯须要的 COS SDKnpm install cos-js-sdk-v5 --save（2） 小程序我的项目应用命令
// IM 小程序 SDKnpm install tim-wx-sdk --save// 发送图片、文件等音讯须要的 COS SDKnpm 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 = 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// 监听事件 收到离线音讯和会话列表同步结束告诉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)}最初
其余的代码不多做形容，间接看demo源码。
须要源码的能够看自己主页分割我