前端vue2.0使用腾讯im的sdk实现简单的实时通讯demo(前置条件)

原创

已于 2022-11-26 12:03:07 修改 · 3.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #node.js

于 2022-11-13 17:32:12 首次发布

本文档详细介绍了如何在Vue项目中集成腾讯IM SDK，包括创建IM实例、注册上传插件、封装常用方法，以及在组件中使用这些方法进行登录、获取消息、发送消息等操作。通过这个过程，你可以实现一个基本的聊天功能应用。

1.安装腾讯im

根据im官网链接: 集成 SDK（Web & 小程序 & uni-app）和SDK文档链接: 即时通信 IM SDK
获取adkappid和生成配置可自行百度或参考：这里

我这里使用 npm引入的方式。

// IM Web SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save

为了方便调用，我在根目录创建一个tim文件夹，首先在 index.js中实现im实例的创建和插件的注册。

import tim from './tim'
import TIMUploadPlugin from "tim-upload-plugin";
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'; // 使用前请将 IM SDK 升级到v2.24.0或更高版本
export default {
   
   
  install(app, timOptions){
   
   
    // 创建及时通讯实例
    tim.create(timOptions)
    // 注册腾讯云即时通信 IM 上传插件，即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件，将文件上传到腾讯云对象存储
    tim.registerPlugin({
   
   'tim-upload-plugin': TIMUploadPlugin})
    // 注册腾讯云即时通信 IM 本地审核插件
    tim.registerPlugin({
   
   'tim-profanity-filter-plugin': TIMProfanityFilterPlugin})
    // 添加腾讯tim服务实例到Vue实例
    app.prototype.$tim = tim.txTim
  }
}

因为im有会话常量和监听事件常量及其方法（具体看SDK文档），且方法我们还得根据业务进行封装，所以我将im实例和封装的方法集成在一个对象里添加到vue实例中，因此在tim.js中：

import TIM from 'tim-js-sdk';
import * as utils from './utils'
// 空实例对象
let tim = {
   
   }
// 创建tim初始化方法
tim.create = (timOptions) => {
   
   
  //创建实例
  tim.txIm = TIM.create({
   
    SDKAppID: timOptions.SDKAppID })
  //输出等级
  tim.txIm.setLogLevel(timOptions.logLevel)
  // TIM websocket监听事件常量
  tim.txIm.EVENT = TIM.EVENT
  // TIM 会话类型常量
  tim.txIm.TYPES = TIM.TYPES
  // 集成工具包
  tim.Utils = utils
}
// 创建tim插件注册方法
tim.registerPlugin = (options)=>{
   
   
  tim.txTim.registerPlugin(options);
}
export default tim;

在utils.js中写上需要的方法，因为是简单demo，我只封装了基础的几个

import tim from './tim.js';
//登录
export function imLogin(userID,userSig

最低0.47元/天解锁文章