Gói chính thức · Framework

Nội dung thời gian thực cho Payload CMS

Plugin Payload 3 gửi sự kiện khi biên tập viên xuất bản, cập nhật hoặc xóa, và <LiveRefresh> cho Next.js làm mới server component của trang khi nội dung thay đổi. Trang vẫn tĩnh hoặc được cache, và chạy được trên Vercel.

@hibira-io/payloadnpm ↗GitHub ↗

  • Chọn các collection và global cần theo dõi, cùng các trường mà mỗi sự kiện mang theo.
  • Việc lưu không bao giờ thất bại vì dịch vụ thời gian thực: gửi lỗi chỉ được ghi log và việc lưu vẫn hoàn tất.
  • useLiveChanges() để tự xử lý, và subscribe() cho các frontend không dùng Next.js.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

  1. Cài đặt

    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. Thiết lập

    // 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. Sử dụng

    // 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>
  );
}

Trước khi bắt đầu

  • Secret của ứng dụng chỉ hiện một lần, khi bạn tạo ứng dụng hoặc xoay vòng secret. Hãy giữ nó trên máy chủ, không bao giờ đưa vào trình duyệt hay bản build game.
  • Với gói Free, hãy thêm mọi origin mà trang của bạn tải từ đó vào Origin được phép của ứng dụng (http://localhost:3000 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.
  • Các kênh là công khai, nên chỉ liệt kê trường mà mọi khách truy cập đều được xem. Với gói Free, sự kiện quá 4 KB sẽ được gửi không kèm trường.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →