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. Demo: https://github.com/VGGeorgiev/Talks/tree/master/PlovDev%20-%20Fancy%20Features%20in%20Asp.Net%20Core%20SignalR

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