网站建设和软件开发,网站建设列入什么会计科目,南昌画册设计公司,男做直播网站目录
初始化sdk
功能描述
初始化
准备 SDKAppID
调用初始化接口 监听事件
发送消息
创建消息
创建文本消息
登录登出
功能描述
登录
登出
销毁
登录设置
获取会话列表
功能描述
获取会话列表
获取全量的会话列表 历史消息
功能描述
拉取消息列表
分页拉取…目录
初始化sdk
功能描述
初始化
准备 SDKAppID
调用初始化接口 监听事件
发送消息
创建消息
创建文本消息
登录登出
功能描述
登录
登出
销毁
登录设置
获取会话列表
功能描述
获取会话列表
获取全量的会话列表 历史消息
功能描述
拉取消息列表
分页拉取指定会话的消息列表
根据指定的消息 sequence 或消息时间跳拉会话的消息列表 接收消息
功能描述
监听事件
取消监听事件 总结 初始化sdk
功能描述
在使用 IM SDK 的各项功能前必须先进行初始化。
初始化
初始化 SDK 需要操作以下步骤
准备 SDKAppID。调用 TIM.create 初始化 SDK。添加 SDK 事件监听器。
下面我们将分步骤依次为您详细讲解。
准备 SDKAppID
您必须拥有正确的 SDKAppID才能进行初始化。 SDKAppID 是腾讯云 IM 服务区分客户帐号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的不能互通。 您可以在 即时通信 IM 控制台 查看所有的 SDKAppID单击 创建新应用可以创建新的 SDKAppID。 调用初始化接口
操作完上述步骤后您可以调用 TIM.create 初始化 SDK。
接口
TIM.create(options);
参数 options 为 Object 类型包含的属性值如下
NameTypeDescriptionSDKAppIDNumber即时通信 IM 应用的 SDKAppIDpublic tim: ChatSDK | undefinedprivate initTimSdk(SDKAppID: number) {let options {SDKAppID,// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID};// 创建 SDK 实例TIM.create()方法对于同一个 SDKAppID 只会返回同一份实例let tim TIM.create(options); // SDK 实例通常用 tim 表示// 设置 SDK 日志输出级别详细分级请参见 setLogLevel https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明/atim.setLogLevel(0); // 普通级别日志量较多接入时建议使用// tim.setLogLevel(1); // release 级别SDK 输出关键信息生产环境时建议使用// 注册腾讯云即时通信 IM 上传插件tim.registerPlugin({ tim-upload-plugin: TIMUploadPlugin })this.tim tim} 监听事件
SDK 进入 ready 状态时触发接入侧监听此事件然后可调用 SDK 发送消息等 API使用 SDK 的各项功能
// 监听sdk准备完成的事件private bindTIMEvent() {this.tim?.on(TIM.EVENT.SDK_READY, this.handleSDKReady, this)} SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息接入侧可通过遍历 event.data 获取消息列表数据并渲染到页面 private handleSDKReady () {console.log(sdk准备完成);this.onReady()console.log(执行);this.tim?.on(TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived, this)}private handleMessageReceived (event: TextMessageEvent) {console.log(接收到消息, event);this.messageReceived(event)}public messageReceived (event: TextMessageEvent) { }
发送消息
创建消息
创建文本消息
创建文本消息的接口此接口返回一个消息实例可以在需要发送文本消息时调用 发送消息 接口发送消息实例。
接口
tim.createTextMessage(options);
参数
参数 options 为 Object 类型包含的属性值如下
NameTypeDefaultDescriptiontoString-消息接收方的 userID 或 groupIDconversationTypeString-会话类型取值TIM.TYPES.CONV_C2C端到端会话或TIM.TYPES.CONV_GROUP群组会话priorityStringTIM.TYPES.MSG_PRIORITY_NORMAL消息优先级payloadObject-消息内容的容器cloudCustomDataString消息自定义数据云端保存会发送到对端程序卸载重装后还能拉取到v2.10.2起支持
payload 的描述如下
NameTypeDescriptiontextString消息文本内容
返回值
消息实例 Message。
示例 private getMessageOptions (userID: string, payload: ITextPayload) {return this.tim?.createTextMessage({to: userID,conversationType: TIM.TYPES.CONV_C2C,// 消息优先级用于群聊v2.4.2起支持。如果某个群的消息超过了频率限制后台会优先下发高优先级的消息详细请参考https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)// 支持的枚举值TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL默认, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,payload,// v2.20.0起支持C2C消息已读回执功能如果您发消息需要已读回执需购买旗舰版套餐并且创建消息时将 needReadReceipt 设置为 trueneedReadReceipt: true// 消息自定义数据云端保存会发送到对端程序卸载重装后还能拉取到v2.10.2起支持// cloudCustomData: your cloud custom data})}public sendMessage async (userID: string, payload: ITextPayload) {// 创建消息const messOption this.getMessageOptions(userID, payload)await this.tim?.sendMessage(messOption!)console.log(发送成功);}public sendMessage async (userID: string, payload: ITextPayload) {// 创建消息const messOption this.getMessageOptions(userID, payload)await this.tim?.sendMessage(messOption!)console.log(发送成功);}
返回 消息实例 Message。
登录登出 功能描述
用户登录 IM SDK 才能正常收发消息登录需要用户提供 UserID、UserSig 等信息具体含义请参见 登录鉴权。
登录 注意 登录成功需等待 sdk 处于 ready 状态后监听事件 TIM.EVENT.SDK_READY才能调用 sendMessage 等需要鉴权的接口。如需支持多实例登录允许在多个网页中同时登录同一帐号请登录 即时通信 IM 控制台找到相应 SDKAppID选择应用配置功能配置登录与消息登录设置Web 端可同时在线个数配置实例个数。配置将在5分钟内生效。接口
tim.login(options);
参数
参数 options 为 Object 类型包含的属性值如下
名称类型描述userIDString用户 ID。userSigString用户登录即时通信 IM 的密码其本质是对 UserID 等信息加密后得到的密文。 具体生成方法请参见 生成 UserSig。
返回值
Promise 对象。
示例 public timLogin async (options: TIMCoreLoginParams) {//第一步登录sdkawait this.tim?.login(options)// 持久化相关密钥localStorage.setItem(TIMCoreLoginParams, JSON.stringify(options))this.userID options.userIDthis.bindTIMEvent()}
实例生成后缓存登录态 private persistedLogin () {console.log(缓存);const TIMCoreLoginParams JSON.parse(localStorage.getItem(TIMCoreLoginParams) || {})if (TIMCoreLoginParams.userID) {console.log(存在登录);this.timLogin(TIMCoreLoginParams)}} 登出
登出即时通信 IM通常在切换帐号的时候调用清除登录态以及内存中的所有数据。 注意 调用此接口的实例会发布 SDK_NOT_READY 事件此时该实例下线无法收、发消息。如果您在即时通信 IM 控制台配置的“Web 端实例同时在线个数”大于 1且同一帐号登录了a1和a2两个实例含小程序端当执行a1.logout()后a1会下线无法收、发消息。而a2实例不会受影响。多实例被踢基于第 2 点如果“Web 端实例同时在线个数”配置为 2且您的某一帐号已经登录了 a1a2两个实例当使用此帐号成功登录第三个实例a3时a1或a2中的一个实例会被踢下线通常是最先处在登录态的实例会触发这种情况称之为“多实例被踢”。假设a1实例被踢下线a1实例内部会执行登出流程然后抛出KICKED_OUT事件接入侧可以监听此事件并在触发时跳转到登录页。此时a1实例下线而a2、a3实例可以正常运行。接口
tim.logout();
参数
无
返回值
Promise 对象。
示例
let promise tim.logout();
promise.then(function(imResponse) {console.log(imResponse.data); // 登出成功
}).catch(function(imError) {console.warn(logout error:, imError);
});
销毁
销毁 SDK 实例包括登出断开长连接并释放所有资源。
接口
tim.destroy();
参数
无
返回值
Promise 对象。
示例
tim.destroy().then(() {console.log(sdk destroyed);
});
关闭监听 public unBindTIMEvent () {this.tim?.off(TIM.EVENT.MESSAGE_RECEIVED, () { })this.tim?.off(TIM.EVENT.SDK_READY, () { })} 登录设置
默认情况下不支持多实例登录即如果此帐号已在其他页面登录若继续在当前页面登录成功有可能会将其他页面踢下线。用户被踢下线时会触发事件TIM.EVENT.KICKED_OUT用户可在监听到事件后做相应处理。示例如下
let onKickedOut function (event) {console.log(event.data.type);// TIM.TYPES.KICKED_OUT_MULT_ACCOUNT(Web 端同一帐号多页面登录被踢)// TIM.TYPES.KICKED_OUT_MULT_DEVICE(同一帐号多端登录被踢)// TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED(签名过期)// TIM.TYPES.KICKED_OUT_REST_API(REST API kick 接口踢出。v2.20.0起支持)
};
tim.on(TIM.EVENT.KICKED_OUT, onKickedOut);
获取会话列表
功能描述
用户在登录 App 后可以像微信或 QQ 那样展示最近会话列表方便找到目标会话。 会话列表如下图所示 会话列表功能主要分为获取会话列表、监听会话列表更新事件。核心数据结构 Conversation。
获取会话列表
接入侧可通过调用 getConversationList 接口主动获取会话列表。
获取全量的会话列表 // 获取会话列表async getSessionList() {console.log(aaaa);const { data: { conversationList } } await this.timeCore.tim?.getConversationList()this.conversationList conversationListconsole.log(this.conversationList, 数据);// 他没有回话并且不是客服if (conversationList.length 0 this.timeCore.userID ! admin) {this.conversationList.push({lastMessage: {},userProfile: {userID: admin,} as Profile})}const userId this.conversationList[0].userProfile?.userIDconsole.log(conversationList[0], --------);if (userId) {this.selectedKeys [userId]this.getMessageHistoryList(userId)}}, 历史消息
功能描述
SDK 既支持分页续拉消息列表也支持根据指定的消息 sequence 或消息时间跳拉消息列表。
云端存储的历史消息有存储时长的限制
体验版免费存储 7 天不支持延长专业版免费存储 7 天支持延长旗舰版免费存储 30 天支持延长说明 延长历史消息存储时长是增值服务您可以登录 即时通信 IM 控制台 修改相关配置具体计费说明请参加 增值服务资费 。富媒体消息图片、文件、语音等对应的文件存储时长与历史消息存储时长保持一致。拉取消息列表
分页拉取指定会话的消息列表
分页拉取指定会话的消息列表的接口当用户进入会话首次渲染消息列表或者用户“下拉查看更多消息”时需调用该接口。 注意 该接口可用于拉取历史消息每次调用 SDK 最多返回20条消息。 接口
tim.getMessageList(options);
参数
参数 options 为 Object 类型包含的属性值如下
名称类型描述conversationIDString会话 ID。会话 ID 组成方式 C2C${userID}单聊GROUP${groupID}群聊GROUP${topicID}话题v2.19.1 起支持TIM#SYSTEM系统通知会话nextReqMessageIDString | undefined用于分页续拉的消息 ID。第一次拉取时该字段不要填值续拉时填入上次调用 getMessageList 接口返回的该字段的值。
返回值
Promise 对象。
示例 async getMessageHistoryList(userId: string) {const data await this.timeCore.tim?.getMessageList({ conversationID: C2C${userId} })this.historMessage data.data.messageListconsole.log(data, 我是历史记录);}
// 下拉查看更多消息
let promise tim.getMessageList({conversationID: C2Ctest, nextReqMessageID});
promise.then(function(imResponse) {const messageList imResponse.data.messageList; // 消息列表。const nextReqMessageID imResponse.data.nextReqMessageID; // 用于续拉分页续拉时需传入该字段。const isCompleted imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
});
根据指定的消息 sequence 或消息时间跳拉会话的消息列表
根据指定的消息 sequence 或 消息时间拉取会话的消息列表的接口。 注意 v2.20.0起支持。 接口
tim.getMessageListHopping(options);
参数
参数 options 为 Object 类型包含的属性值如下
名称类型描述conversationIDString会话 ID。会话 ID 组成方式 C2C${userID}单聊GROUP${groupID}群聊GROUP${topicID}话题v2.19.1 起支持sequenceNumber | undefined用于拉群组会话漫游消息的起始 sequence。timeNumber | undefined消息的服务端时间用于拉 C2C 会话漫游消息的起始时间。directionNumber消息拉取方向默认 0。 0 向上拉拉更旧的消息1 向下拉拉更新的消息countNumber | undefined需要拉取的消息数量默认值和最大值为15即一次拉取至多返回15条消息。
返回值
Promise 对象。
示例
// 根据 sequence 拉群漫游消息direction 0 向上拉拉更旧的消息direction 1 向下拉拉更新的消息
let promise tim.getMessageListHopping({conversationID: GROUPtest, sequence: xxx, count: 15, direction: 0});
promise.then(function(imResponse) {const messageList imResponse.data.messageList; // 消息列表。
});
// 根据时间拉 C2C 会话漫游消息direction 0 向上拉拉更旧的消息direction 1 向下拉拉更新的消息
let promise tim.getMessageListHopping({conversationID: C2Ctest, time: xxx, count: 15, direction: 0});
promise.then(function(imResponse) {const messageList imResponse.data.messageList; // 消息列表。
}); 接收消息
功能描述
接收消息需要通过事件监听实现。
监听事件 注意 请在调用 login 接口前调用此接口监听事件避免漏掉 SDK 派发的事件。 接口
tim.on(eventName, handler, context);
参数
名称类型描述eventNameString事件名称。所有的事件名称都存放在 TIM.EVENT 变量中如需要查看可以使用 console.log(TIM.EVENT) 把所有的事件显示出来。事件列表。handlerFunction处理事件的方法当事件触发时会调用此 handler 进行处理。context* | undefined期望 handler 执行时的上下文
返回值
无
示例
let onMessageReceived function(event) {// event.data - 存储 Message 对象的数组 - [Message]const messageList event.data;messageList.forEach((message) {if (message.type TIM.TYPES.MSG_TEXT) {// 文本消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.TextPayload} else if (message.type TIM.TYPES.MSG_IMAGE) {// 图片消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.ImagePayload} else if (message.type TIM.TYPES.MSG_SOUND) {// 音频消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.AudioPayload} else if (message.type TIM.TYPES.MSG_VIDEO) {// 视频消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.VideoPayload} else if (message.type TIM.TYPES.MSG_FILE) {// 文件消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.FilePayload} else if (message.type TIM.TYPES.MSG_CUSTOM) {// 自定义消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.CustomPayload} else if (message.type TIM.TYPES.MSG_MERGER) {// 合并消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.MergerPayload} else if (message.type TIM.TYPES.MSG_LOCATION) {// 地理位置消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.LocationPayload} else if (message.type TIM.TYPES.MSG_GRP_TIP) {// 群提示消息 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.GroupTipPayload} else if (message.type TIM.TYPES.MSG_GRP_SYS_NOTICE) {// 群系统通知 - https://web.sdk.qcloud.com/im/doc/zh-cn/Message.html#.GroupSystemNoticePayload}});
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
取消监听事件
接口
tim.off(eventName, handler, context, once);
参数
名称类型描述eventNameString事件名称。所有的事件名称都存放在 TIM.EVENT 变量中如需要查看可以使用 console.log(TIM.EVENT) 把所有的事件显示出来。事件列表。handlerFunction处理事件的方法当事件触发时会调用此 handler 进行处理。context* | undefined期望 handler 执行时的上下文onceBoolean | undefined是否只解绑一次
返回值
无
示例
let onMessageReceived function(event) {// 收到推送的单聊、群聊、群提示、群系统通知的新消息可通过遍历 event.data 获取消息列表数据并渲染到页面// event.name - TIM.EVENT.MESSAGE_RECEIVED// event.data - 存储 Message 对象的数组 - [Message]
};
tim.off(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived); 总结
引入pinia的聊天模块开始进行sdk初始化在登录完成后 完成tim的登录 并且持久化登录在顶层页面完成消息的接收也就是监听消息的变化每次变化通知一下pina事件的分法在页面收到action发过来的消息后要把消息主动放在当前聊天记录里面当选择一个新的联系人的时候要获取这个人的聊天信息每次发送消息要注意清空输入框并且把最新消息手动push到当前聊天数组中
import TIM, { ChatSDK } from tim-js-sdk;
import TIMUploadPlugin from tim-upload-plugin;
import { ChartDefineStoreOptions, ITextPayload, TextMessageEvent, TIMCoreLoginParams } from ./type;export default class TIMCore {public tim: ChatSDK | undefinedpublic userID constructor(props: ChartDefineStoreOptions) {this.initTimSdk(props.SDKAppID)}private initTimSdk(SDKAppID: number) {let options {SDKAppID,// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID};// 创建 SDK 实例TIM.create()方法对于同一个 SDKAppID 只会返回同一份实例let tim TIM.create(options); // SDK 实例通常用 tim 表示// 设置 SDK 日志输出级别详细分级请参见 setLogLevel https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明/atim.setLogLevel(0); // 普通级别日志量较多接入时建议使用// tim.setLogLevel(1); // release 级别SDK 输出关键信息生产环境时建议使用// 注册腾讯云即时通信 IM 上传插件tim.registerPlugin({ tim-upload-plugin: TIMUploadPlugin })this.tim timthis.persistedLogin()}public timLoginout () {//退出登录this.tim?.logout()}public unBindTIMEvent () {this.tim?.off(TIM.EVENT.MESSAGE_RECEIVED, () { })this.tim?.off(TIM.EVENT.SDK_READY, () { })}private persistedLogin () {console.log(缓存);const TIMCoreLoginParams JSON.parse(localStorage.getItem(TIMCoreLoginParams) || {})if (TIMCoreLoginParams.userID) {console.log(存在登录);this.timLogin(TIMCoreLoginParams)}}public timLogin async (options: TIMCoreLoginParams) {//第一步登录sdkawait this.tim?.login(options)// 持久化相关密钥localStorage.setItem(TIMCoreLoginParams, JSON.stringify(options))this.userID options.userIDthis.bindTIMEvent()}// 监听sdk准备完成的事件private bindTIMEvent() {this.tim?.on(TIM.EVENT.SDK_READY, this.handleSDKReady, this)}private handleSDKReady () {console.log(sdk准备完成);this.onReady()console.log(执行);this.tim?.on(TIM.EVENT.MESSAGE_RECEIVED, this.handleMessageReceived, this)}public onReady () {}private handleMessageReceived (event: TextMessageEvent) {console.log(接收到消息, event);// 接收到消息后 最好手动设置成已读this.tim?.setMessageRead({conversationID: event.data[0].conversationID})this.messageReceived(event)}// 对外暴露接受消息的方法public messageReceived (event: TextMessageEvent) { }// 创建对应消息类型private getMessageOptions (userID: string, payload: ITextPayload) {return this.tim?.createTextMessage({to: userID,conversationType: TIM.TYPES.CONV_C2C,// 消息优先级用于群聊v2.4.2起支持。如果某个群的消息超过了频率限制后台会优先下发高优先级的消息详细请参考https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)// 支持的枚举值TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL默认, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,payload,// v2.20.0起支持C2C消息已读回执功能如果您发消息需要已读回执需购买旗舰版套餐并且创建消息时将 needReadReceipt 设置为 trueneedReadReceipt: true// 消息自定义数据云端保存会发送到对端程序卸载重装后还能拉取到v2.10.2起支持// cloudCustomData: your cloud custom data})}public sendMessage async (userID: string, payload: ITextPayload) {// 创建消息const messOption this.getMessageOptions(userID, payload)await this.tim?.sendMessage(messOption!)console.log(发送成功);}
}
