Svelte chat between your users, on SvelteKit 3

The two files that give you a live chat

Start from a new app, or add the install and the two files to the app you have.

npx sv create my-app --template minimal --types ts --no-add-ons --install npm
cd my-app && npm install @talkjs/web-components @talkjs/core
npm run dev

The first file, src/routes/chat/+page.ts, is one line that turns off server rendering for the chat route:

export const ssr = false;

The second, src/routes/chat/+page.svelte, creates two users and a conversation, then shows it:

<script lang="ts">
  import '@talkjs/web-components';
  import '@talkjs/web-components/default.css';
  import { getTalkSession } from '@talkjs/core';

  const appId = '<APP_ID>';
  const userId = 'frank';
  const otherUserId = 'nina';
  const conversationId = 'my_conversation';

  const session = getTalkSession({ appId, userId });
  session.currentUser.createIfNotExists({ name: 'Frank' });
  session.user(otherUserId).createIfNotExists({ name: 'Nina' });
  const conversation = session.conversation(conversationId);
  conversation.createIfNotExists();
  conversation.participant(otherUserId).createIfNotExists();
</script>

<t-chatbox
  style="width: 400px; height: 600px;"
  app-id={appId}
  user-id={userId}
  conversation-id={conversationId}
></t-chatbox>

From the code example in the TalkJS Svelte guide, on the versions above plus @talkjs/core 1.12.1.

SvelteKit’s docs advise against ssr = false on most pages, and they’re right about most pages. A chat page behind a login has nothing to render on the server, because the server doesn’t have the messages. Your other routes don’t pay for the chat, either: in one build, a route with no chat loaded 34 kB of gzipped JavaScript and the chat route 365 kB.

This chat has hard-coded users and authentication off, which is enough to try it. Before you launch, sign a token for each user.

Say the chat sits on an order page, and the order should still render on the server. Import the components in onMount, which doesn’t run on the server, and start the session there too:

<script lang="ts">
  import { onMount } from 'svelte';
  import { getTalkSession } from '@talkjs/core';
  import '@talkjs/web-components/default.css';

  const appId = '<APP_ID>';
  const userId = 'frank';
  const otherUserId = 'nina';
  const conversationId = 'my_conversation';

  onMount(async () => {
    await import('@talkjs/web-components');

    const session = getTalkSession({ appId, userId });
    session.currentUser.createIfNotExists({ name: 'Frank' });
    session.user(otherUserId).createIfNotExists({ name: 'Nina' });
    const conversation = session.conversation(conversationId);
    conversation.createIfNotExists();
    conversation.participant(otherUserId).createIfNotExists();
  });
</script>

<h1>Order 1234</h1>
<t-chatbox
  style="width: 400px; height: 600px;"
  app-id={appId}
  user-id={userId}
  conversation-id={conversationId}
></t-chatbox>

We’d pick this over the other two ways that keep server rendering on. {#if browser} works too, but it needs a SvelteKit import, and that import was renamed in SvelteKit 3. onMount is plain Svelte. {#await import()} also works, but in dev it ran the import on the server, where it failed with no message. One difference to expect: with onMount the server HTML includes the <t-chatbox> tag, which does nothing until the import finishes in the browser.

Where the TalkJS secret key goes in SvelteKit 3

The key goes in your .env file as TALKJS_SECRET_KEY, and a server route reads it through a variable you declare in src/env.ts:

import { defineEnvVars } from '@sveltejs/kit/env';

export const variables = defineEnvVars({
  TALKJS_SECRET_KEY: {},
});

Sign the token in src/routes/api/talkjs-token/+server.ts, after npm install jsonwebtoken. Here locals.user stands for whatever your own login sets:

import jwt from 'jsonwebtoken';
import { json } from '@sveltejs/kit';
import { TALKJS_SECRET_KEY } from '$app/env/private';

export function GET({ locals }) {
  const token = jwt.sign({ tokenType: 'user' }, TALKJS_SECRET_KEY, {
    issuer: '<APP_ID>',
    subject: locals.user.id,
    expiresIn: '1d',
  });
  return json({ token });
}

Then load the token in the chat route’s +page.ts, and pass it to the session with session.setToken(data.token) before the first createIfNotExists:

export const ssr = false;

export async function load({ fetch }) {
  const res = await fetch('/api/talkjs-token');
  return res.json();
}

Here’s one mistake the build does catch: import $app/env/private in a page and npm run build fails with server_only_import. Once the chat loads with a token, turn on authentication in your dashboard, as the authentication docs describe.