@madlogic/chat-client v1.5.2
Madlogic Chat Client JS
@madlogic/chat-client is a JavaScript client for Madlogic Chat Service to build chat applications.
INSTALLATION
yarn add @madlogic/chat-client
BACKEND NODEJS
Initializing Chat client
import { ChatClient } from '@madlogic/chat-client';
const SERVER_CLIENT_CONFIG = {
workspace_name: 'TestApp',
workspace_secret: '#####',
server_url: 'https://chat.madlogic.nl',
};
// Initialize chat client
const serverClient = new ChatClient(SERVER_CLIENT_CONFIG);
Syncing/Updating user
When a user starts a chat conversation with another user both users need to be present in the Chat Service database. So you'll want to make sure that users are synced in advance.
const user = await serverClient.syncUser({
id: 'user_1',
email: 'user_1@app.domain',
first_name: 'Abc',
last_name: 'Xyz',
display_name: 'Abc Xyz',
picture: 'https://path.to/avatar.png',
metadata: {
custom_field: '...',
},
});
Generating user token
The backend creates a token for a user. You hand that token to the client side during login or registration. This token allows the client side to connect to the chat API for that user.
// Generate a token for the user with id 'user_1'
const token = await serverClient.generateUserToken('user_1', {
expires_in: '30 days',
});
Options:
expires_in
(optional): expressed in seconds or a string describing a time span vercel/msEg:
60
,"2 days"
,"10h"
,"7d"
. A numeric value is interpreted as a seconds count. If you use a string be sure you provide the time units (days, hours, etc), otherwise milliseconds unit is used by default ("120"
is equal to"120ms"
).
Remove a user
// Remove user with id 'user_1'
const response = await serverClient.removeUser('user_1');
Push notifications
Chat Service supports push for both Android and iOS through integration with Firebase Cloud Messaging.
const response = await serverClient.updateWorkspaceSettings({
fcm_config: {
service_account_key_base64: 'FCM_SERVICE_ACCOUNT_KEY_BASE64',
},
});
To encrypt a JSON file to Base64 string:
base64 ~/Downloads/fcm-service-account-key.json
JS APPLICATION (REACT/REACT NATIVE)
Initializing Chat client
import { ChatClient } from '@madlogic/chat-client';
// Initialize chat client
const chatClient = new ChatClient({
workspace_name: 'TestApp',
server_url: 'https://chat.madlogic.nl',
});
Connect user to Chat server
// Connect user
const user = await chatClient.connectUser('USER_TOKEN');
Query users
const filter = {};
const query = { page: 1, per_page: 20, sort_by: 'created_at', sort_order: 'desc' };
const result = await chatClient.queryUsers(filter, query);
console.log(result); // { total_count: 10, items: [...] }
Create channel
// Create TEAM channel
const channel = await chatClient.createTeamChannel({
name: 'channel-abc',
description: 'ABC Channel',
image: 'https://picsum.photos/300/200',
members: ['user_1'],
public: true,
});
// Create DM (Direct Message) channel
const channel = await chatClient.createDMChannel({
members: ['user_1'],
});
Get channel detail
const channel = chatClient.channel('channel-id');
const channelDetail = await channel.getDetail();
Query channels
const filter = {};
const query = { page: 1, per_page: 20, sort_by: 'last_message_at', sort_order: 'desc' };
const result = await chatClient.queryChannels(filter, query);
console.log(result); // { total_count: 10, items: [...] }
Update channel
const channel = chatClient.channel('channel-id');
const updated = await channel.update({
name: 'channel-abc',
description: 'ABC Channel',
image: 'https://picsum.photos/300/200',
});
Freeze / Unfreeze a channel
Freezing a channel will disallow sending new messages. Sending a message to a frozen channel will return an error.
const channel = chatClient.channel('channel-id');
// Freeze
await channel.update({ frozen: true });
// Unfreeze
await channel.update({ frozen: false });
Remove a channel
const channel = chatClient.channel('channel-id');
await channel.remove();
Query members
const filter = {};
const query = { page: 1, per_page: 20, sort_by: 'joined_at', sort_order: 'desc' };
const channel = chatClient.channel('channel-id');
const result = await channel.queryMembers(filter, query);
console.log(result); // { total_count: 10, items: [...] }
Add members
const channel = chatClient.channel('channel-id');
const result = await channel.addMembers(['user_1', 'user_2']);
Remove members
const channel = chatClient.channel('channel-id');
await channel.removeMembers(['user_1', 'user_2']);
Leave a channel
const channel = chatClient.channel('channel-id');
await channel.leave();
Query messages
const filter = {};
const query = { page: 1, per_page: 20, sort_by: 'sent_at', sort_order: 'desc' };
const channel = chatClient.channel('channel-id');
const result = await channel.queryMessages(filter, query);
console.log(result); // { total_count: 10, items: [...] }
Send message
const channel = chatClient.channel('channel-id');
// Send a regular message
channel.sendMessage({
text: 'Hello World!',
});
// Send message with attachments
channel.sendMessage({
text: 'Hello World!',
attachments: [
{
type: 'image',
title: 'Madlogic News',
thumb_url: 'https://path.to/thumb_url.png',
asset_url: 'https://path.to/asset_url.png',
},
],
});
Typing
const channel = chatClient.channel('channel-id');
// Start typing
channel.startTyping();
// Stop typing
channel.stopTyping();
Unread counts
const channel = chatClient.channel('channel-id');
// Count of unread messages for the current user on a channel
const count = await channel.countUnread();
console.log(count); // 12
// Mark all messages on a channel as read
await channel.markRead();
Events
You always receive these events. Examples are: message:new
, ws:connected
, ws:disconnected
,...
// Listen for a new message from all channels
chatClient.on('message:new', (newMessage) => {
console.log(newMessage);
});
// Listen for new message on a specific channel
chatClient.channel('channel-id').on('message:new', (newMessage) => {
console.log(newMessage);
});
// Listen for typing from all channels
chatClient.on('typing:start', (payload) => {
console.log(payload);
});
// Listen for typing from a specific channel
chatClient.channel('channel-id').on('typing:start', (payload) => {
console.log(payload);
});
Events:
ws:connected
ws:reconnected
ws:disconnected
ws:error
message:new
typing:start
typing:stop
user:profile
channel:update
Register a push device
const device = await chatClient.registerDevice('d93ud8...', 'iOS');
Unregister a push device
await chatClient.unregisterDevice('d93ud8...');
Upload attachment
const FILE = 'string | NodeJS.ReadableStream | Buffer | File';
const onUploadProgress = (e) => console.log(e);
const { url } = await chatClient.uploadAttachment(FILE, onUploadProgress);