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

Con trỏ trực tiếp, avatar và khóa chỉnh sửa

Cộng tác trên kênh presence: ai đang ở đây và ở đâu, con trỏ trực tiếp, khóa component để hai người không sửa cùng một trường, và chế độ theo dõi khi trình bày.

@hibira-io/spacesDemo trực tiếp ↗npm ↗GitHub ↗

Mỗi thành viên có hồ sơ và vị trí, như trang hoặc slide họ đang xem.
Tọa độ con trỏ được gửi năm lần mỗi giây và phát lại đúng nhịp ban đầu, nên chuyển động trông mượt.
lock() thất bại với trường người khác đang giữ, và khóa của một thành viên tự mất khi họ rời đi.

Đă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

Cài đặt
```
npm install @hibira-io/spaces pusher-js
```

Sử dụng

import { Space } from '@hibira-io/spaces';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/spaces/auth' },
});
const space = Space.enter(pusher, 'presence-space-doc-42', { profile: { color: '#e5484d' } });
space.on('members', ({ members }) => renderAvatars(members));
space.on('cursor', ({ id, member, x, y }) => drawCursor(id, member, x, y));

Trước khi bắt đầu

Bật "Cho phép sự kiện phía client" trong cài đặt ứng dụng để người chơi gửi nước đi và lượt chạm cho nhau.
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.

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

Con trỏ trực tiếp, avatar và khóa chỉnh sửa

Cài đặt

Sử dụng

Trước khi bắt đầu