Skip to main content

Real-Time Updates Quick Start

Quick setup guide for SignalR real-time updates in FishingLog.

Quick Setup (15 minutes)​

1. Install SignalR​

cd FishingLog.API
dotnet add package Microsoft.AspNetCore.SignalR

2. Create Social Hub​

Create FishingLog.API/Hubs/SocialHub.cs:

using Microsoft.AspNetCore.SignalR;
using Microsoft.AspNetCore.Authorization;

[Authorize]
public class SocialHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        var userId = Context.UserIdentifier;
        await Groups.AddToGroupAsync(Context.ConnectionId, $"user-{userId}");
        await base.OnConnectedAsync();
    }

    public override async Task OnDisconnectedAsync(Exception? exception)
    {
        var userId = Context.UserIdentifier;
        await Groups.RemoveFromGroupAsync(Context.ConnectionId, $"user-{userId}");
        await base.OnDisconnectedAsync(exception);
    }
}

3. Configure SignalR​

Update Program.cs:

using Microsoft.AspNetCore.SignalR;

var builder = WebApplication.CreateBuilder(args);

// Add SignalR (after AddControllers)
builder.Services.AddSignalR();

// ... existing code ...

var app = builder.Build();

// ... existing middleware ...

// Map SignalR hub (BEFORE MapControllers)
app.MapHub<SocialHub>("/hubs/social");

app.MapControllers();

app.Run();

4. Update SocialController​

Add SignalR to SocialController.cs:

public class SocialController : ControllerBase
{
    private readonly AppDbContext _db;
    private readonly IHubContext<SocialHub> _hubContext; // Add this
    private readonly ILogger<SocialController> _logger;

    public SocialController(
        AppDbContext db,
        IHubContext<SocialHub> hubContext, // Add this
        ILogger<SocialController> logger)
    {
        _db = db;
        _hubContext = hubContext; // Add this
        _logger = logger;
    }

    [HttpPost("posts")]
    public async Task<ActionResult<Post>> CreatePost([FromBody] CreatePostRequest request)
    {
        // ... existing create post logic ...

        // Add this at the end:
        await _hubContext.Clients.Group($"user-{currentUser.Id}")
            .SendAsync("NewPost", post);

        return CreatedAtAction(nameof(GetPost), new { id = post.Id }, post);
    }
}

5. Test It Works​

Create a simple HTML test page:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
</head>
<body>
    <h1>SignalR Test</h1>
    <div id="messages"></div>

    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("https://your-api-url/hubs/social", {
                accessTokenFactory: () => "YOUR_JWT_TOKEN"
            })
            .build();

        connection.start().then(() => {
            console.log("Connected!");
        });

        connection.on("NewPost", (post) => {
            document.getElementById("messages").innerHTML += 
                `<p>New post: ${post.content}</p>`;
        });
    </script>
</body>
</html>

What Changed?​

✅ Added: SignalR hub for real-time communication
✅ Updated: SocialController to send real-time updates
✅ No Breaking Changes: REST API still works exactly the same

Next Steps​

  1. ✅ Basic SignalR setup complete
  2. ⬜ Add more hubs (NotificationHub, TournamentHub)
  3. ⬜ Update more controllers (LikePost, AddComment)
  4. ⬜ Test with frontend apps
  5. ⬜ Enable sticky sessions on ALB (when scaling)

See Real-Time Updates Strategy for complete details.