Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Redis

Dễ dàng tích hợp các tính năng thời gian thực vào Next.js

Việc thêm các tính năng thời gian thực vào Next.js thật tệ 💀

Ý tôi là những thứ như:

  • Luồng thời gian thực cho Vercel AI SDK
  • Trang tổng quan trực tiếp
  • Thông báo và cập nhật trực tiếp
  • Con trỏ trực tiếp hoặc chỉ báo 'ai đang trực tuyến'
  • Theo dõi tiến trình tải tệp lên hoặc các tác vụ chạy dài

Và điều này chắc chắn không phải vì thiếu SaaS mà bạn có thể sử dụng cho mục đích này. Các dịch vụ hiện có là:

  • Đắt và giá cả không rõ ràng (Ably)
  • Không an toàn về loại với trải nghiệm nhà phát triển kém (Pizer)
  • Tuyệt vời (Convex, Supabase), nhưng khó thêm thời gian thực nếu không di chuyển toàn bộ ngăn xếp của bạn

Mục tiêu cho Upstash thời gian thực

Tôi muốn có một dịch vụ thời gian thực

  • An toàn loại 100% ở mặt trước và mặt sau
  • Có thể triển khai cho Vercel và các nền tảng không có máy chủ khác
  • Định giá dựa trên sự kiện, không phải thời gian kết nối
  • Có thể sử dụng với mọi cơ sở dữ liệu hiện có (Neon, Planetscale, mọi thứ)

Vì vậy, chúng tôi đang xây dựng Upstash Realtime để làm được điều đó. Cách dễ nhất để thêm các tính năng thời gian thực vào bất kỳ ứng dụng Next.js nào. Quá trình thiết lập mất 2 phút và có thể triển khai lên Vercel, Cloudflare hoặc các dịch vụ khác.

Tôi ghét tất cả những cách hiện có để làm điều này 🤡

Tôi có ý tưởng về Thời gian thực từ việc xây dựng SaaS nguồn mở có tên là Contentport. Khi bạn đăng một tweet thông qua cổng nội dung, chúng tôi sẽ chạy logic đăng trong Luồng công việc Upstash được tự động thử lại khi không thành công.

Bằng cách này, ngay cả khi API Twitter không hoạt động, nhà cung cấp AI của chúng tôi vẫn ngừng hoạt động hoặc bất cứ điều gì khác xảy ra sai sót, chúng tôi có thể đảm bảo độ tin cậy cực cao cho người đăng bài.

Nhưng vì logic này chạy ở chế độ nền nên không có kết nối nào giữa máy khách và logic đăng bài. Nói cách khác, không có cách nào để thông báo cho khách hàng về trạng thái hiện tại (ví dụ:'đang xử lý', 'đăng' hoặc 'thành công').

Dễ dàng tích hợp các tính năng thời gian thực vào Next.js

Để gửi cập nhật trạng thái cho khách hàng theo thời gian thực, tôi cần một số loại nhà môi giới tin nhắn.

Tôi rất không hài lòng với Pusher và không muốn di chuyển cơ sở dữ liệu Neon Postgres hiện có của chúng tôi sang Convex chỉ để phục vụ các tính năng thời gian thực. Và hóa ra, sản phẩm trưởng thành nhất của chúng tôi, Upstash Redis, có mọi thứ tôi cần để thực hiện công việc này:Pub/sub và Redis Streams.

Ví dụ nhanh

Hãy xây dựng một ví dụ đơn giản gửi thông tin cập nhật theo thời gian thực từ hành động của máy chủ tới máy khách.

Đầu tiên chúng ta cài đặt gói:

npm install @upstash/realtime

Sau đó, chúng tôi xác định sự kiện bằng cách sử dụng zod:

lib/realtime.ts
import { InferRealtimeEvents, Realtime } from "@upstash/realtime";
import z from "zod/v4";
import { redis } from "./redis";
 
const schema = {
 notification: z.object({
 message: z.string(),
 }),
};
 
const realtime = new Realtime({ schema, redis });
export type RealtimeEvents = InferRealtimeEvents<typeof realtime>;

Gửi sự kiện trong bất kỳ trình xử lý tuyến đường nào:

tuyến đường.ts
import { realtime } from "@/lib/realtime";
 
await realtime.emit("notification", { message: "Hello world!" });

Đăng ký các sự kiện trong thành phần React của bạn:

trang.tsx
import { RealtimeEvents } from "@/lib/realtime";
import { useRealtime } from "@upstash/realtime/client";
 
useRealtime<RealtimeEvents>({
 event: "notification",
 onData: ({ message }) => {
 console.log(message);
 },
});

Thế thôi! Hiện tại, chúng tôi có các bản cập nhật theo thời gian thực hoàn toàn an toàn về loại từ máy chủ đến máy khách.

Tuyên bố từ chối trách nhiệm

Upstash Realtime không nhằm mục đích thay thế Pusher 1:1 vì chúng tôi sử dụng HTTP chứ không phải socket như Pusher.

Vì vậy, mặc dù HTTP có thể đáng tin cậy hơn nhưng đối với các cập nhật tần suất cực cao (>15-20 mỗi giây), tôi khuyên dùng Pusher vì kết nối ổ cắm của chúng.

Tuy nhiên, đối với bất kỳ nội dung nào khác, chẳng hạn như các bản cập nhật khối AI tần suất cao từ SDK AI của Vercel, trang tổng quan trực tiếp hoặc tin nhắn trò chuyện trực tiếp, chúng tôi đang xây dựng Upstash Realtime để trở thành lựa chọn phù hợp.

Bạn nên thử nó, nó rất dễ để bắt đầu!

Cảm ơn đã đọc! 🙌 Bạn có thắc mắc hoặc phản hồi? Hãy liên hệ trực tiếp với tôi @joshtriedcoding.