Real-Time User State Sharing

Real-Time User State Sharing

Posted by: ichioka.yuji on 24 November 2025, 11:43 am EST

• 

  ichioka.yuji

  • Post Options:
  • Link
    Copy

  Posted 24 November 2025, 11:43 am EST

  Since my application uses Y.js as a collaboration framework, I want to enable real-time user state sharing as awareness specifically within the SpreadJS worksheet.

  Do you have a simple and minimum but complete example of real-time user state sharing in SpreadJS (v18.2.5)?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 25 November 2025, 8:08 am EST

  Hi,

  There isn’t a sample available that demonstrates real-time user state using Y.js with SpreadJS, and it’s unclear whether SpreadJS fully supports this integration. You may try exploring it using the SpreadJS APIs: https://developer.mescius.com/spreadjs/api/modules/GC.

  However, SpreadJS already provides a built-in collaboration feature that supports real-time user state. You can refer to the following for presence and collaboration support:
  
  https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server
  
  https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/user/presence

  Please check the attached sample for reference: Collaboration.zip

  Regards,
  
  Priyam

• 

  ichioka.yuji

  • Post Options:
  • Link
    Copy

  Posted 5 January 2026, 4:15 am EST - Updated 5 January 2026, 4:16 am EST

  Hello,

  I created a simple demo (index-collaboration-presence.html) that only displays presence, based on the following article.
  
  *https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/tutorial-real-time-collaborative-spreadjs-designer/tutorial-use-presence
  
  *https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/user/presence

  However, it doesn’t work because the following error occurs.

  index.min.js:18  Uncaught ReferenceError: require is not defined
  index.min.js:18  Uncaught TypeError: Cannot read properties of undefined (reading 'LoggerManager')
  

  index-collabration-presence.zip

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 January 2026, 10:27 am EST

  Hi Yuji,

  We’ve reviewed your demo and identified the issue. The error occurs because the collaboration client libraries require a module bundler (such as Webpack/Vite) and cannot be loaded directly via a CDN.

  Solution

  We’ve attached a complete working implementation of the Server collaboration user presence feature with the following details:

  1. Server:
     • Node.js collaboration server with OT and Presence features
     • SQLite persistence for document state
     • WebSocket support for real-time sync
  2. Client:
     • Webpack-bundled application with proper module imports
       
       ​ * Real-time presence visualization with colored borders
     • Multi-user collaboration support

  Setup:

  1. Extract the zip file
  2. Server setup:

        cd server
        npm install
        npm run init-db
        npm start

  3. Client build:

        cd client
        npm install
        npm run build

  4. Open http://localhost:8080/index.html in multiple browsers to test

  The presence feature displays each user’s selection with colored borders and username labels as required.
  
  ​
  
  Please let us know if you encounter any further issues or require any further assistance.

  Best regards,
  
  Chirag

  Attachment: spreadjs-collaboration.zip

• 

  ichioka.yuji

  • Post Options:
  • Link
    Copy

  Posted 6 January 2026, 3:45 am EST

  My team currently possesses a collaboration platform based on Y.js, and we are in the process of developing an application that integrates SpreadJS into this existing environment. Consequently, we intend not to utilize the @mescius/js-collaboration server; rather, we aim to employ solely the user presence display functionality on SpreadJS client.

  According to the article linked below, it appears that the user presence can be configured via the setPresences() method:
  
  https://developer.mescius.com/spreadjs/docs/spreadjs-collaboration-server/spreadjs-sheets-collaboration/user/presence

  let presences = [{  
  	user: {  
  		id: '1',  
  		name: 'User1',  
  		color: '#FF0000'  
  	},  
  	status: {  
  		selections: {  
  			selections: [new GC.Spread.Sheets.Range(0, 0, 1, 1)],  
  			sheetId: 'sheet1'  
  		}  
  	}  
  }];  
  spread.collaboration.setPresences(presences);  

  However, I noticed that the sample demo code you kindly provided did not include any usage of the setPresences() method. I would be immensely grateful if you could furnish an example demonstrating how to properly utilize the setPresences() method within the context of SpreadJS collaboration.