Fancy Features in Asp.Net Core SignalR

Asp.Net Core SignalR is a library that makes developing real-time web functionality easy and allows bi-directional communication between server and client. In this presentation we are going to take a look at interesting features part of the new versions of SignalR (as part of Asp.Net Core), so you can build real-time web applications with all the benefits of ASP.NET Core like better performance and cross-platform support.

Demos: https://github.com/VGGeorgiev/Talks/tree/master/PlovDev%20-%20Fancy%20Features%20in%20Asp.Net%20Core%20SignalR

Transcript

1. Fancy Features in
   Asp.Net Core SignalR
   Vladimir Georgiev
   Software Development Lead @ Concep
   VGeorgiev.org
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. Real time web apps are not fancy anymore
   

   View Slide

6. Users expect Real-Time
   

   View Slide

7. HTTP
   

   View Slide

8. HTTP
   

   View Slide

9. Long Polling & Server-Sent Events
   …
   connection
   close connection
   events
   

   View Slide

10. Web Sockets
    open connection
    close connection
    

    View Slide

11. SignalR
    

    View Slide

12. View Slide

13. SignalR Configuration
    app.UseSignalR(routes =>
    {
    routes.MapHub("/chatHub");
    });
    services.AddSignalR()
    Startup.cs
    https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr
    • Use Visual Studio 2017 15.8+
    • Use .NET Core SDK 2.1+
    

    View Slide

14. SignalR Hub
    public class ChatHub : Hub
    {
    public async Task SendMessage(string user, string message)
    {
    await Clients.All.SendAsync("receiveMessage", user, message);
    }
    }
    ChatHub.cs
    

    View Slide

15. Client-side Code
    var connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub").build();
    connection.on("receiveMessage", function (user, message) {
    // Append the message to DOM
    });
    connection.start();
    document.getElementById("sendButton").addEventListener("click",
    function (event) {
    connection.invoke("SendMessage", user, message);
    });
    chat.js
    

    View Slide

16. JSON & MessagePack
    Protocols
    

    View Slide

17. JSON & MessagePack Protocols
    Install package Microsoft.AspNetCore.SignalR.Protocols.MessagePack
    services.AddSignalR().AddMessagePackProtocol();
    var connection = new signalR.HubConnectionBuilder()
    .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
    .withUrl("/chatHub").build();
    
    
    
    

    View Slide

18. Inject IHubContext
    

    View Slide

19. Injecting HubContext everywhere
    public class ChatController : ControllerBase
    {
    private readonly IHubContext chatHub;
    public ChatController(IHubContext chatHub)
    {
    this.chatHub = chatHub;
    }
    [HttpGet("/Message")]
    public Task SendMessage(string message)
    {
    return this.chatHub.Clients.All.SendAsync("receiveMessage",
    "Controller", message);
    }
    }
    

    View Slide

20. Strongly-Typed Hubs
    

    View Slide

21. Dynamic & magic string calls
    • ASP.NET SignalR
    • Asp.Net Core SignalR
    Clients.All.broadcastMessage(name, message);
    Clients.All.SendAsync("receiveMessage", user, message);
    

    View Slide

22. Strongly Typed Hubs
    public class StronglyTypedHub : Hub
    {
    public async Task SendMessage(string user, string message)
    {
    await Clients.All.ReceiveMessage(user, message);
    }
    }
    public interface IChatClient
    {
    Task ReceiveMessage(string user, string message);
    }
    

    View Slide

23. Authentication & Authorization
    

    View Slide

24. Authentication & Authorization
    • Cookie authentication
    • Bearer token authentication
    [Authorize]
    public class ChatHub : Hub
    {
    [Authorize("MyAuthorizationPolicy")]
    public async Task Send(string message)
    {
    }
    }
    

    View Slide

25. Streaming
    

    View Slide

26. Streaming
    public ChannelReader ShowMeTheWords(int delay)
    StreamingHub.cs
    

    View Slide

27. Streaming
    public ChannelReader ShowMeTheWords(int delay)
    var channel = Channel.CreateUnbounded();
    return channel.Reader;
    StreamingHub.cs
    

    View Slide

28. Streaming
    public ChannelReader ShowMeTheWords(int delay)
    var channel = Channel.CreateUnbounded();
    return channel.Reader;
    await writer.WriteAsync(words[i]);
    writer.Complete();
    StreamingHub.cs
    

    View Slide

29. Streaming
    private List words = { /* some words */ };
    public ChannelReader ShowMeTheWords(int delay)
    {
    var channel = Channel.CreateUnbounded();
    _ = WriteItemsAsync(channel.Writer, delay);
    return channel.Reader;
    }
    private async Task WriteItemsAsync(ChannelWriter w, int delay)
    {
    for (var i = 0; i < words.Count; i++)
    {
    await writer.WriteAsync(words[i]);
    await Task.Delay(delay);
    }
    writer.Complete();
    }
    StreamingHub.cs
    

    View Slide

30. Streaming
    var connection = new signalR.HubConnectionBuilder()
    .withUrl("/streamingHub").build();
    connection.start();
    connection.stream("ShowMeTheWords", 750).subscribe({
    next: (item) => { /* render item */ },
    complete: () => { /* complete */ },
    error: (err) => { /* show error */ }
    });
    Streaming.js
    

    View Slide

31. Summary
    • SignalR
    • MessagePack
    • HubContext
    • Strongly-Typed Hubs
    • Authentication & Authorization
    • Streaming
    

    View Slide

32. View Slide

33. Use Real-Time
    Vladimir Georgiev
    VGeorgiev.org
    

    View Slide