Getting started with the Javascript SDK
The @knocklabs/client library is a low-level JavaScript SDK for interacting with Knock from the client side of your JS application. In this guide we'll show some of the main ways you can interact with the SDK:
Quick links
Getting started
To use this example, you'll need an account on Knock, as well as an in-app feed channel, with a workflow that produces in-app feed messages. You'll also need:
- A public API key for the Knock environment (set as
KNOCK_PUBLIC_API_KEY) - The channel ID for the in-app feed (set as
KNOCK_FEED_CHANNEL_ID)
Installing dependencies
1npm install @knocklabs/clientAuthenticating the current user
1import Knock from "@knocklabs/client";
2
3const knockClient = new Knock(process.env.KNOCK_PUBLIC_API_KEY);
4
5// Tell Knock to use the users id
6knockClient.authenticate(currentUser.id);Initialize a feed connection for the user
The Knock class exposes a Feed via the initialize method that can be used to connect the authenticated user to a Knock Feed Channel. Additionally, the Feed exposes a stateful store to build client-side feeds and other notification experiences.
1const knockFeed = knockClient.feeds.initialize(
2 process.env.KNOCK_FEED_CHANNEL_ID,
3);
4
5// Setup a real-time connection
6knockFeed.listenForUpdates();
7
8// Fetch items for the feed
9knockFeed.fetch();Marking feed item statuses
A feed instance supports marking items as seen, unseen, read, unread, archived, and unarchived:
1// Initialize the feed as in above examples
2const knockFeed = knockClient.feeds.initialize(
3 process.env.KNOCK_FEED_CHANNEL_ID,
4);
5
6// Mark one or more items as read
7knockFeed.markAsRead(feedItemOrItems);
8// Mark one or more items as seen
9knockFeed.markAsSeen(feedItemOrItems);
10// Mark one or more items as archived
11knockFeed.markAsArchived(feedItemOrItems);
12
13// Mark one or more items as unread
14knockFeed.markAsUnread(feedItemOrItems);
15// Mark one or more items as unseen
16knockFeed.markAsUnseen(feedItemOrItems);
17// Mark one or more items as unarchived
18knockFeed.markAsUnarchived(feedItemOrItems);Retrieving preferences for the user
You can use the JS SDK to retrieve the preferences for the authenticated user, which is useful to build in-app preference UIs.
1const preferences = await knockClient.preferences.get();Setting preferences for the user
Similar to retrieving preferences, the Knock class also allows you to set preferences directly in the client for the authenticated user.
1await knockClient.preferences.set({
2 channel_types: { email: true, sms: false },
3 workflows: {
4 "dinosaurs-loose": {
5 channel_types: { email: false, in_app_feed: true },
6 },
7 },
8});Automatically disconnecting sockets from inactive tabs
Optionally, you can configure the client to disconnect socket connections with inactive tabs after a brief delay. If the tab becomes active again, the socket will reconnect to continue receiving real-time updates.
1// Initialize the feed and configure the automatic disconnect settings
2const feedClient = knockClient.feeds.initialize(
3 process.env.KNOCK_FEED_CHANNEL_ID,
4 {
5 // Turn on the automatic connection manager
6 auto_manage_socket_connection: true,
7 // Optionally, customize the delay amount in milliseconds. Defaults to 2000ms or 2s
8 auto_manage_socket_connection_delay: 2500,
9 },
10);