Fancy Features in Asp.Net Core SignalR
0 likes321 views
The document discusses ASP.NET Core SignalR for building real-time web applications, detailing configuration for hubs, client-side integration, and support for both JSON and MessagePack protocols. It explains the usage of strongly-typed hubs, authentication and authorization methods, and streaming capabilities for efficient communication. Additionally, it provides code examples for sending messages and handling connections in real-time environments.
![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);
}
}](https://image.slidesharecdn.com/signalr-181126072853/85/Fancy-Features-in-Asp-Net-Core-SignalR-19-320.jpg)
![Authentication & Authorization
• Cookie authentication
• Bearer token authentication
[Authorize]
public class ChatHub : Hub
{
[Authorize("MyAuthorizationPolicy")]
public async Task Send(string message)
{
}
}](https://image.slidesharecdn.com/signalr-181126072853/85/Fancy-Features-in-Asp-Net-Core-SignalR-24-320.jpg)
![Streaming
public ChannelReader<string> ShowMeTheWords(int delay)
var channel = Channel.CreateUnbounded<string>();
return channel.Reader;
await writer.WriteAsync(words[i]);
writer.Complete();
StreamingHub.cs](https://image.slidesharecdn.com/signalr-181126072853/85/Fancy-Features-in-Asp-Net-Core-SignalR-28-320.jpg)
![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](https://image.slidesharecdn.com/signalr-181126072853/85/Fancy-Features-in-Asp-Net-Core-SignalR-29-320.jpg)
Fancy Features in Asp.Net Core SignalR
- 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
- 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
- 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>
- 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); } }
- 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); }
- 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