官方包 · 框架

Payload CMS 的实时内容

Payload 3 插件：编辑发布、更新或删除时发送事件；Next.js 的 <LiveRefresh> 会在页面内容变更时刷新服务器组件。页面可保持静态或缓存，也能在 Vercel 上运行。

@hibira-io/payloadnpm ↗GitHub ↗

• 选择要监听的 collection 与 global，以及每个事件携带的字段。
• 实时服务出问题也不会让保存失败：发送失败只会记入日志，保存照常完成。
• 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 套餐需要把页面加载的每个来源都加入应用的“允许的来源”（开发时是 http://localhost:3000，之后是您的域名）。"*" 需要付费套餐。
• 频道是公开的，所以只列出任何访客都能看的字段。Free 套餐中超过 4 KB 的事件会不带字段发送。

请使用控制台中应用的 Key；Secret 只放在你的服务器上。频道、事件与授权端点的用法与 Pusher 完全相同。 免费创建账号 →