Processing a large volume of concurrent events between Blazor and JavaScript with no latency

Microsoft’s Blazor transforms client-side programming for .NET developers by leveraging WebAssembly (WASM) to execute C# code directly in the browser. While Blazor fundamentally reduces the need for context switching between languages and technologies, it introduces a nuanced dependency on JavaScript through its JavaScript Interoperability (JS Interop) layer. JS Interop is essential in Blazor WebAssembly for certain JavaScript-based tasks, such as DOM manipulation, where WebAssembly’s capabilities are limited. 

Furthermore, the reliance on JavaScript highlights a critical optimization area in web development with Blazor and WebAssembly: reducing the overhead associated with inter-runtime data transmission to enhance application performance. 

Interoperability challenges in Blazor WebAssembly often arise from the need to serialize complex data objects into strings for transmission through the JS interop layer, followed by deserialization back into JavaScript or .NET objects. This stems from WASM operating in a sandboxed execution environment with its own memory space, preventing direct memory access between WASM and JS. This serialization-deserialization cycle not only introduces computational overhead but also increases the complexity of the codebase, potentially leading to maintenance and scalability issues. The performance implications are particularly evident in applications that require real-time interactions or high-frequency throughput for constant data updates, where even a few milliseconds of delay can negatively impact the user experience. 

So how can you pass thousands of real-time events between Blazor and JavaScript through the JS interop? The short answer is – you cannot. 

To further highlight the constraints inherent to JS Interop, it is essential to recognize an internal .NET bottleneck: an exception occurs when rendering multiple parallel streams that use IJSStreamReference. While this limitation is scheduled to be addressed in the upcoming .NET 9 release, it currently underscores the need to use WebSocket via SignalR as an effective transmitting protocol. 

How we at Resolute handled this 

Efficient binary data handling   

To bypass these bottlenecks, our team at Resolute introduced a proprietary WebSocket connection, effectively sidestepping the standard JS interop data handling methods. This solution establishes a direct, efficient data transmission channel using WebSockets over TCP. By leveraging SignalR—a robust library built atop WebSockets—we enhanced its capabilities to facilitate bidirectional communication capable of handling large volumes of events. This setup supports high-throughput streaming of binary data—such as mouse coordinates in collaborative tools or real-time updates on monitoring dashboards—without the typical overhead. 

Dual hub system  

To further optimize data flow, Resolute has strategically engineered two separate hubs– one focused on the Blazor UI and the other serving the JavaScript-based UI. At their core, both hubs utilize SignalR for robust data transmission. The JS SignalR hub is specifically designed to bypass the main thread, which often creates bottlenecks when processing many events, leading to significant slowdowns or complete freezes, that negatively impact load time and user experience. This hub not only facilitates the bidirectional exchange of binary data but also overcomes the known issue of rendering multiple simultaneous streams, a known issue in the latest versions of .NET.

Meanwhile, the Blazor hub also operates over SignalR and maintains real-life application updates. It facilitates simultaneous updates across different clients and supports precise server-to-server and server-to-client communication.

This dual hub approach ensures the application can handle thousands of events concurrently and across multiple users without the lag or bottleneck issues typically associated with standard JS interop mechanisms.  

We added an additional security layer 

Our customized SignalR connection not only enhances the speed and efficiency of data transmission but also adds a sophisticated layer of communication management. By enabling targeted communication, our system directs the information flow to individual users or specific groups. This precision ensures that sensitive or critical information is shared only with authorized recipients, improving security and efficiency. Such functionality is vital in scenarios where data must remain confidential or when the application's logic requires differential data access based on user roles or permissions.   

How to apply this solution across industries 

The innovative technology developed by Resolute has versatile applications and can be leveraged across various industries, ultimately revolutionizing real-time web applications.

Logistics:  

By facilitating the high-throughput, real-time streaming of binary data, our technology allows logistics companies to receive instantaneous updates on the location and status of goods. This not only improves operational efficiency but also enhances decision-making processes. For instance, logistic platforms that integrate our technology can dynamically reroute shipments in response to delays or changes in conditions, thereby minimizing downtime and improving service reliability. 

Gaming:  

Real-time interaction is crucial in the gaming industry, especially in multiplayer environments. Our enhanced SignalR implementation supports robust, low-latency communication for smoother and more synchronized gameplay.

This technology also extends to healthcare, where it can facilitate faster telemedicine responses, and in IoT applications, enabling efficient real-time data streaming from numerous sensors. Our solution ensures robust security and scalability, making it adaptable for use in industries like finance and healthcare, where secure and reliable data transmission is critical.  

Resolute’s impact on web development  

Resolute’s innovative approach addresses a significant challenge in developing interactive, real-time web applications with Blazor WASM. By bypassing the conventional JS interop's limitations, our solution enhances the application's responsiveness and scalability, which is crucial for applications requiring high-frequency updates or real-time collaboration features. 

By confronting the JS interop challenges head-on with a tailored WebSocket connection, Resolute is redefining the standards for developing interactive, real-time web applications using Blazor WebAssembly. We not only improve the performance of Blazor (WebAssembly) web applications but also demonstrate our leadership in leveraging complex technologies to deliver superior digital experiences. This commitment to technology advancement and client success positions Resolute as a go-to partner for businesses seeking to push the boundaries of what's possible in web application development.