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
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
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
33. Use Real-Time Vladimir Georgiev VGeorgiev.org