Eine Live-Chat-Funktion erstellen

Welcome to building a live chat! Instant messaging is a perfect example of where realtime capabilities shine.

Users expect their messages to appear instantly without refreshing. Supabase Realtime makes this surprisingly simple.

In this lesson, we'll connect the dots: sending messages to your database and instantly receiving new messages from others.

First, we need a place to store our chat messages. A simple table is all it takes!

We'll create a messages table with columns for the message text, who sent it, and when it was sent.

• id: Primary Key, unique identifier.
• text: The message content (type: TEXT).
• user_id: Who sent the message (type: UUID, linked to auth.users).
• created_at: When the message was sent (type: TIMESTAMPTZ, default to now()).

To interact with Supabase from your app, you'll need to initialize the client library. This sets up the connection to your project.

Make sure you have your Supabase URL and Anon Key ready. (These are covered in earlier lessons.)

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

This supabase object will be your gateway to sending and receiving messages.

When a user types a message and hits send, your app needs to store that message in the database.

We'll use the Supabase client's insert() method on our messages table. This adds a new row with the message text and the sender's ID.

It's a straightforward database write operation, just like adding any other data.

Try running this example. It simulates sending a message to your Supabase messages table.

Remember to replace placeholders with your actual Supabase URL/Key and a valid user_id (e.g., from an authenticated user).

Sending messages is only half the story. The magic of live chat is seeing new messages instantly!

Supabase Realtime allows you to subscribe to changes in your database. We'll listen specifically for new INSERT events on our messages table.

When a new message is inserted by any user, your app will receive a notification and can update the chat display.

This code sets up a listener for new messages. When a message is inserted, the callback function will run.

The payload.new object contains the full data of the newly inserted message.

Once you receive a new message via the realtime subscription, the next step is to display it in your chat interface.

Typically, you'll take the payload.new object, extract the text, user_id, and created_at, and then dynamically add it to your chat window.

• Create a new chat bubble/element.
• Populate it with the message data.
• Append it to your chat message list.
• Consider scrolling to the bottom automatically for the best user experience!

A basic chat works, but a good chat shows who sent what and when.

Since our messages table has a user_id, you can fetch user profiles (e.g., username, avatar) to display alongside messages. This might involve a simple join if you're querying historical messages, or fetching user details separately for realtime messages.

The created_at timestamp automatically provided by Supabase is crucial for ordering messages and showing when they were sent.

You've successfully built the core of a live chat feature!

We covered:

• Designing a simple messages table.
• Sending new messages by inserting data into Supabase.
• Receiving new messages instantly using Supabase Realtime subscriptions.
• How to integrate these messages into your app's UI.

This pattern of inserting data and subscribing to changes is fundamental for many realtime applications beyond just chat. Keep exploring!