Awareness

Introduction

You can sync information about all present users through the Awareness API. You are completely free to share whatever you like, for example a name, a color, the cursor position, or even a position a 3D system – do it!

Example

import * as Y from 'yjs'
import { HocuspocusProvider } from '@hocuspocus/provider'

// Set up a new Y.js document
const ydoc = new Y.Doc()

// Init an empty Array where all states are stored then
const currentStates = []

// Connect it to the backend
const provider = new HocuspocusProvider({
  url: 'ws://127.0.0.1:1234',
  name: 'example-document',
  document: ydoc,
  onAwarenessUpdate: ({ states }) => {
    currentStates = states
  },
})

// For example, listen for mouse movements
document.addEventListener('mousemove', event => {

  // Share any information you like
  provider.setAwarenessField('user', {
    name: 'Kevin Jahns',
    color: '#ffcc00',
    mouseX: event.clientX,
    mouseY: event.clientY,
  })

})