在項目中集成騰訊云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

總結

以上是生活随笔為你收集整理的网页web腾讯云webIM开发记录（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。