当前位置: 首页 > 工具软件 > V-IM > 使用案例 >

im在vue的sdk集成和使用,实时更新消息列表

祁嘉言
2023-12-01

集成sdk根据im文档来进行操作

我们直接使用npm下载

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

在入口文件main.js中将im的两个实例对象进行应用

import TIM from 'tim-js-sdk';//这个就是im的实例
import COS from "cos-js-sdk-v5"//这个择情况而定使用
//let 出一个参数
let options= {
 SDKAppID: 这里填入你们在控制台申请的sdkappid, 
 }
创建一个实例对象
Vue.prototype.T=TIM.create(options)
Vue.prototype.TIM=TIM
Vue.prototype.COS=COS
//写到这咱们的配置项算是基本完成,接下来就是sdk的调用,和监听事件的使用

登录之前我们需要获取到用户的usersig这个一般由后端去im进行获取

	let userinfo={
	userID:''
	userSig:''
}
	localStorage.setItem('userinfo',userinfo)//存到本地缓存中,等需要的时候我们进行提取

登录im

//登录时我们提取用户信息
localStorage.getitem('userinfo')
//此处我们调用im实例中封装好的方法
this.T.login(userinfo).then(res=>{
console.log(res)
})
//此时我们登录成功了,但是如果在web页面用户刷新以后会更改登录状态,我使用的方法是重新登录一边,不知道大家有什么好方法,谢谢指教。
//此时登录成功会调用im的监听事件,我们将监听事件放进methods的方法中,在进入页面中调用
this.T.on(TIM.EVENT.SDK_READY, function(event) {
  console.log('登录成功了')
  // 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
  // event.name - TIM.EVENT.SDK_READY
}
//登录成功就会被打印
//实时更新也是调用监听事件同上
 类似资料: