The JavaScript SDK is an npm package, which is designed for seamless integration of chat functionality into your application. It provides an easy way to interact with chat APIs, allowing you to perform actions such as sending messages, creating groups, pinning conversations, and updating personal avatars. Written in vanilla JavaScript, it is framework-agnostic, meaning it can be used with any frontend framework like Vue, React, React Native, uni-app, Angular, and more. Prior to reviewing the Chat API documentation, we suggest taking a look at the tutorials and sample apps available.
This guide provides a quick introduction to the TencentCloudChat API, enabling you to quickly grasp its functionality. The API is highly flexible and empowers you to create various types of chat or messaging applications. Initialize
Let’s get started by initializing the chat instance and listening on events.
import TencentCloudChat from '@tencentcloud/chat';
import TIMUploadPlugin from 'tim-upload-plugin';
import NetInfo from '@react-native-community/netinfo';
let options = {
SDKAppID: 0
};
let chat = TencentCloudChat.create(options);
chat.setLogLevel(0);
chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
chat.registerPlugin({'chat-network-monitor': NetInfo});
let onMessageReceived = function(event) {
};
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
And then, Log in to Chat.
await chat.login({userID: 'your userID', userSig: 'your userSig'});
Messages
Let’s continue by sending your first message to "userB"(Assuming "userB" has already logged into the chat).
let message = chat.createTextMessage({
to: 'userB',
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: {
text: 'Hello World!'
},
});
await chat.sendMessage(message);
Conversations
If the chat with "userB" is important to you and you need to place it at the top of the conversation list, you can use pinConversation
.
await chat.pinConversation({ conversationID: 'C2CuserB', isPinned: true });
Profiles
If you want to change your avatar, you can use updateMyProfile
.
await chat.updateMyProfile({
avatar: 'http(s)://url/to/image.jpg',
});
Groups
If you want to create a group chat, for example, to discuss the sales plan for the next quarter with subordinates and colleagues, you can use createGroup
.
await chat.createGroup({
type: TencentCloudChat.TYPES.GRP_WORK,
name: 'Sales Plan For The Next Quarter',
memberList: [{
userID: 'lindal',
}, {
userID: 'denny',
}]
});
Following & Followers
Now live streaming and short videos are very popular. If you want to follow a certain celebrity, you can use followUser
.
await chat.followUser(['celebrity1', 'celebrity2', 'celebrity3']);
await chat.getMyFollowersList();
Want to watch the live streaming and post some interesting comments? You can use joinGroup
to join a live group and then use createTextMessage
to create a message and then use 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);
Conclusion
Since you now have a grasp of the fundamental components required for a fully operational chat integration, let's proceed to the subsequent sections of the documentation. In these parts, we will explore the specifics of each API endpoint in greater depth.
Was this page helpful?