Svelte

To make the most of this tutorial, you need:

1. A TalkJS account
2. A basic understanding of Svelte
3. A Svelte app to add TalkJS to

To get started, install TalkJS in your Svelte app:

1npm install talkjs --save

Then, import TalkJS into the component you want to use for chat:

1<script>
2  import Talk from 'talkjs';
3</script>

TalkJS is loaded asynchronously to improve the performance of your site. Before you can use it, make sure that TalkJS is fully loaded and ready to use. To do that, wait for the Talk.ready promise to resolve before making any calls to the TalkJS SDK.

1import { onMount } from 'svelte';
2
3onMount(async () => {
4  await Talk.ready;
5  // Safe to use the SDK here
6});

Talk.ready is a standard JavaScript promise, so you can call .then or await it at any point.

In TalkJS, a user is a person that uses your app. Typically, you would have one TalkJS user for each user in your own database. Each connection to TalkJS has to specify a current user to send messages as.

Usually, you would create users based on the data from your database. For this example, you'll hard-code one instead:

1// After `await Talk.ready`
2const currentUser = new Talk.User({
3  id: '1',
4  name: 'Henry Mill',
5  email: '[email protected]',
6  photoUrl: 'henry.jpeg',
7  welcomeMessage: 'Hello!',
8});

Remember, anything using the Talk API should only run after we await Talk.ready.

Next, create another user:

1// After `await Talk.ready`
2const otherUser = new Talk.User({
3  id: '2',
4  name: 'Jessica Wells',
5  email: '[email protected]',
6  photoUrl: 'jessica.jpeg',
7  welcomeMessage: 'Hello!',
8});

To synchronize data between a browser tab and TalkJS, you need to create a new connection, known as a session. The session stays open until the user navigates away from the page, and it automatically synchronizes data in both directions with the TalkJS servers.

To create a new session, you need your app ID and a user to send messages as, namely the current user. You can find YOUR_APP_ID on the Settings page of your TalkJS dashboard.

1onMount(async () => {
2  await Talk.ready;
3
4  // Create users here
5
6  const session = new Talk.Session({
7    appId: 'YOUR_APP_ID',
8    me: currentUser,
9  });
10});

So far, you have loaded TalkJS, created some users, and opened a connection to the server. Now you can let the users talk to each other.

A conversation is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. TalkJS works with all kinds of conversations, from group chats to product-specific conversations.

For this example, create a conversation between 'Henry' and 'Jessica':

1// After `Talk.ready` and creating users
2const conversationID = Talk.oneOnOneId(currentUser, otherUser);
3const conversation = session.getOrCreateConversation(conversationId);
4conversation.setParticipant(currentUser);
5conversation.setParticipant(otherUser);

If these users have talked before, the auto-generated conversationId is the same, meaning TalkJS loads the pre-existing conversation and all previous messages. Otherwise, it creates a new conversation.

At this point, everything is set up to allow your users to chat. All you need is a user interface.

TalkJS offers multiple UIs for your project out of the box. This guide uses the chatbox, but the other UIs work the same way.

Create a new chatbox and select the conversation you made earlier. This tells the UI which conversation it should display.

1// After creating the conversation
2const chatbox = session.createChatbox();
3chatbox.select(conversation);

To display your chatbox on the page, you need to mount it on an HTML element. Create a div element and store it in a variable using bind:this:

1<script>
2  /* ... */
3  let chatboxEl;
4  /* ... */
5</script>
6
7<div bind:this={chatboxEl} />

Now you can pass that reference to chatbox.mount, which displays the chatbox UI inside your div:

1// After chatbox.select
2chatbox.mount(this.chatboxEl);

Check your browser, and you should see a chat window running in your app.

Try sending Jessica a message, and play around with TalkJS.

If you don't see the chat window, make sure that you entered your app ID correctly, replacing YOUR_APP_ID in the code.

In this short guide, you've taken your Svelte app to the next level with powerful user-to-user chat. You also learned more about the fundamentals of TalkJS, and how it all fits together. Most importantly, you've built a starting point to try out all the features TalkJS offers.

You might notice that most of your code sits inside onMount. That prevents you from using reactive statements. To make it easier to use reactive statements, you can wrap the Talk.ready promise in a component. For more information, check out a more advanced Svelte example.

If you would like to try out more features, you could create a group chat by adding more users, create a new UI theme, or even enable email notifications.