Xây dựng hệ thống notification realtime với Supabase – Hướng dẫn chi tiết

Mở đầu

Trong thời đại số hiện nay, việc giữ chân người dùng phụ thuộc rất nhiều vào khả năng tương tác tức thì. Một hệ thống notification realtime không chỉ giúp cải thiện trải nghiệm người dùng mà còn là công cụ quan trọng để tăng tỷ lệ giữ chân và tương tác. Supabase, với khả năng cung cấp backend realtime mạnh mẽ, là một lựa chọn lý tưởng để xây dựng hệ thống notification hiệu quả. Bài viết này sẽ hướng dẫn chi tiết cách xây dựng hệ thống notification realtime với Supabase, từ chuẩn bị đến triển khai.

Tại sao chọn Supabase cho hệ thống notification?

Supabase là một nền tảng backend-as-a-service mã nguồn mở, cung cấp nhiều tính năng mạnh mẽ như cơ sở dữ liệu PostgreSQL, authentication, storage và đặc biệt là realtime subscriptions. Realtime subscriptions của Supabase cho phép bạn lắng nghe các thay đổi dữ liệu theo thời gian thực thông qua WebSocket, giúp việc xây dựng notification trở nên đơn giản và hiệu quả.

So với các giải pháp khác như Firebase Cloud Messaging hay Pusher, Supabase có ưu điểm là chi phí hợp lý, dễ tích hợp với PostgreSQL và cung cấp đầy đủ các tính năng backend trong một nền tảng. Điều này giúp giảm thiểu độ phức tạp khi quản lý nhiều dịch vụ khác nhau.

Chuẩn bị môi trường và thiết lập Supabase

Để bắt đầu, bạn cần tạo một project trên Supabase. Truy cập vào trang web của Supabase, đăng nhập và tạo một project mới. Sau khi project được tạo, bạn sẽ nhận được URL và key để kết nối.

Tiếp theo, tạo một bảng trong database để lưu trữ notification. Bạn có thể sử dụng SQL editor trong Supabase dashboard để chạy lệnh tạo bảng:

CREATE TABLE notifications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  title TEXT NOT NULL,
  body TEXT NOT NULL,
  read BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Để đảm bảo mỗi user chỉ có thể xem notification của mình, bạn cần tạo row-level security (RLS) policy:

ALTER TABLE notifications ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own notifications" ON notifications
  FOR SELECT USING (auth.uid() = user_id);


CREATE POLICY "Users can insert own notifications" ON notifications
  FOR INSERT WITH CHECK (auth.uid() = user_id);


CREATE POLICY "Users can update own notifications" ON notifications
  FOR UPDATE USING (auth.uid() = user_id);

Xây dựng backend với Supabase Functions

Để gửi notification, bạn có thể tạo một Supabase Function. Function này sẽ được gọi khi có sự kiện cần thông báo, ví dụ như khi có comment mới hoặc khi có đơn hàng được xác nhận.

Vào phần Functions trong Supabase dashboard, tạo một function mới với tên send_notification. Dưới đây là ví dụ code JavaScript:

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

export default async function (context: any, req: any) {
  const supabase = createClient(
    context.env.SUPABASE_URL,
    context.env.SUPABASE_ANON_KEY,
    { auth: { autoRefreshToken: false, persistSession: false } }
  );


const { user_id, title, body } = req.body;


if (!user_id || !title || !body) {
    return new Response('Missing parameters', { status: 400 });
  }


const { data, error } = await supabase
    .from<Database['public']['Tables']['notifications']['Row']>('notifications')
    .insert([{ user_id, title, body }]);


if (error) {
    return new Response(error.message, { status: 500 });
  }


return new Response(JSON.stringify({ success: true }));
}

Function này nhận vào user_id, title và body của notification, sau đó lưu vào database. Nhờ tính năng realtime của Supabase, bất kỳ client nào đang lắng nghe bảng notifications sẽ nhận được notification ngay lập tức.

Frontend: Lắng nghe notification realtime

Trên frontend, bạn có thể sử dụng Supabase JavaScript client để lắng nghe các thay đổi trên bảng notifications. Dưới đây là ví dụ với React:

import { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.REACT_APP_SUPABASE_URL,
  process.env.REACT_APP_SUPABASE_ANON_KEY
);


function NotificationComponent() {
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);


useEffect(() => {
    const channel = supabase
      .channel('user-notifications')
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table: 'notifications',
        filter: user_id=eq.${supabase.auth.user().id}
      }, (payload) => {
        setNotifications(prev => [payload.new, ...prev]);
        if (!payload.new.read) {
          setUnreadCount(prev => prev + 1);
        }
      })
      .subscribe();


return () => supabase.removeChannel(channel);
  }, []);


const markAsRead = async (notificationId) => {
    const { error } = await supabase
      .from('notifications')
      .update({ read: true })
      .eq('id', notificationId)
      .eq('user_id', supabase.auth.user().id);


if (!error) {
      setUnreadCount(prev => prev - 1);
    }
  };


return (
    <div>
      <div>Thông báo chưa đọc: {unreadCount}</div>
      {notifications.map(n => (
        <div key={n.id}>
          <h4>{n.title}</h4>
          <p>{n.body}</p>
          <button onClick={() => markAsRead(n.id)}>Đánh dấu đã đọc</button>
        </div>
      ))}
    </div>
  );
}


export default NotificationComponent;

Với đoạn code này, mỗi khi có notification mới được thêm vào database, client sẽ tự động cập nhật giao diện mà không cần refresh trang.

Xử lý edge cases và tối ưu hiệu năng

Khi xây dựng hệ thống notification, cần lưu ý một số edge cases:

- Authentication: Đảm bảo user đã đăng nhập trước khi lắng nghe notification. - Offline mode: Nếu user mất kết nối, bạn có thể sử dụng service worker để lưu notification tạm thời và đồng bộ khi online trở lại. - Notification quá nhiều: Cân nhắc giới hạn số notification hiển thị và cho phép user xóa notification cũ.

Để tối ưu hiệu năng, bạn có thể:

- Sử dụng pagination khi query notification để tránh load quá nhiều dữ liệu. - Tận dụng Supabase indexes trên các column thường query như user_id và read. - Sử dụng select cẩn thận để chỉ lấy những column cần thiết.

Kết luận

Việc xây dựng hệ thống notification realtime với Supabase không chỉ đơn giản mà còn hiệu quả nhờ vào các tính năng mạnh mẽ của nền tảng này. Từ việc tạo database, thiết lập RLS, viết backend function đến lắng nghe realtime trên frontend, tất cả đều được hỗ trợ một cách trực quan.

Với những kiến thức đã trình bày, bạn hoàn toàn có thể triển khai một hệ thống notification realtime cho ứng dụng của mình, từ đó cải thiện trải nghiệm người dùng và tăng khả năng tương tác. Supabase tiếp tục chứng minh là một lựa chọn tuyệt vời cho các developer muốn xây dựng ứng dụng hiện đại một cách nhanh chóng và hiệu quả.