网页web腾讯云webIM开发记录(一)

在项目中集成腾讯云IMsdk
// IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install cos-js-sdk-v5 --save

编制im.js文件,对腾讯云sdk进行简单的封装,暴露接口

import TIM from ‘tim-js-sdk’ // 接入腾讯sdk
import COS from ‘cos-js-sdk-v5’ // 接入图片上传

const options = {
SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的SDKAppID
}
// 创建 SDK 实例,TIM.create()方法对于同一个 SDKAppID 只会返回同一份实例
const tim = TIM.create(options) // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
// tim.setLogLevel(0) // 普通级别,日志量较多,接入时建议使用
tim.setLogLevel(1) // release 级别,SDK 输出关键信息,生产环境时建议使用
// 注册 COS SDK 插件
tim.registerPlugin({ ‘cos-js-sdk’: COS }) // 继承接入图片上传
export default im

在vue中引入,打开main.js文件引入im.js接口

import webIM from ‘./assets/js/im.js’ // 引入腾讯IM

在vue继承webIM方法

Vue.prototype.webIM = webIM // 继承im方法

完成以上步骤就可以在vue项目中直接调用webIM方法

以登陆为例子:
this.webIM.login({ userID: ‘’, userSig: ‘’ })
.then(function (imResponse) {
console.log(imResponse.data) // 登录成功
}).catch(function (imError) {
console.warn(‘login error:’, imError) // 登录失败的相关信息
})

文档参考地址:
直播群简易文档
https://cloud.tencent.com/document/product/269/43002
IM聊天详细接口文档
https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html

猜你喜欢

转载自blog.csdn.net/qq_40895510/article/details/108572957