关于前端:vue项目中集成腾讯TIM即时通讯

上图

前言

我的项目须要做个客服性能，用户端小程序，客服人员 web 端，于是用到了腾讯的 tim

筹备工作

1. 在腾讯云官网上创立利用，获取到相应的 SDKAppID 和相应的秘钥信息

   1. 装置 SDK

   （1）web 我的项目应用命令

// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等音讯须要的 COS SDK
npm install cos-js-sdk-v5 --save

（2）小程序我的项目应用命令

// IM 小程序 SDK
npm install tim-wx-sdk --save
// 发送图片、文件等音讯须要的 COS SDK
npm install cos-wx-sdk-v5 --save

1. 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 = 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, 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 源码。
须要源码的能够看自己主页分割我