Skip to content
CCS Chat Docs

Migrate ccs-chat-notifications-client 0.x to 1.0.0

Goal

Section titled “Goal”

Upgrade your web app from ccs-chat-notifications-client 0.x to 1.0.0. The 1.0.0 client targets the Chat API that is scoped to a Context. One Chat token now serves every tenant and application the user belongs to, so the realtime client has to be told which one it listens in.

Prerequisites

Section titled “Prerequisites”
  • A web app on ccs-chat-notifications-client 0.x.
  • A getAccessToken that returns the user’s Chat token: aud is chat-api, scope chat:access, issued to your application’s client. See Get the Chat token in your app.
  • Your tenantId and applicationId.

What changed

Section titled “What changed”
0.x 1.0.0
new ChatNotificationsClient({ chatApiUrl, getAccessToken }) Also requires tenantId and applicationId.
GET /notifications/realtime-token?channelId=<id> GET /tenants/{tenant_id}/applications/{application_id}/notifications/realtime-token?conversation_id=<id>
Realtime-token response streamUrl stream_url (snake_case, like every Chat API field)
subscribeToChannel(id) and unsubscribeFromChannel(id) subscribeToConversation(id) and unsubscribeFromConversation(id), also in the Angular and React wrappers
camelCase event payloads (messageId, senderId, content, productId, …) The API’s snake_case payloads. They always carry tenant_id and application_id, plus conversation_id. message.created wraps the full message as event.message.
Events message.created, typing, presence.updated Adds message.updated, message.deleted, reaction.added, reaction.removed, member.added, member.removed, conversation.created, conversation.updated, conversation.deleted and conversation.access_revoked.
new ChatPushClient({ chatApiUrl, getAccessToken }) Also requires tenantId. Devices live at /tenants/{tenant_id}/notifications/push/devices.
VAPID key response publicKey public_key

The client handles the route changes itself. Only an app that calls the realtime-token or push routes directly has to change them.

Steps

Section titled “Steps”

  1. Upgrade the package. Install @central-code-station/ccs-chat-notifications-client 1.0.0 or later.

  2. Pass the context. Add tenantId and applicationId to every ChatNotificationsClient, and tenantId to every ChatPushClient. In the Angular and React wrappers, put them in the options object you already pass.

  3. Rename the subscribe calls. Use subscribeToConversation(id) and unsubscribeFromConversation(id).

  4. Update your event handlers. Read the snake_case fields. For message.created, destructure message and read message.body, message.conversation_id and message.sender. They are the same ChatMessage shape as in ccs-chat-user-client.

  5. Recreate the client when the context changes. Switching tenant or application means disconnecting and creating a new client for the new context. See Multi-tenant apps.

// 0.x
notifications.on('message.created', (e) => show(e.messageId, e.content));
// 1.0.0
notifications.on('message.created', ({ message }) => show(message.message_id, message.body));

The same wiring on 1.0.0:

after-migration.ts
import { ChatNotificationsClient } from '@central-code-station/ccs-chat-notifications-client';
import { ChatPushClient } from '@central-code-station/ccs-chat-notifications-client/push';


declare function getChatToken(): Promise<string>;


const chatApiUrl = 'https://chat.centralcodestation.com/api/v1';
const tenantId = 'fitness';
const applicationId = 'fitness-app';


// Realtime: tenantId and applicationId are now required.
export const live = new ChatNotificationsClient({ chatApiUrl, tenantId, applicationId, getAccessToken: getChatToken });


live.on('message.created', ({ message }) => {
  // snake_case payloads; message.created wraps the full message.
  console.log(message.conversation_id, message.sender?.display_name, message.body);
});
live.connect();


// subscribeToChannel became subscribeToConversation.
live.subscribeToConversation('6b1f4c7e-3c52-4a0a-9a39-7d2e2f1f8a10');


// Web push: tenantId is now required.
export const push = new ChatPushClient({ chatApiUrl, tenantId, getAccessToken: getChatToken });
export const registered = () => push.register();

Verify

Section titled “Verify”

Connect the client and send a message to the user from your backend. The message.created handler fires with a message whose tenant_id and application_id match your context, and connectionStateChange reports connected.

Troubleshooting

Section titled “Troubleshooting”
Symptom Cause and fix
TypeScript: tenantId or applicationId is missing They are required in 1.0.0.
Handlers receive undefined for messageId or content Payloads are snake_case now. Read message.message_id and message.body.
subscribeToChannel is not a function Renamed to subscribeToConversation.
The stream never connects The token is not a Chat token for your application’s context. See Troubleshooting.
Section titled “Related”