Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. SignalR Hub public class ChatHub : Hub { public async

    Task SendMessage(string user, string message) { await Clients.All.SendAsync("receiveMessage", user, message); } } ChatHub.cs
  2. 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
  3. 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>
  4. 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); } }
  5. Dynamic & magic string calls • ASP.NET SignalR • Asp.Net

    Core SignalR Clients.All.broadcastMessage(name, message); Clients.All.SendAsync("receiveMessage", user, message);
  6. 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); }
  7. Authentication & Authorization • Cookie authentication • Bearer token authentication

    [Authorize] public class ChatHub : Hub { [Authorize("MyAuthorizationPolicy")] public async Task Send(string message) { } }
  8. Streaming public ChannelReader<string> ShowMeTheWords(int delay) var channel = Channel.CreateUnbounded<string>(); return

    channel.Reader; await writer.WriteAsync(words[i]); writer.Complete(); StreamingHub.cs
  9. 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
  10. 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
  11. Summary • SignalR • MessagePack • HubContext • Strongly-Typed Hubs

    • Authentication & Authorization • Streaming