Web PubSub and Web App (PHP 8.2 / Laravel) and Static Web App

Tengku Aiman 120 Reputation points
2026-05-15T12:32:38.6466667+00:00

Hello, I want to use Web PubSub as my WebSockets for notifications across the system and want to connect with my Web App. My Web App also connected to Static Web App as a frontend to display the notifications. I’m a bit confused on the setting up the connections and using it.

Thank you for your help :)

Azure Web PubSub
Azure Web PubSub

An Azure service that provides real-time messaging for web applications using WebSockets and the publish-subscribe pattern.

3 answers

Sort by: Oldest
Most helpful Newest Oldest

  1. AI answer

    2026-05-15T12:33:04.1933333+00:00

    Use Azure Web PubSub as the real-time messaging layer between the Laravel backend (Web App) and the Static Web App frontend. The high-level flow is:

    1. The frontend (Static Web App) opens a WebSocket connection to Azure Web PubSub.
    2. The backend (Laravel in Web App) uses Web PubSub’s REST APIs/SDK to send notifications to hubs/groups/users.
    3. Web PubSub fan-outs messages to connected clients.

    A practical setup based on the documented patterns:

    1. Design hubs, groups, and users
      • Create at least one hub for notifications, for example notifications.
      • Use groups for logical channels (for example, per-tenant or per-feature groups) and/or userId to target specific users.
      • Concepts are defined in the service as:
        • Hub = logical set of client connections (for example, chat or notification hub).
        • Group = subset of connections in a hub (for example, a room or topic).
        • User = identity that can own multiple connections (for example, same user on multiple devices).
    2. Connect the Static Web App frontend
      • The frontend connects using the standard WebSocket protocol directly to Web PubSub.
      • For client-side pub/sub without always going through the backend, use the json.webpubsub.azure.v1 subprotocol: 
             const ws = new WebSocket(
       "wss://<your-service>.webpubsub.azure.com/client/hubs/notifications",
       "json.webpubsub.azure.v1"
     );
      • After connection, the client can:
        • Join groups by sending JSON messages like: 
                 { "type": "joinGroup", "group": "<group_name>" }
        • Receive messages that Web PubSub broadcasts to that group or hub.
    3. Connect the Laravel backend (Web App)
      • The backend does not need to maintain WebSocket connections itself; it uses Web PubSub’s server-side APIs to manage connections and send messages.
      • From PHP, call the Web PubSub REST APIs to:
        • Broadcast to all connections in a hub.
        • Send to a specific group.
        • Send to a specific user.
      • Typical pattern:
        • When an event occurs in Laravel (for example, new notification), call Web PubSub REST endpoint to send a message to the relevant hub/group/user.
    4. Serverless/event-driven option (if adding Azure Functions)
      • Instead of (or in addition to) calling REST directly from Laravel, an Azure Function can be used as an event handler:
        • Web PubSub triggers events like connected, disconnected, and message to the function.
        • The function can then push notifications, persist messages, or route them to other services.
      • This pattern is documented for building serverless chat/notification apps and can be adapted to Laravel as the upstream system.
    5. Security and connection management
      • Use hubs and groups to control which notifications each client receives.
      • Protect Web PubSub connection strings and keys; treat them like root passwords.
      • In production, store keys in a secure store such as Azure Key Vault and avoid hard-coding them in Laravel or frontend code.
    6. Typical end-to-end flow for notifications
      • User opens the Static Web App → frontend JS connects to Web PubSub hub and joins one or more groups.
      • User performs an action or a background process in Laravel triggers a notification.
      • Laravel calls Web PubSub REST API to send a message to the target hub/group/user.
      • Web PubSub delivers the message in real time to all connected clients in that hub/group.
      • Frontend receives the message over WebSocket and updates the UI (for example, shows a toast or updates a notifications list).

    This architecture keeps WebSockets and connection fan-out in Web PubSub, while Laravel focuses on business logic and the Static Web App focuses on UI.

    References:

    AI-generated content may be incorrect. Read our transparency notes for more information.

    Was this answer helpful?

  2. kagiyama yutaka 5,330 Reputation points
    2026-05-15T15:01:24.63+00:00

    I think the clean setup is that Laravel sends notifications with Web PubSub REST send and issues a signed client URL, and ur Static Web App connects with the JS client WebSocket to receive and show them.

    Was this answer helpful?

    0 comments
  3. Golla Venkata Pavani 7,535 Reputation points Microsoft External Staff Moderator
    2026-05-15T17:17:01.13+00:00

    Hi @Tengku Aiman,

    Thanks for reaching out! Azure Web PubSub is an excellent fit for handling WebSocket-based notifications in your setup. Your Laravel app can securely handle authentication and token generation, while your Static Web Apps frontend connects directly to PubSub for real-time updates.

    Recommended Architecture:

    1. Laravel Backend – Authenticates the user and exposes a protected /negotiate endpoint that returns a short-lived Client Access URL (with JWT token).
    2. Azure Web PubSub – Manages the WebSocket connections and message delivery (to specific users, groups, or broadcast).
    3. Static Web Apps Frontend – Calls your negotiate endpoint, then opens a WebSocket connection to PubSub to receive notifications.

    This keeps your connection string secure on the server side.
    Quick Implementation Steps:
    In Laravel (Negotiate Endpoint): Create a protected route that calls the Web PubSub REST API to generate a token for the authenticated user.

    public function negotiate()
{
    $userId = auth()->id();
    // Parse connection string and call POST {endpoint}/api/hubs/{hub}/:generateToken
    // Return the full client URL: wss://<your-service>.webpubsub.azure.com/client/hubs/{hub}?access_token=...
}

    Publishing Notifications: Use the REST API from Laravel to send messages to specific users or groups.
    In your Static Web Apps (JavaScript):

    const response = await fetch('/negotiate');
const { url } = await response.json();
const ws = new WebSocket(url);
ws.onmessage = (event) => {
    // Handle incoming notification and update UI
};

    This pattern follows standard best practices for secure real-time apps.
    Reference:
    https://learn.microsoft.com/en-us/azure/azure-web-pubsub/howto-generate-client-access-url
    https://learn.microsoft.com/en-us/rest/api/webpubsub/dataplane/web-pub-sub/generate-client-token
    https://learn.microsoft.com/en-us/azure/azure-web-pubsub/howto-websocket-connect
    https://learn.microsoft.com/en-us/azure/azure-web-pubsub/tutorial-serverless-static-web-app

    Kindly let us know if the above helps or you need further assistance on this issue.

    Please "accept" if the information helped you. This will help us and others in the community as well.

    Was this answer helpful?

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.