tencent cloud

Chat

JavaScript

Baixar
Modo Foco
Tamanho da Fonte
Última atualização: 2026-10-30 21:17:35
JavaScript V4 SDK is an npm package that enables seamless integration of chat functionality into your application. It offers a straightforward interface for interacting with the Chat API, allowing you to send messages, create groups, pin conversations, update user avatars, and more. The SDK is built with native JavaScript and is framework-agnostic, so you can use it in projects based on Vue, React, Angular, uni-app, or any other frontend or cross-platform framework. This flexibility lets you quickly add chat capabilities to your app.
V3 User Upgrade Notice:
If you prefer to continue using the V3 SDK, refer to Quick Start JavaScript(V3).
Before diving into the Chat API documentation, we recommend reviewing the tutorials and sample applications provided.
This guide gives a concise overview of the Tencent Cloud Chat API to help you quickly understand the core features. The API is highly flexible, supporting the creation of a wide range of chat and messaging applications.

Version Overview

Edition
Size
Feature Overview
Package Name
Lite Edition
200 KB
Initialization and event listening.
Login and logout.
Supports sending and receiving text messages.
Supports custom message sending and receiving (customizable content).
Supports user profile and user status.
@tencentcloud/lite-chat/basic
Standard Edition (Default)
516 KB
Includes all features of the Lite Edition, plus:
Supports retrieving historical messages, message operations, merged forwarding, read receipts, message extension, and more.
Supports sending and receiving image, video, audio, and file messages.
Supports cloud message (Message) search, user (User) search, group (Group) search, and group member search.
Supports conversation list, conversation profile, and conversation operations.
Supports group management and group member management.
Supports community.
Supports AVChatRoom.
@tencentcloud/lite-chat
Professional Edition
609 KB
Includes all features of the Standard Edition, plus:
Supports blacklist, friend management, friend grouping.
Supports following and followers.
Supports conversation grouping.
Supports topics.
@tencentcloud/lite-chat/professional

Key Concepts

Chat: Chat SDK functionality.
SDKAppID: Unique identifier for your Chat application, created in the console.
UserSig: User authentication token generated by your backend server.

Prerequisites

Activate the Service

You need a valid TRTC account and a Chat application. Obtain the following information from the console:
SDKAppID: The unique ID for your Chat application.
SDKSecretKey: The SecretKey for your application.

Browser Support

Edge 13 or later
Chrome 16 or later
Firefox 11 or later
Safari 7 or later
Opera 12.1 or later
iOS Safari 7 or later
Android Browser 4.4 (KitKat) or later

Integrate and Import the SDK

Install the SDK

Add the dependency to your project with npm.
npm install @tencentcloud/lite-chat
// If you experience issues syncing dependencies, try switching the npm registry and retry
npm config set registry http://r.cnpmjs.org/

Import the SDK

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

Implementation Steps

This section walks you through implementing user login and message sending. You can use the complete sample code for a quick start, then follow the steps below to learn the key API calls.

1. Configure User Authentication

To enable login and user authentication, you must generate a test UserSig using your SDKAPPID and SECRETKEY.
Warning:
This method is intended for local development and debugging only. Do NOT use it in production. In production environments, generate UserSig on your server. See Server-side UserSig Generation.
Follow these steps to implement user authentication:
1. Copy the debug folder. In production, adjust this according to your business requirements.
2. Create a debug folder in your project (e.g., example/chat/debug) and copy the contents of the debug folder into it.
3. Generate userSig:
const { userSig } = genTestUserSig({
SDKAPPID: 'your SDKAppID',
SECRETKEY: 'Chat application SecretKey',
userID: 'login userID',
});

2. Initialize the SDK

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

let options = {
SDKAppID: 0 // Replace 0 with your Chat application's SDKAppID
};

// Create SDK instance
// Calling TencentCloudChat.create() with the same SDKAppID returns the same instance
// The SDK instance is typically referenced as chat
let chat = TencentCloudChat.create(options);

// Set SDK log level
// 0: Development level, verbose logs, recommended during integration
// 1: Production level, outputs essential SDK information, recommended for live environments
chat.setLogLevel(0);
// chat.setLogLevel(1);

3. User Login

await chat.login({
userID: 'your userID',
userSig: 'your userSig', // userSig generated in step 1
});

4. Send Your First Message

Send a message to "userB" (assuming "userB" is already logged in to Chat).
let message = chat.createTextMessage({
to: 'userB',
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: {
text: 'Hello World!'
},
});

await chat.sendMessage(message);

5. Update the Avatar

To update your avatar, call updateMyProfile.
await chat.updateMyProfile({
avatar: 'http(s)://url/to/image.jpg',
});

6. Following and Followers

Live streaming and short videos are popular use cases. If you want to follow a celebrity streamer, use followUser.
Note:
To use Following & Followers APIs, you must import the professional edition.
await chat.followUser(['celebrity1', 'celebrity2', 'celebrity3']);

// Retrieve your followers list
await chat.getMyFollowersList();
Want to post comments during a live stream? Use joinGroup to join an AVChatRoom, then use createTextMessage to create a message and sendMessage to post it.
await chat.joinGroup({ groupID: 'group1' });

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

await chat.sendMessage(message);

Next Steps

You now have the essential components for a fully functional chat integration. Continue reading the next sections to learn more about each API.

Reference

Contact Us

If you have any questions or suggestions during integration or usage, join our Telegram technical group or contact us for support.

Ajuda e Suporte

Esta página foi útil?

comentários