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

Dfccee30e1e9615539372a759222c40e?s=128

Vladimir Georgiev

November 24, 2018
Tweet

Transcript

  1. Fancy Features in Asp.Net Core SignalR Vladimir Georgiev Software Development

    Lead @ Concep VGeorgiev.org
  2. None
  3. None
  4. None
  5. Real time web apps are not fancy anymore

  6. Users expect Real-Time

  7. HTTP

  8. HTTP

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

  10. Web Sockets open connection close connection

  11. SignalR

  12. None
  13. SignalR Configuration app.UseSignalR(routes => { routes.MapHub<ChatHub>("/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+
  14. SignalR Hub public class ChatHub : Hub { public async

    Task SendMessage(string user, string message) { await Clients.All.SendAsync("receiveMessage", user, message); } } ChatHub.cs
  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
  16. JSON & MessagePack Protocols

  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(); <script src="~/lib/signalr/signalr.js"></script> <script src="~/lib/msgpack5/msgpack5.js"></script> <script src="~/lib/signalr/signalr-protocol-msgpack.js"></script>
  18. Inject IHubContext

  19. Injecting HubContext everywhere public class ChatController : ControllerBase { private

    readonly IHubContext<ChatHub> chatHub; public ChatController(IHubContext<ChatHub> chatHub) { this.chatHub = chatHub; } [HttpGet("/Message")] public Task SendMessage(string message) { return this.chatHub.Clients.All.SendAsync("receiveMessage", "Controller", message); } }
  20. Strongly-Typed Hubs

  21. Dynamic & magic string calls • ASP.NET SignalR • Asp.Net

    Core SignalR Clients.All.broadcastMessage(name, message); Clients.All.SendAsync("receiveMessage", user, message);
  22. Strongly Typed Hubs public class StronglyTypedHub : Hub<IChatClient> { public

    async Task SendMessage(string user, string message) { await Clients.All.ReceiveMessage(user, message); } } public interface IChatClient { Task ReceiveMessage(string user, string message); }
  23. Authentication & Authorization

  24. Authentication & Authorization • Cookie authentication • Bearer token authentication

    [Authorize] public class ChatHub : Hub { [Authorize("MyAuthorizationPolicy")] public async Task Send(string message) { } }
  25. Streaming

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

  27. Streaming public ChannelReader<string> ShowMeTheWords(int delay) var channel = Channel.CreateUnbounded<string>(); return

    channel.Reader; StreamingHub.cs
  28. Streaming public ChannelReader<string> ShowMeTheWords(int delay) var channel = Channel.CreateUnbounded<string>(); return

    channel.Reader; await writer.WriteAsync(words[i]); writer.Complete(); StreamingHub.cs
  29. Streaming private List<string> words = { /* some words */

    }; public ChannelReader<string> ShowMeTheWords(int delay) { var channel = Channel.CreateUnbounded<string>(); _ = WriteItemsAsync(channel.Writer, delay); return channel.Reader; } private async Task WriteItemsAsync(ChannelWriter<string> w, int delay) { for (var i = 0; i < words.Count; i++) { await writer.WriteAsync(words[i]); await Task.Delay(delay); } writer.Complete(); } StreamingHub.cs
  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
  31. Summary • SignalR • MessagePack • HubContext • Strongly-Typed Hubs

    • Authentication & Authorization • Streaming
  32. None
  33. Use Real-Time Vladimir Georgiev VGeorgiev.org