Gói chính thức · Thành phần thời gian thực

Cùng soạn thảo với Yjs

Một Yjs provider: tài liệu dùng chung và con trỏ trực tiếp đi qua kênh private hoặc presence, nên Tiptap, BlockNote, ProseMirror, CodeMirror, Monaco và Quill chạy được mà không cần máy chủ y-websocket riêng.

Phiên bản trên npmGiấy phép

y-hibiranpm ↗GitHub ↗

Cách nhanh nhất: plugin Hibira và một prompt

Cài plugin vào agent lập trình AI của bạn rồi dán prompt. Agent sẽ đăng nhập, tạo ứng dụng miễn phí nếu cần, viết mã và gửi một sự kiện thử. GitHub ↗

  1. Cài plugin

    claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

  2. Dán prompt này

    Add Hibira Yjs (y-hibira) to this project.
Follow https://hibira.io/guides/y-hibira, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

Muốn tự làm? Các bước bên dưới:

  1. Cài đặt
  2. Sử dụng

Công cụ AI khác và nội dung plugin →

  • Các bên đồng bộ với nhau qua client events; chỉnh sửa lúc ngoại tuyến được gộp lại khi kết nối trở lại.
  • Awareness cho tên, con trỏ và vùng chọn; trên kênh presence, thành viên mất kết nối được gỡ ngay.
  • Dùng với pusher-js hoặc kênh Laravel Echo, có giới hạn tốc độ gửi và tự chia nhỏ các cập nhật lớn.
Hai trình soạn thảo Tiptap dùng chung một tài liệu qua y-hibira: cả hai hiện Synced cùng ảnh đại diện của Alice và Kenji, và con trỏ của Alice hiện trong trình soạn thảo của Kenji.
Hai trình soạn thảo Tiptap dùng chung một tài liệu qua y-hibira: cả hai hiện Synced cùng ảnh đại diện của Alice và Kenji, và con trỏ của Alice hiện trong trình soạn thảo của Kenji.

Đă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 y-hibira yjs pusher-js

  2. Sử dụng

    import * as Y from 'yjs';
import Pusher from 'pusher-js';
import { HibiraProvider } from 'y-hibira';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/broadcasting/auth' },
});

const doc = new Y.Doc();
const provider = new HibiraProvider(pusher, 'presence-doc-42', doc);
provider.awareness.setLocalStateField('user', { name: 'Alice', color: '#f97316' });
// Tiptap: Collaboration.configure({ document: doc }) and CollaborationCaret.configure({ provider })

Trước khi bắt đầu

  • Bật Allow client events trong phần cài đặt của ứng dụng: các bên gửi cập nhật tài liệu cho nhau bằng client events.
  • Kênh private và presence cần một auth endpoint trên backend ký các lượt đăng ký bằng secret của ứng dụng, giống như với pusher-js.
  • Máy chủ chỉ chuyển tiếp cập nhật, không lưu lại. Hãy tự lưu tài liệu (Y.encodeStateAsUpdate) và tải nó trước khi kết nối.

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í →