Skip to main content

SignalR

Setup​

  1. Install dev tunnels

    brew install --cask devtunnel
    info

    More info can be found here: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=macos

    info

    If you're using Visual Studio or VS Code, you can use the built-in dev tunnel support.

Demo​

  1. Open JusticeVoter.slnx

  2. Run the server project

    cd JusticeVoter.Server
    dotnet run

  3. login to Azure Dev Tunnel

    devtunnel user login

  4. Start dev tunnel

    devtunnel host -p 7153 --protocol https --allow-anonymous

  5. Paste dev tunnel link in chat + QR code on screen

    presenter

    QR Code can be created via Chrome by going to the dev tunnel URL and clicking on the share icon in the address bar.

  6. Stay on Superman screen and let everyone else vote

  7. Explore:

  • SignalR messages going back and forth

Process Flow​

This diagram shows the interactions between the Blazor Client and ASP.NET Core Web Server for the JusticeVoter application.

Key Interactions Explained​

1. HTTP API Endpoints​

  • GET /heroes/{heroName} - Retrieves list of heroes for a specific hero type
  • GET /votes/{heroId} - Gets current vote tally for a specific hero
  • POST /votes/clear - Clears all votes (admin function)

2. SignalR Hub Methods​

  • SendVote(Vote) - Client sends vote to server
  • ClearVotes() - Server initiates vote clearing

3. SignalR Client Events​

  • "Vote" - Broadcast when a new vote is received
  • "Refresh" - Broadcast when votes are cleared

4. Real-time Features​

  • When a user votes, all connected clients receive immediate updates
  • Vote tallies are refreshed via HTTP API calls after SignalR events
  • Charts are updated in real-time across all clients

5. Data Flow​

  • Initial data load uses HTTP APIs
  • Real-time updates use SignalR for notifications + HTTP APIs for data refresh
  • Vote persistence is handled server-side in the HeroService