SignalR hub configuration in JavaScript application

18 Nov 20182 minutes to read

Overview

This guide explains how to configure SignalR hub in a JavaScript application for real-time collaborative diagram editing.

How to create JavaScript sample

To create a JavaScript web application, set up a basic HTML file with the required Diagram scripts and references. Refer to the JavaScript Diagram Getting Started documentation.

How to add packages in the JavaScript application

Configure SignalR service in JavaScript application

To enable real-time collaboration, configure SignalR HubConnection in your JavaScript code as follows:

  • Initialize the HubConnection when the page loads and start it by calling start().
  • Connect to the /diagramHub endpoint using WebSocket transport and enable automatic reconnect to handle transient network issues.
  • Join a SignalR group by calling invoke('JoinDiagram', roomName) after the connection is established. This ensures updates are shared only with users in the same diagram session.
  • Refer to the JavaScript Diagram Getting Started guide.

Notes:

  • Use a unique roomName per diagram (for example, a diagram ID) to isolate collaboration sessions.
  • If WebSockets may be unavailable, remove skipNegotiation so SignalR can fall back to Server-Sent Events (SSE) or Long Polling.
  • Consider handling connection state changes and securing the connection with authentication, if required.

Sending and applying real-time diagram changes

  • The JavaScript Diagram component triggers the historyChange event whenever the diagram is modified, such as when nodes or connectors are added, deleted, moved, resized, or edited.
  • Use the getDiagramUpdates method to generate a compact set of incremental updates (JSON-formatted changes) that represent only the changes, rather than the entire diagram.
  • Send these changes to the hub method BroadcastToOtherUsers, which relays them to all users joined to the same SignalR group (room).
  • Each remote user listens for the ReceiveData and applies the incoming changes with setDiagramUpdates, keeping their view synchronized without reloading the full diagram.
  • Enable the enableCollaborativeEditing property on the diagram to treat multi-step edits (like drag/resize sequences or batch changes) as a single operation. This property works in conjunction with the DiagramCollaboration and UndoRedo module to batch related changes efficiently.

Conflict policy (optimistic concurrency) in JavaScript application

To maintain consistency during collaborative editing, each user applies incoming changes using setDiagramUpdates. The JavaScript application tracks a userVersion that is synchronized with the serverVersion through version-tracking events. This version-based approach ensures conflicts are resolved without locking, allowing real-time responsiveness while preserving data integrity.

Add the following code in your JavaScript application: