tencent cloud

即时通信 IM

JavaScript

下载
聚焦模式
字号
最后更新时间: 2026-10-30 21:17:35
JavaScript V4 SDK 是一个 npm 包,旨在将聊天功能无缝集成到您的应用程序中。它提供了一种与聊天 API 交互的简单方法,允许您执行发送消息、创建群组、置顶对话和更新个人头像等操作。SDK 基于原生 JavaScript 编写,不依赖于任何特定前端框架。这意味着无论您的项目使用 Vue、React、Angular,还是跨平台框架 uni-app,都可以即插即用,快速构建您的聊天应用。
V3 用户升级提示:
如果您需要继续使用 V3 SDK,请参考 快速开始 JavaScript(V3)。
在查看 Chat API 文档之前,我们建议您先查看可用的教程和示例应用程序。
本指南简要介绍了 腾讯云 Chat API,让您能够快速掌握其功能。该 API 非常灵活,可让您创建各种类型的聊天或消息传递应用程序。

版本介绍

lite-chat
大小
功能概述
包名
精简版
200 KB
初始化,事件监听。
登录登出。
支持文本消息收发。
支持自定义消息收发(可自由定制发送内容)。
支持用户资料和用户状态。
@tencentcloud/lite-chat/basic
标准版(默认)
516 KB
包含精简版全部功能之外,还支持以下功能:
支持获取历史消息,消息操作,合并转发,已读回执,消息扩展等功能。
支持图片消息,视频消息,语音消息,文件消息收发功能。
支持云端消息(Message)搜索、用户(User)搜索、群组(Group)搜索、群成员搜索等功能。
支持会话列表,会话资料,会话操作等功能。
支持群组管理,群成员管理等功能。
支持社群。
支持直播群。
@tencentcloud/lite-chat
完整版
609 KB
包含标准版全部功能之外,还支持以下功能:
支持黑名单,好友管理,好友分组等功能。
支持关注和粉丝功能。
支持会话分组。
支持话题。
@tencentcloud/lite-chat/professional

关键概念

Chat:聊天功能 SDK。
SDKAppID: 控制台创建的 Chat 应用的唯一标识。
UserSig:用户鉴权凭证,由您的业务服务器生成。

前提条件

开通服务

一个有效的腾讯云账号及 Chat 应用。可参考 开通服务 从 控制台 获取以下信息:
SDKAppID:App 在控制台获取的 Chat 应用的 ID,为应用的唯一标识。
SDKSecretKey:应用的密钥。

浏览器支持

Edge 13 或更高版本
Chrome 16 或更高版本
Firefox 11 或更高版本
Safari 7 或更高版本
Opera 12.1 或更高版本
iOS Safari 7 或更高版本
Android Browser 4.4 (KitKat) 或更高版本

集成并引入 SDK

集成 SDK

在您的项目中使用 npm 安装相应依赖。
npm install @tencentcloud/lite-chat
// 若同步依赖过程中出现问题,请切换 npm 源后再次重试
npm config set registry http://r.cnpmjs.org/

引入 SDK

import TencentCloudChat from '@tencentcloud/lite-chat';

实现步骤

本节介绍如何实现登录和发送消息的逻辑。你可以先复制完整的示例代码进行快速体验,再按照实现步骤了解核心 API 的调用。

1. 配置用户鉴权

为了实现用户登录和鉴权,需要通过 SDKAPPID 和 SECRETKEY 生成测试用的 UserSig。
警告:
此方法仅适用于本地开发调试,请勿用于线上环境。线上环境应当在您的服务端生成 UserSig,详见 服务端生成 UserSig。
参考下列步骤来实现用户鉴权:
1. 复制 debug 文件夹。在实际生产环境中,你可以根据自己的业务逻辑进行调整。
2. 在 你的项目 下创建一个 debug 文件夹(例如 example/chat/debug),复制 debug 文件夹内容到该文件夹中。
3. 生成 userSig:
const { userSig } = genTestUserSig({
SDKAPPID: '你的 SDKAppID',
SECRETKEY: 'Chat 应用的密钥',
userID: '登录的 userID',
});

2. 初始化

import TencentCloudChat from '@tencentcloud/lite-chat';


let options = {
SDKAppID: 0 // 接入时需要将0替换为您的即时通信 Chat 应用的 SDKAppID
};

// 创建 SDK 实例
// `TencentCloudChat.create()` 方法对于同一个 `SDKAppID` 只会返回同一份实例
// SDK 实例通常用 chat 表示
let chat = TencentCloudChat.create(options);

// 设置 SDK 日志级别
// 0: 普通级别,日志量较多,接入时建议使用
// 1: release 级别,SDK 输出关键信息,生产环境时建议使用
chat.setLogLevel(0);
// chat.setLogLevel(1);

3. 用户登录

await chat.login({
userID: 'your userID',
userSig: 'your userSig', // 第一步配置用户鉴权生成的 userSig
});

4. 发送第一条消息

我们向“userB”发送第一条消息(假设“userB”已经登录 Chat)。
let message = chat.createTextMessage({
to: 'userB',
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: {
text: 'Hello World!'
},
});

await chat.sendMessage(message);

5. 更新头像

如果您想更改您的头像,则可以使用 updateMyProfile。
await chat.updateMyProfile({
avatar: 'http(s)://url/to/image.jpg',
});

6. 关注和粉丝

现在直播、短视频很流行,如果您想关注某个达人主播,可以使用 followUser。
说明:
使用 Following & Followers 相关 API,需要引入完整版。
await chat.followUser(['celebrity1', 'celebrity2', 'celebrity3']);

// 获取我的粉丝列表
await chat.getMyFollowersList();
想要观看直播时发表一些有趣的评论?您可以使用 joinGroup 加入直播组,然后使用 createTextMessage 创建消息,然后使用 sendMessage 发布它。
await chat.joinGroup({ groupID: 'group1' });

let message = chat.createTextMessage({
to: 'group1',
conversationType: TencentCloudChat.TYPES.CONV_GROUP,
payload: {
text: 'AMAZING!!!'
},
});

await chat.sendMessage(message);

下一步

您现在已经掌握了全面运行聊天集成所需的基本组件,可继续阅读后续部分以深入了解 API 的具体细节。

参考信息

联系我们

如果您在接入或使用过程有任何疑问或者建议,欢迎加入 Telegram 技术交流群组,或 联系我们 获取支持。


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈