แพ็กเกจอย่างเป็นทางการ · ชิ้นส่วนเรียลไทม์

เคอร์เซอร์สด อวตาร และล็อกการแก้ไข

การทำงานร่วมกันบนแชนเนล presence: ใครอยู่ที่ไหน เคอร์เซอร์สด ล็อกคอมโพเนนต์เพื่อไม่ให้สองคนแก้ฟิลด์เดียวกัน และโหมดติดตามสำหรับการนำเสนอ

@hibira-io/spacesเดโมสด ↗npm ↗GitHub ↗

• สมาชิกแต่ละคนมีโปรไฟล์และตำแหน่ง เช่น หน้าหรือสไลด์ที่กำลังดู
• พิกัดเคอร์เซอร์ถูกส่งห้าครั้งต่อวินาทีและเล่นซ้ำตามจังหวะเดิม การเคลื่อนไหวจึงดูลื่นไหล
• lock() จะล้มเหลวกับฟิลด์ที่คนอื่นถืออยู่ และล็อกของสมาชิกจะหายไปเมื่อเขาออก

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

1. ติดตั้ง

   npm install @hibira-io/spaces pusher-js

2. ใช้งาน

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

ก่อนเริ่ม

• เปิด "อนุญาตอีเวนต์ฝั่งไคลเอนต์" ในการตั้งค่าแอป เพื่อให้ผู้เล่นส่งการเคลื่อนไหวและการแตะถึงกันได้
• แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →