แพ็กเกจอย่างเป็นทางการ · เฟรมเวิร์ก

คอนเทนต์แบบเรียลไทม์สำหรับ Payload CMS

ปลั๊กอิน Payload 3 ที่ส่งอีเวนต์เมื่อผู้แก้ไขเผยแพร่ อัปเดต หรือลบ และ <LiveRefresh> สำหรับ Next.js ที่รีเฟรช server component ของหน้าเมื่อคอนเทนต์เปลี่ยน หน้ายังเป็น static หรือแคชได้ และใช้บน Vercel ได้

@hibira-io/payloadnpm ↗GitHub ↗

• เลือก collection และ global ที่จะติดตาม และฟิลด์ที่แต่ละอีเวนต์จะส่งไป
• การบันทึกไม่ล้มเหลวเพราะบริการเรียลไทม์: ถ้าส่งไม่สำเร็จจะบันทึก log ไว้และการบันทึกยังเสร็จตามปกติ
• ใช้ useLiveChanges() เมื่ออยากจัดการเอง และ subscribe() สำหรับฟรอนต์เอนด์ที่ไม่ใช่ Next.js

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

1. ติดตั้ง

   npm install @hibira-io/payload pusher-js
   
   # .env
   HIBIRA_APP_ID=YOUR_APP_ID
   HIBIRA_APP_SECRET=YOUR_APP_SECRET
   NEXT_PUBLIC_HIBIRA_APP_KEY=YOUR_APP_KEY
   NEXT_PUBLIC_HIBIRA_HOST=ws.hibira.io

2. ตั้งค่า

   // payload.config.ts
   import { hibiraPlugin } from '@hibira-io/payload';
   
   export default buildConfig({
     plugins: [
       hibiraPlugin({
         collections: { posts: true, products: { fields: ['price', 'stock'] } },
         globals: { header: true },
       }),
     ],
   });

3. ใช้งาน

   // app/(frontend)/posts/[slug]/page.tsx
   import { LiveRefresh } from '@hibira-io/payload/react';
   
   export default async function Post({ params }) {
     const post = await getPost((await params).slug);
     return (
       <article>
         <LiveRefresh collection="posts" id={post.id} />
         <h1>{post.title}</h1>
       </article>
     );
   }

ก่อนเริ่ม

• ซีเคร็ตของแอปจะแสดงเพียงครั้งเดียว ตอนสร้างแอปหรือตอนหมุนเวียนซีเคร็ต เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ห้ามใส่ในเบราว์เซอร์หรือไฟล์บิลด์ของเกม
• ในแพ็กเกจ Free ให้ใส่ทุก origin ที่หน้าเว็บโหลดมาใน Origin ที่อนุญาตของแอป (http://localhost:3000 ระหว่างพัฒนา แล้วตามด้วยโดเมนของคุณ) ส่วน "*" ต้องใช้แพ็กเกจแบบชำระเงิน
• ช่องเป็นแบบสาธารณะ จึงควรระบุเฉพาะฟิลด์ที่ผู้เข้าชมทุกคนดูได้ ในแพ็กเกจ Free อีเวนต์ที่เกิน 4 KB จะส่งโดยไม่มีฟิลด์

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →