ผสานรวมคุณสมบัติเรียลไทม์เข้ากับ Next.js ได้อย่างง่ายดาย

การเพิ่มฟีเจอร์เรียลไทม์ให้กับ Next.js นั้นแย่มาก ☺

ฉันหมายถึงสิ่งต่าง ๆ เช่น:

สตรีมแบบเรียลไทม์สำหรับ Vercel AI SDK
แดชบอร์ดสด
การแจ้งเตือนสดและการอัปเดต
เคอร์เซอร์สดหรือตัวบ่งชี้ 'ใครออนไลน์'
การติดตามความคืบหน้าสำหรับการอัปโหลดไฟล์หรืองานที่ต้องใช้เวลานาน

และนี่ไม่ใช่การขาด SaaS ที่คุณสามารถใช้เพื่อจุดประสงค์นี้อย่างแน่นอน บริการที่มีอยู่คือ:

มีราคาแพงและมีราคาที่ไม่ชัดเจน (สามารถ)
ไม่ปลอดภัยต่อการพิมพ์ด้วยประสบการณ์นักพัฒนาที่ไม่ดี (Pusher)
ยอดเยี่ยม (Convex, Supabase) แต่เพิ่มเรียลไทม์ได้ยากโดยไม่ต้องย้ายสแต็กทั้งหมด

เป้าหมายสำหรับ Upstash Realtime

ฉันต้องการบริการเรียลไทม์ที่

ปลอดภัย 100% ทั้งด้านหน้าและด้านหลัง
ปรับใช้กับ Vercel และแพลตฟอร์มไร้เซิร์ฟเวอร์อื่นๆ ได้
ราคาขึ้นอยู่กับกิจกรรม ไม่ใช่เวลาเชื่อมต่อ
ใช้ได้กับฐานข้อมูลที่มีอยู่ (Neon, Planetscale, ทุกอย่าง)

ดังนั้นเราจึงสร้าง Upstash Realtime ให้เป็นแบบนั้น วิธีที่ง่ายที่สุดในการเพิ่มคุณสมบัติเรียลไทม์ให้กับแอป Next.js การตั้งค่าใช้เวลา 2 นาทีและปรับใช้กับ Vercel, Cloudflare หรืออื่นๆ ได้

ฉันเกลียดวิธีที่มีอยู่ทั้งหมดในการทำสิ่งนี้ 🤡

ฉันได้แนวคิดสำหรับเรียลไทม์จากการสร้าง SaaS แบบโอเพ่นซอร์สที่เรียกว่า Contentport เมื่อคุณโพสต์ทวีตผ่าน contentport เราจะเรียกใช้ตรรกะการโพสต์ในเวิร์กโฟลว์ Upstash ที่จะลองใหม่โดยอัตโนมัติเมื่อล้มเหลว

ด้วยวิธีนี้ แม้ว่า Twitter API จะหยุดทำงาน แต่ผู้ให้บริการ AI ของเราก็หยุดทำงาน หรือ สิ่งอื่นใด ผิดพลาดไป เรารับประกันความน่าเชื่อถือที่สูงมากแก่บุคคลที่โพสต์

แต่เนื่องจากตรรกะนี้ทำงานในงานเบื้องหลัง จึงไม่มีการเชื่อมต่อระหว่างไคลเอนต์และตรรกะในการลงรายการบัญชี กล่าวอีกนัยหนึ่ง ไม่มีวิธีใดที่จะบอกลูกค้าเกี่ยวกับสถานะปัจจุบันได้ (เช่น 'กำลังประมวลผล' 'กำลังโพสต์' หรือ 'ความสำเร็จ')

ผสานรวมคุณสมบัติเรียลไทม์เข้ากับ Next.js ได้อย่างง่ายดาย

หากต้องการส่งการอัปเดตสถานะให้กับลูกค้าแบบเรียลไทม์ ฉันจำเป็นต้องมีตัวกลางส่งข้อความ

ฉันไม่พอใจกับ Pusher มากและไม่ต้องการย้ายฐานข้อมูล Neon Postgres ที่มีอยู่ไปยัง Convex เพื่อใช้งานฟีเจอร์แบบเรียลไทม์เท่านั้น และกลายเป็นว่าผลิตภัณฑ์ที่สมบูรณ์ที่สุดของเรา Upstash Redis มีทุกสิ่งที่ฉันต้องการเพื่อทำให้งานนี้สำเร็จ:Pub/sub และ Redis Streams

ตัวอย่างด่วน

เรามาสร้างตัวอย่างง่ายๆ ที่ส่งการอัปเดตแบบเรียลไทม์จากการทำงานของเซิร์ฟเวอร์ไปยังไคลเอนต์

ขั้นแรก เราติดตั้งแพ็คเกจ:

npm install @upstash/realtime

จากนั้นเรากำหนดเหตุการณ์โดยใช้ 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>;

ส่งเหตุการณ์ในตัวจัดการเส้นทางใดๆ:

เส้นทาง.ts

import { realtime } from "@/lib/realtime";
 
await realtime.emit("notification", { message: "Hello world!" });

สมัครสมาชิกกิจกรรมในองค์ประกอบ React ของคุณ:

page.tsx

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

แค่นั้นแหละ! ขณะนี้เรามีการอัปเดตแบบเรียลไทม์ที่ปลอดภัยจากเซิร์ฟเวอร์ไปยังไคลเอนต์โดยสมบูรณ์

ข้อจำกัดความรับผิดชอบ

Upstash Realtime ไม่ได้หมายถึงการแทนที่ Pusher 1:1 เนื่องจากเราใช้ HTTP และไม่ใช่ซ็อกเก็ตเช่น Pusher

ดังนั้น แม้ว่า HTTP น่าจะเชื่อถือได้มากกว่า แต่สำหรับการอัปเดตความถี่ที่สูงมาก (>15-20 ต่อวินาที) ฉันขอแนะนำ Pusher เนื่องจากการเชื่อมต่อซ็อกเก็ต

แต่สำหรับสิ่งอื่นใด เช่น การอัปเดตกลุ่ม AI ความถี่สูงจาก AI SDK ของ Vercel แดชบอร์ดสดหรือข้อความแชทสด เรากำลังสร้าง Upstash Realtime ให้เป็นเป้าหมาย

คุณควรลองดู มันเริ่มต้นง่ายมาก!

ขอบคุณสำหรับการอ่าน! 🙌 มีคำถามหรือข้อเสนอแนะ? ติดต่อฉันโดยตรงที่ @joshtriedcoding