1.安装依赖包
"cos-wx-sdk-v5": "^1.0.10",
"tim-wx-sdk": "^2.16.1"
2.界面资源集成
2.1界面和组件
复制 tim 到src 下,和pages 同目录下,作为子包引入
2.2 注入服务
/**
* 初始化TIM
*/
initTIM(){
uni.$TUIKit = TIM.create({
SDKAppID: '1你的tim appid'
})
uni.$TUIKitEvent =TIM.EVENT
},
2.2 增加路由信息
pages.json
"subPackages": [
{
"root": "TIM",
"pages": [
{
"path": "pages/Conversation/conversation",
"style": {
"navigationBarTitleText": "会话列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/Chat/chat",
"style": {
"navigationBarTitleText": "会话",
"navigationStyle": "custom"
}
},
{
"path": "pages/TUI-Conversation/create-conversation/create",
"style": {
"navigationBarTitleText": "发起会话",
"navigationStyle": "custom"
}
}
]
}
],
2.4 main,js
// 腾讯TIM 即时通讯
// 全局mixins,用于实现setData等功能';
import Mixin from './TIM/polyfill/mixins';
Vue.mixin(Mixin);
app 启动注入服务
登录IM
// 获取用户信息
GetInfo({ commit, state,dispatch }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
commit('SET_NAME', username)
......
// TIM 登录
// #ifdef MP-WEIXIN || APP-PLUS
dispatch("TIMLogin",res.user)
// #endif
resolve(res)
})
.catch(error => {
reject(error)
})
})
},
在 vuex 登录后注册信息
// 及时通讯登录
TIMLogin({},user){
// 更新时调用
if(uni.$TUIKit.SDK_READY){
uni.$TUIKit.updateMyProfile({
nick: user.nickName,
avatar: user.avatar||'',
}).then(res=> {
console.log('TIM 更新资料成功',res.data);
}).catch(err=> {
console.warn('TIM 更新资料失败1:', err);
});
return
}
console.info('TIM-Login 开始',user)
let sig = genTestUserSig(user.memberId)
uni.$TUIKit.login({userID: user.memberId, userSig: sig.userSig})
.then(imResponse=> {
console.log('TIM登录成功',imResponse.data);
})
.catch(imError=>{
console.warn('TIM登录失败:', imError);
});
// 登录成功后更新个人资料
uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY , e=>{
uni.$TUIKit.SDK_READY = true // 记录状态
uni.$TUIKit.updateMyProfile({
nick: user.nickName,
avatar: user.avatar||'',
}).then(res=> {
console.log('TIM 更新资料成功',res.data);
}).catch(err=> {
console.warn('TIM 更新资料失败2:', err);
});
});
},
事件
import TIM from 'tim-js-sdk';
// import TIM from 'tim-wx-sdk'; // 微信小程序环境请取消本行注释,并注释掉 import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin'; // 使用前请将 IM SDK 升级到v2.9.2或更高版本
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'; // 使用前请将 IM SDK 升级到v2.24.0或更高版本
// 创建 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 输出关键信息,生产环境时建议使用
// 注册腾讯云即时通信 IM 上传插件,即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件,将文件上传到腾讯云对象存储
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
// 注册腾讯云即时通信 IM 本地审核插件
tim.registerPlugin({'tim-profanity-filter-plugin': TIMProfanityFilterPlugin});
// 监听事件,如:
tim.on(TIM.EVENT.SDK_READY, function(event) {
// 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
// event.name - TIM.EVENT.SDK_READY
});
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
// 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
// event.name - TIM.EVENT.MESSAGE_RECEIVED
// event.data - 存储 Message 对象的数组 - [Message]
});
tim.on(TIM.EVENT.MESSAGE_MODIFIED, function(event) {
// 收到消息被第三方回调修改的通知,消息发送方可通过遍历 event.data 获取消息列表数据并更新页面上同 ID 消息的内容(v2.12.1起支持)
// event.name - TIM.EVENT.MESSAGE_MODIFIED
// event.data - 存储被第三方回调修改过的 Message 对象的数组 - [Message]
});
tim.on(TIM.EVENT.MESSAGE_REVOKED, function(event) {
// 收到消息被撤回的通知。使用前需要将SDK版本升级至v2.4.0或更高版本
// event.name - TIM.EVENT.MESSAGE_REVOKED
// event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
});
tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, function(event) {
// SDK 收到对端已读消息的通知,即已读回执。使用前需要将SDK版本升级至v2.7.0或更高版本。仅支持单聊会话
// event.name - TIM.EVENT.MESSAGE_READ_BY_PEER
// event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
});
tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, function(event) {
// 收到会话列表更新通知,可通过遍历 event.data 获取会话列表数据并渲染到页面
// event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
// event.data - 存储 Conversation 对象的数组 - [Conversation]
});
tim.on(TIM.EVENT.GROUP_LIST_UPDATED, function(event) {
// 收到群组列表更新通知,可通过遍历 event.data 获取群组列表数据并渲染到页面
// event.name - TIM.EVENT.GROUP_LIST_UPDATED
// event.data - 存储 Group 对象的数组 - [Group]
});
tim.on(TIM.EVENT.PROFILE_UPDATED, function(event) {
// 收到自己或好友的资料变更通知
// event.name - TIM.EVENT.PROFILE_UPDATED
// event.data - 存储 Profile 对象的数组 - [Profile]
});
tim.on(TIM.EVENT.BLACKLIST_UPDATED, function(event) {
// 收到黑名单列表更新通知
// event.name - TIM.EVENT.BLACKLIST_UPDATED
// event.data - 存储 userID 的数组 - [userID]
});
tim.on(TIM.EVENT.ERROR, function(event) {
// 收到 SDK 发生错误通知,可以获取错误码和错误信息
// event.name - TIM.EVENT.ERROR
// event.data.code - 错误码
// event.data.message - 错误信息
});
tim.on(TIM.EVENT.SDK_NOT_READY, function(event) {
// 收到 SDK 进入 not ready 状态通知,此时 SDK 无法正常工作
// event.name - TIM.EVENT.SDK_NOT_READY
});
tim.on(TIM.EVENT.KICKED_OUT, function(event) {
// 收到被踢下线通知
// event.name - TIM.EVENT.KICKED_OUT
// event.data.type - 被踢下线的原因,例如 :
// - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
// - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
// - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢(v2.4.0起支持)。
});
tim.on(TIM.EVENT.NET_STATE_CHANGE, function(event) {
// 网络状态发生改变(v2.5.0 起支持)
// event.name - TIM.EVENT.NET_STATE_CHANGE
// event.data.state 当前网络状态,枚举值及说明如下:
// - TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
// - TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动,SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
// - TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试,若用户网络恢复,SDK 会自动同步消息
});
tim.on(TIM.EVENT.FRIEND_LIST_UPDATED, function(event) {
// 收到好友列表更新通知(v2.13.0起支持)
// event.name - TIM.EVENT.FRIEND_LIST_UPDATED
// event.data - 存储 Friend 对象的数组 - [Friend]
});
tim.on(TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED, function(event) {
// 收到好友申请列表更新通知(v2.13.0起支持)
// event.name - TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED
// friendApplicationList - 好友申请列表 - [FriendApplication]
// unreadCount - 好友申请的未读数
// const { friendApplicationList, unreadCount } = event.data;
// 发送给我的好友申请(即别人申请加我为好友)
// const applicationSentToMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TIM.TYPES.SNS_APPLICATION_SENT_TO_ME);
// 我发送出去的好友申请(即我申请加别人为好友)
// const applicationSentByMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TIM.TYPES.SNS_APPLICATION_SENT_BY_ME);
});
tim.on(TIM.EVENT.FRIEND_GROUP_LIST_UPDATED, function(event) {
// 收到好友分组列表更新通知(v2.13.0起支持)
// event.name - TIM.EVENT.FRIEND_GROUP_LIST_UPDATED
// event.data - 存储 FriendGroup 对象的数组 - [FriendGroup]
});
// 开始登录
tim.login({userID: 'your userID', userSig: 'your userSig'});