How to integrate SignalR in Bubble

Go to Settings → SEO / metatags and add the SignalR client library in the 'Script/meta tags in header' section. Add: <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.0/signalr.min.js'></script>. This loads the SignalR client on every page. Alternatively, if only one page needs SignalR, add an HTML element on that page with the same script tag. The library provides the signalR global object that you will use to create hub connections.

Go to the Plugins tab and install the Toolbox plugin if you have not already. On your page in the Design tab, drag a 'JavaScript to Bubble' element from the element palette. In its properties, add an output value called incoming_message of type text. This element creates a bridge — your JavaScript code will call bubble_fn_incoming_message('data') to send data from SignalR into Bubble. You can then reference this element's incoming_message value in workflows and conditions.

Add an HTML element to your page with the SignalR connection code. Inside <script> tags, create a new HubConnectionBuilder pointing to your SignalR hub URL, configure automatic reconnection, and start the connection. Register a handler for the method name your hub uses to send messages (e.g., 'ReceiveMessage'). In the handler, call the Toolbox plugin's bridge function to pass the message data to Bubble.

1<script>
2  var connection = new signalR.HubConnectionBuilder()
3    .withUrl('https://your-server.com/myhub')
4    .withAutomaticReconnect()
5    .build();
6
7  connection.on('ReceiveMessage', function(user, message) {
8    // Pass incoming message to Bubble via Toolbox
9    bubble_fn_incoming_message(JSON.stringify({
10      user: user,
11      message: message,
12      timestamp: new Date().toISOString()
13    }));
14  });
15
16  connection.start()
17    .then(function() {
18      console.log('SignalR connected');
19    })
20    .catch(function(err) {
21      console.error('SignalR connection error: ', err);
22    });
23</script>

Create a Custom State on the page called messages of type text (list). Add a 'Do when condition is true' event that watches the JavaScript to Bubble element's incoming_message value. Set it to trigger every time the value changes. In the workflow actions: parse the JSON message (using the Toolbox plugin's expression or a JavaScript action), then Set state of page → messages = page's messages plus item [parsed message text]. Display messages in a Repeating Group with Type: text, Data source: page's messages. Each cell shows the message content. New messages appear instantly as SignalR pushes them.

To send messages from Bubble to the SignalR hub, add a text Input and Send button on your page. In the HTML element's script, add a global function that invokes a hub method. Create a workflow on the Send button: use the Toolbox plugin's 'Run javascript' action to call the send function with the input value. The hub receives the message and can broadcast it to other connected clients.

1<script>
2  // Add this to your existing connection script
3  window.sendSignalRMessage = function(message) {
4    connection.invoke('SendMessage', 'BubbleUser', message)
5      .catch(function(err) {
6        console.error('Send error: ', err);
7      });
8  };
9</script>