Django chat without Channels, Daphne, or Redis

The view, the URL, and the template

Install PyJWT next to Django with pip install pyjwt, and add TALKJS_APP_ID and TALKJS_SECRET_KEY to your settings, read from the environment. The view signs a token for whoever is logged in:

# chat/views.py
import time

import jwt
from django.conf import settings
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from django.shortcuts import render


def talkjs_token(request):
    if not request.user.is_authenticated:
        return JsonResponse({"error": "login required"}, status=401)
    token = jwt.encode(
        {
            "tokenType": "user",
            "iss": settings.TALKJS_APP_ID,
            "sub": str(request.user.pk),
            "exp": int(time.time()) + 24 * 3600,
        },
        settings.TALKJS_SECRET_KEY,
        algorithm="HS256",
    )
    return JsonResponse({"token": token})


@login_required
def chat(request, other_user_id):
    ids = sorted([str(request.user.pk), str(other_user_id)])
    return render(request, "chat/chat.html", {
        "app_id": settings.TALKJS_APP_ID,
        "other_user_id": other_user_id,
        "conversation_id": "dm_" + "_".join(ids),
    })

Add both to urls.py:

path("chat/<int:other_user_id>/", views.chat),
path("talkjs/token/", views.talkjs_token),

The template, chat/templates/chat/chat.html, loads the chat from jsDelivr, passes the token to the session, and opens a conversation between the two users. Use your own display name field in place of get_username:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@talkjs/web-components@0.3.13/default.css">
<script type="importmap" nonce="{{ csp_nonce }}">
{"imports": {
  "@talkjs/web-components": "https://cdn.jsdelivr.net/npm/@talkjs/web-components@0.3.13",
  "@talkjs/core": "https://cdn.jsdelivr.net/npm/@talkjs/core@1.12.1"
}}
</script>
<script type="module" nonce="{{ csp_nonce }}">
  import "@talkjs/web-components";
  import { getTalkSession } from "@talkjs/core";

  const session = getTalkSession({ appId: "{{ app_id }}", userId: "{{ request.user.pk }}" });
  const res = await fetch("/talkjs/token/");
  session.setToken((await res.json()).token);

  session.currentUser.createIfNotExists({ name: "{{ request.user.get_username|escapejs }}" });
  const conversation = session.conversation("{{ conversation_id }}");
  conversation.createIfNotExists();
  conversation.participant("{{ other_user_id }}").createIfNotExists();
</script>

<t-chatbox
  style="width: 400px; height: 600px;"
  app-id="{{ app_id }}"
  user-id="{{ request.user.pk }}"
  conversation-id="{{ conversation_id }}"
></t-chatbox>

The other user needs a TalkJS user before they can join: create one when they sign up, from their own session or with the REST API. For a longer walkthrough with a full project, see our Django chat tutorial.

Once the chat loads with a token, turn on authentication in your TalkJS dashboard, so a browser without a valid token can’t connect. Tokens from this view last 24 hours; the advanced authentication guide covers longer sessions.

If you’ve turned on Django 6’s Content Security Policy

Django 6.0 added a built-in Content Security Policy. It’s off until you add ContentSecurityPolicyMiddleware and a SECURE_CSP setting. Once it’s on, a chat loaded from jsDelivr needs a policy that names jsDelivr as well as TalkJS.

This is the setting that rendered the chat:

# settings.py
from django.utils.csp import CSP

MIDDLEWARE = [
    # ...
    "django.middleware.csp.ContentSecurityPolicyMiddleware",
]

# Add to TEMPLATES[0]["OPTIONS"]["context_processors"]:
#     "django.template.context_processors.csp",

SECURE_CSP = {
    "default-src": [CSP.SELF],
    "script-src": [CSP.SELF, CSP.NONCE, "https://cdn.jsdelivr.net"],
    "style-src": [CSP.SELF, "https://cdn.jsdelivr.net"],
    "connect-src": [CSP.SELF, "https://*.talkjs.com", "wss://*.talkjs.com"],
    "img-src": [CSP.SELF, "https://*.talkjs.com", "data:"],
    "frame-src": [CSP.NONE],
}

The context processor puts csp_nonce in your templates for the import map and the module script. The components don’t use a frame, so frame-src stays 'none'. File sharing and notification sounds need a few more sources, which the TalkJS CSP page lists. If you serve the TalkJS packages from your own static files instead of jsDelivr, CSP.SELF covers the scripts and the stylesheet.