Examples of API usage

.eslintrc.js

@@ -42,7 +42,7 @@ module.exports = {
       extends: ['plugin:jsdoc/recommended'],
     },
   ],
-  ignorePatterns: ['dist', 'build'],
+  ignorePatterns: ['dist', 'build', 'examples'],
   settings: {
     jsdoc: {
       tagNamePreference: {

examples/avatar-stack.ts

@@ -0,0 +1,28 @@
+import Spaces from '@ably-labs/spaces';
+import { Realtime } from 'ably';
+
+import { renderAvatars, renderNotification } from './my-application';
+
+// Create Ably client
+const client = new Realtime.Promise({ authUrl: '<auth-endpoint>', clientId: '<client-ID>' });
+
+// Initialize the Spaces SDK with an Ably client
+const spaces = new Spaces(client);
+
+// Create a new space
+const space = await spaces.get('slide-deck-224');
+
+// Enter a space to become a member
+await space.enter({ name: 'Kyle' });
+
+// Listen to the member changes within a space
+// Triggers for members entering/ leaving a space or updating their profile
+space.members.subscribe('update', () => {
+  const otherMembers = space.members.getOthers();
+  renderAvatars(otherMembers);
+});
+
+// Listen to leave events only to show a notification
+space.members.subscribe('leave', (member) => {
+  renderNotification('memberHasLeft', member);
+});

examples/live-cursors.ts

@@ -0,0 +1,27 @@
+import Spaces from '@ably-labs/spaces';
+import { Realtime } from 'ably';
+
+import renderCursor from './my-application';
+
+// Create Ably client
+const client = new Realtime.Promise({ authUrl: '<auth-endpoint>', clientId: '<client-ID>' });
+
+// Initialize the Spaces SDK with an Ably client
+const spaces = new Spaces(client);
+
+// Create a new space
+const space = await spaces.get('slide-deck-224');
+
+// Enter a space to become a member
+space.enter({ name: 'Helmut' });
+
+// Listen to all changes to all members within a space
+space.cursors.subscribe('update', (cursorUpdate) => {
+  const member = space.members.getAll().find((member) => member.connectionId === cursorUpdate.connectionId);
+  renderCursor(cursorUpdate, member);
+});
+
+// Publish cursor events to other members
+window.addEventListener('mousemove', ({ clientX, clientY }) => {
+  space.cursors.set({ position: { x: clientX, y: clientY } });
+});

examples/location.ts

@@ -0,0 +1,25 @@
+import Spaces from '@ably-labs/spaces';
+import { Realtime } from 'ably';
+
+import updateLocationsForMember from './my-application';
+
+// Create Ably client
+const client = new Realtime.Promise({ authUrl: '<auth-endpoint>', clientId: '<client-ID>' });
+
+// Initialize the Spaces SDK with an Ably client
+const spaces = new Spaces(client);
+
+// Create a new space
+const space = await spaces.get('slide-deck-224');
+
+// Enter a space to become a member
+await space.enter({ name: 'Amelie' });
+
+// Subscribe to all members' location updates
+space.locations.subscribe('update', ({ member, currentLocation, previousLocation }) => {
+  // Update UI to reflect other members locations
+  updateLocationsForMember(member, currentLocation, previousLocation);
+});
+
+// Set your location
+space.locations.set({ slide: 0, elementId: 'title' });

examples/locking.ts

@@ -0,0 +1,35 @@
+import Spaces, { LockStatus } from '@ably-labs/spaces';
+import { Realtime } from 'ably';
+
+import { enableLocationEditing, lockId } from './my-application';
+
+// Create Ably client
+const client = new Realtime.Promise({ authUrl: '<auth-endpoint>', clientId: '<client-ID>' });
+
+// Initialize the Spaces SDK with an Ably client
+const spaces = new Spaces(client);
+
+// Create a new space
+const space = await spaces.get('slide-deck-224');
+
+// Enter a space to become a member
+await space.enter({ name: 'Yoshi' });
+
+const isLocked = space.locks.get(lockId);
+
+if (!isLocked) {
+  await space.locks.acquire(lockId);
+}
+
+// Update UI when parts of the UI are locked
+space.locks.subscribe('update', (lock) => {
+  const self = space.members.getSelf();
+
+  if (lock.request.status === LockStatus.LOCKED && self.connectionId === lock.member.connectionId) {
+    const location = {
+      slide: lock.request.attributes.get('slide'),
+      elementId: lock.request.attributes.get('elementId'),
+    };
+    enableLocationEditing({ location });
+  }
+});