ServerSentEventsV2.pdf
- 2. Software developer, father, geek, PHP expert. I also write in Java, Kotlin, NodeJs. For me, the language is not a problem I prefer to focus on the software architecture. Open-source enthusiast, active contributor on GitHub and Stackover fl ow. Chi sono Alessandro Minoccheri Team leader & Software developer @minompi AlessandroMinoccheri
- 6. Constraints • Time: Delivery release 1 in a few month s • Code Quality Maintainability code with good coverage • Auction engine
- 7. Auction engine • Auction common behaviours starts and stops without delays • Different type of bid: buy now, bid, automatic bi d • Push notifications to update all clients subscribed to a specific channel • Other features
- 8. Solutions to build an auction engine in a short time • Adding a new micro service in NodeJ S • Adding the business logic into Next.j s • Using Websocke t • Using Server-sent events
- 9. Cognitive Bias A cognitive bias is a systematic pattern of deviation from norm or rationality in judgment. Individuals create their own "subjective reality" from their perception of the input. An individual's construction of reality, not the objective input, may dictate their behaviours in the world. Image from: https://www.verywellmind.com/what-is-a-con fi rmation-bias-2795024
- 10. What is the Server-Sent events approach? _
- 11. Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via an HTTP connection. It was born on September 1, 2006. It provides a memory-efficient implementation of XHR streaming. Unlike a raw XHR connection, which buffers the full received response until the connection is dropped, an SSE connection can discard processed messages without accumulating all of them in memory.
- 13. Image from https://www.onlyfullstack.com/polling-vs-server-sent-events-vs-websocket/
- 14. Image from https://www.onlyfullstack.com/polling-vs-server-sent-events-vs-websocket/
- 16. Websocket • client <—> server, bidirectional communication. • Create a TCP connection to the server, and keep it open as long as needed. • The server or client can easily close the connection. • The client goes through an HTTP compatible handshake process . • If it succeeds, then the server and client can exchange data in both directions at any time . • Uses websocket protocol
- 17. Server-Sent Events • request --> wait --> server can send events, unidirectional communication. • Creates a connection to the server, but maintains a keep-alive connection open for some time (not long though). • Uses HTTP protocol
- 18. Websocket Advantages • Bi-directional communication in realtime, connections can both send and receive data from the browser (chat example ) • Generally do not use ‘XMLHttpRequest' and headers are not sent every- time so it reduces the expensive data loads being sent to the server . • Can transmit both binary data and UTF- 8 • Browser support compatibility is more with WebSockets.
- 19. Websocket limits • When connections are terminated WebSockets don’t automatically recover, you need to implement it by yoursel f • Some enterprise firewalls with packet inspection have trouble dealing with i t • Browsers that are older than 2011 do not support WebSocket connection s • WebSockets are more complex and task-demanding to set up. Because it requires a ton of upfront wor k • It cannot be placed behind container-based authentication methods with header- based security, it has to be query parameters (or hopefully, a token-based authentication where the token is established outside the WebSocket path).
- 20. SSE Advantages • Transported over simple HTTP instead of a custom protoco l • Simpler protoco l • Built in support for re-connection and event-i d • No trouble with corporate firewalls doing packet inspection
- 21. SSE ideal cases • Stock update s • Twitter feed updatin g • Notifications to browser
- 22. SSE limits • It’s limited to UTF-8, and does not support binary data . • When not used over HTTP/2, Server-Sent events approach is subject to limitations with regard to the maximum number of open connections. This can be especially painful when opening various tabs as the limit is per browser and set to a very low number (6) . • SSE is mono-directiona l • Not native browsers support
- 23. Browser Supports Another notable difference is the browser compatibility of the two technologies. More browsers support WebSockets natively than SSEs. However, there are available workaround with poly-fill (replicate an API) in Javascript that simulate the SSE functionality to solve this issue. All modern browsers support server-sent events: Firefox 6+, Google Chrome 6+, Opera 11.5+, Safari 5+, Microsoft Edge 79+ .
- 25. We choose Server-Sent Events and symfony/mercure for the implementation _
- 26. The symfony/mercure component implements the “publisher" part of the Mercure Protocol
- 27. Let’s try to implement it from scratch https://github.com/AlessandroMinoccheri/sse-poc _
- 30. Configuration
- 38. Opening page
- 40. Offer
- 45. Now we can complicate the system _
- 46. How to send an event to a specific user?
- 47. How to send an event to a specific user?
- 48. Async dispatching Async dispatching is discouraged. Most Mercure hubs already handle publications asynchronously and using Messenger is usually not necessary . Instead of calling the Publisher service directly, you can also let Symfony dispatching the updates asynchronously thanks to the provided integration with the Messenger component . First, be sure to install the Messenger component and to configure properly a transport (if you don't, the handler will be called synchronously) .
- 51. How to catch mercure connection problems? • Add an health check system for you mercure containe r • Add logs to your frontend (Sentry ) • Add logs to your backend
- 52. How did we implement it? _
- 55. Implementation inside the Processor
- 56. How to test it? _
- 57. Using a mock
- 58. Using stub class
- 59. Send new tweet to all clients subscribed _
- 60. Service class
- 61. • Frontend client can subscribe to different topic s • Backend can send, via mercure, events to a specific topi c • Frontend receive events inside the subscribe connection request Recap
- 62. • SSE is very useful for specific problem s • Easy to star t • Small configuratio n • It’s in production Summary