ChatKitty
Search…
JavaScript Real-Time Messaging Quick Start
Integrate real-time chat into your React Native or Web application with the ChatKitty JavaScript SDK.

Installing the ChatKitty JS SDK

To use the ChatKitty JavaScript Chat SDK, you'll need to add the ChatKitty JavaScript SDK NPM package to your JavaScript front-end project:
NPM
Yarn
1
npm install chatkitty
Copied!
1
yarn add chatkitty
Copied!

Initializing the ChatKitty SDK with your API key

With your API key from the ChatKitty dashboard, you can initialize a new instance of the ChatKitty client:
1
import ChatKitty from 'chatkitty';
2
3
export const kitty = ChatKitty.getInstance('YOUR CHATKITTY API KEY HERE');
Copied!
With that, you can now use the ChatKitty SDK to begin building real-time chat features into your application.

Starting a guest user session

You must create a user session before a user can begin chatting with other users using ChatKitty. A user session represents a secure bi-directional connection with ChatKitty servers allowing users to send and receive messages in real-time.
Before you learn about authenticating users with ChatKitty, you can create a guest user session. You can start a user session by passing a unique username to your ChatKitty client startSession() method. A username is a string that uniquely identifies a user within your application.
1
const result = await kitty.startSession({
2
username: '[email protected]'
3
});
4
5
if (result.succeeded) {
6
const session = result.session; // Handle session
7
}
8
9
if (result.failed) {
10
const error = result.error; // Handle error
11
}
Copied!
We recommend you use uniquely hashed email addresses or phone numbers as usernames.

Creating a direct channel

With a ChatKitty connection established, you can create a direct channel to direct message (DM) another user.
1
const result = await kitty.createChannel({
2
type: 'DIRECT',
3
members: [{ username: '[email protected]' }],
4
});
5
6
if (result.succeeded) {
7
const channel = result.channel; // Handle channel
8
}
9
10
if (result.failed) {
11
const error = result.error; // Handle error
12
}
Copied!

Starting a chat session

Next, start a chat session using startChatSession() to listen to channel events.
1
const result = kitty.startChatSession({
2
channel: channel,
3
onReceivedMessage: (message) => {
4
// handle received messages
5
},
6
onReceivedKeystrokes: (keystrokes) => {
7
// handle received typing keystrokes
8
},
9
onTypingStarted: (user) => {
10
// handle user starts typing
11
},
12
onTypingStopped: (user) => {
13
// handle user stops typing
14
},
15
onParticipantEnteredChat: (user) => {
16
// handle user who just entered the chat
17
},
18
onParticipantLeftChat: (user) => {
19
// handle user who just left the chat
20
},
21
onParticipantPresenceChanged: (user) => {
22
// handle user who became online, offline, do not disturb, invisible
23
},
24
onMessageRead: (message, receipt) => {
25
// handle read receipt for message
26
},
27
onMessageUpdated: (message) => {
28
// handle message changes
29
},
30
onChannelUpdated: (channel) => {
31
// handle channel changes
32
},
33
});
34
35
if (result.succeeded) {
36
const session = result.session; // Handle session
37
}
38
39
if (result.failed) {
40
const error = result.error; // Handle error
41
}
Copied!

Receiving channel messages

ChatKitty lets you register a number of handler methods when starting a chat session. Perhaps most important is the onReceivedMessage() handler method. This method is called in real-time whenever a new message is sent by a channel member. Typically, this is where you included code to update your UI with the new message.
All handler methods are optional. You only needed to register handlers for chat events your application cares about.

Sending messages

To send a message to a channel with an active chat session, use sendMessage().

Sending a text message

To send a text message pass a string body to sendMessage().
1
const result = await kitty.sendMessage({
2
channel: channel,
3
body: 'Hello, world!',
4
});
5
6
if (result.succeeded) {
7
const message = result.message; // Handle message
8
}
9
10
if (result.failed) {
11
const error = result.error; // Handle error
12
}
Copied!

Sending a file message

To send a file message pass a JavaScript file or CreateChatKittyFileProperties as file to sendMessage(). Optionally, you can pass a ChatKittyUploadProgressListener to track file upload progress.
1
const result = await kitty.sendMessage({
2
channel: channel,
3
file: file,
4
progressListener: {
5
onStarted: () => {
6
// Handle file upload started
7
},
8
9
onProgress: (progress) => {
10
// Handle file upload process
11
},
12
13
onCompleted: (result) => {
14
// Handle file upload completed
15
},
16
},
17
});
18
19
if (result.succeeded) {
20
const message = result.message; // Handle message
21
}
22
23
if (result.failed) {
24
const error = result.error; // Handle error
25
}
Copied!

Getting channel message history

To fetch previous messages sent in a channel, use the getMessages() method.
1
const result = await kitty.getMessages({
2
channel: channel,
3
});
4
5
if (result.succeeded) {
6
const messages = result.paginator.items; // Handle messages
7
}
8
9
if (result.failed) {
10
const error = result.error; // Handle error
11
}
Copied!
Last modified 3d ago