Real-time data update using SignalR and Power Automate

Real-time data update refers to the ability of your application to reflect changes instantly as they happen, without requiring users to refresh or reload. This is crucial for scenarios such as:

• Chat apps
• Notification systems
• Live dashboards
• Task status tracking
• Collaborative platforms

To achieve this in Microsoft ecosystem, we can combine:

• SignalR (for real-time push)
• Power Automate (for automation/workflow triggering)

---

What is SignalR?

SignalR is an open-source library by Microsoft that enables server-side code to push content to connected clients in real time over web sockets.

Key capabilities:

• Bi-directional communication
• Scales well for many clients
• Works with ASP.NET Core
• Can be used in Azure SignalR Service

---

What is Power Automate?

Power Automate is Microsoft’s no-code/low-code platform for creating automated workflows across multiple services, including:

• SharePoint
• PowerApps
• Microsoft Teams
• Dataverse
• HTTP APIs

---

Goal: Real-Time Data Push with SignalR + Power Automate

We want a system where:

• A Power Automate flow is triggered by some event (e.g., data creation/update in SharePoint/Dataverse)
• That flow sends a message to all listening clients (web apps, portals, PowerApps) using SignalR
• Clients receive and update data on the screen without reload

---

Step-by-Step Setup

Step 1: Set Up Azure SignalR Service

1. Go to Azure Portal.
2. Create a new Azure SignalR Service:
   • Choose resource group, region.
   • Set Service Mode to Serverless if using with Azure Functions.
   • Note the Connection String.
3. Copy the Primary Connection String – you’ll need this in Azure Function.

---

Step 2: Build an Azure Function App

Azure Functions allow you to use the SignalR Service in a serverless environment.

1. Create Function App

• Go to Azure Portal → Create Function App
• Choose runtime: .NET (C#) or Node.js
• Host plan: Consumption or Premium

2. Add Functions:

• negotiate: Returns SignalR connection info to client
• sendMessage: Receives messages and sends them to SignalR clients

Example: sendMessage (C#)

[FunctionName("sendMessage")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "post")] HttpRequest req,
    [SignalR(HubName = "notifications")] IAsyncCollector<SignalRMessage> signalRMessages)
{
    string message = await new StreamReader(req.Body).ReadToEndAsync();
    
    await signalRMessages.AddAsync(new SignalRMessage
    {
        Target = "newData",
        Arguments = new[] { message }
    });

    return new OkResult();
}

Add SignalR bindings in function.json or attributes depending on language/runtime.

---

Step 3: Power Automate – Trigger & Send Message

1. Open Power Automate.
2. Create a new flow (e.g., when a new item is created in SharePoint or Dataverse).
3. Add HTTP action to POST message to your Azure Function endpoint:

POST https://<yourfunctionapp>.azurewebsites.net/api/sendMessage
Headers:
Content-Type: application/json
Body:
{
  "message": "New record created by John at 10:30AM"
}

4. Secure this call using a function key (pass in query string or header).

---

Step 4: Client-Side – Connect to SignalR

Depending on your front-end (React, Angular, PowerApps portal), set up SignalR client:

Example (JavaScript with CDN):

<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.js"></script>
<script>
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("https://<yourfunctionapp>.azurewebsites.net/api")
        .build();

    connection.on("newData", function (message) {
        console.log("Real-time message:", message);
        // Update DOM or UI here
    });

    connection.start()
        .then(() => console.log("SignalR Connected"))
        .catch(err => console.error(err));
</script>

PowerApps Portal Support

For portals, use custom JavaScript injection to embed the SignalR client and dynamically update the content.

---

Step 5: Security & Authentication

• Use Function-level keys to restrict flow → function call.
• For portals or web apps, implement authentication on the Azure Function using AAD or API management.
• Never expose the full Azure SignalR key to the client.

---

Use Cases

Use Case	Description
Live Chat	Show messages in real-time between users
Task Notifications	Notify users of new assignments instantly
Dashboard Updates	Push data to dashboards as backend updates
Approval Systems	Real-time status changes reflected in UI
IoT Events	Push live sensor or machine data to display

---

Benefits of Using SignalR with Power Automate

• Real-Time User Experience: No more waiting or polling for data changes.
• Serverless and Scalable: Azure Function + SignalR combo handles thousands of connections.
• Low-Code Friendly: Power Automate handles logic; only minimal coding required for client side.
• Flexible Integration: Works with SharePoint, Dataverse, custom apps, and external APIs.

---

Challenges and Tips

Challenge	Solution
Client Load Handling	Use Azure SignalR with auto-scale
Unauthorized Access	Secure Function endpoints with keys
Complex UI Updates	Use frontend frameworks like React for dynamic rendering
Flow Execution Lag	Monitor flow runs, optimize trigger speed
Multiple Clients	Use connection groups in SignalR to target specific users