# 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.

Source: https://hibira.io/vi/guides/y-hibira

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.

Package: y-hibira

- 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.

## 1. Cài đặt

```shell
npm install y-hibira yjs pusher-js
```

## 2. Sử dụng

```js
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.

- [npm](https://www.npmjs.com/package/y-hibira)
- [GitHub](https://github.com/hibira-io/y-hibira)