come ti "pusho" il web con websockets: da 0 a signalr
TRANSCRIPT
![Page 1: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/1.jpg)
18 NOVEMBRE 2016
Come ti "pusho" il web con WebSockets: da 0 a SignalRAlessandro Melchiori / @amelchiori
![Page 2: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/2.jpg)
![Page 3: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/3.jpg)
Web.vNext()
• Today’s applications demand real-time, low-latency messaging•Users expect to be able to interact with data as close
to real-time as possible•No needs to hit refresh button
![Page 4: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/4.jpg)
Periodic Polling
Polling an endpoint at a given interval and returning data when it is available
![Page 5: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/5.jpg)
Long polling
The server/endpoint holds on to the HTTP request until there is data/payload available and then returns to the client. The client then follows up with another request and waits until new data or event/payload is available.
![Page 6: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/6.jpg)
The WebSocket protocol
The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the origin-based security model commonly used by web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g., using XMLHttpRequest or <iframe>s and long polling).
https://tools.ietf.org/html/rfc6455
![Page 7: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/7.jpg)
The WebSocket protocol
The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the origin-based security model commonly used by web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g., using XMLHttpRequest or <iframe>s and long polling).
https://tools.ietf.org/html/rfc6455
![Page 8: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/8.jpg)
WebSocket: how it works
• Client and server establish initial handshake over HTTP/S • Client request upgrades• Server accepts upgrade request and establish socket connection• Client and/or server send messages
![Page 9: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/9.jpg)
DEMO
![Page 10: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/10.jpg)
Welcome SignalR
• SignalR is a library that allows bi-directional communication between server and client. • SignalR supports Web Sockets, and falls back to other compatible
techniques for older browsers. • SignalR includes APIs for connection management (for instance,
connect and disconnect events), grouping connections, and authorization.
![Page 11: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/11.jpg)
SignalR architecture
message cache
publisher
client client client client client
worker worker worker
message bus
- serializzazione- salvataggio in cache- “deliverable”
- selezione worker- recupero messaggio
notifica al client (specific transport)
![Page 12: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/12.jpg)
DEMOInstall-Package Microsoft.AspNet.SignalR
![Page 13: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/13.jpg)
BackendBackend
SignalR: real scenario
FrontEnd
Rabb
itMQ
Backend
MSG
HTTP
MSG
MSGMSG
WS
![Page 14: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/14.jpg)
DEMO
![Page 15: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/15.jpg)
FrontEndFrontEnd
SignalR: scale-out
BackendBackend
FrontEnd
Rabb
itMQ
Backend
MSG
HTTP
MSG
MSGMSG
WS
![Page 16: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/16.jpg)
SignalR: scale-out
•How do messages from one server get to the other servers in my web farm?
![Page 17: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/17.jpg)
SignalR: scale-out
web nodes
clients
backplane
![Page 18: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/18.jpg)
DEMO
![Page 19: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/19.jpg)
SignalR: asp.net core?• Open source: https://github.com/aspnet/SignalR
• Completely rewritten• Client package -> typescript
• Full integration with asp.net core IoC
![Page 20: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/20.jpg)
SignalR: asp.net core?
•Configure nuget to load preview package
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<add key="AspNetCore" value="https://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json" />
<add key="NuGet" value="https://api.nuget.org/v3/index.json" />
</packageSources>
</configuration>
![Page 21: Come ti "pusho" il web con WebSockets: da 0 a SignalR](https://reader035.vdocuments.mx/reader035/viewer/2022070510/58abf1931a28ab504e8b6799/html5/thumbnails/21.jpg)
Grazie!
Contatti:
• https://twitter.com/amelchiori• http://melkio.codiceplastico.com• [email protected]