$30 off During Our Annual Pro Sale. View Details »

Fancy Features in Asp.Net Core SignalR

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

Vladimir Georgiev

November 24, 2018
Tweet

More Decks by Vladimir Georgiev

Other Decks in Technology

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