Скачать или смотреть Resolving SignalR C# Client HubConnection.On Not Fired in Blazor WebAssembly

Learn how to fix the issue of `SignalR` not firing in your Blazor WebAssembly application by adjusting your JSON serialization settings.
---
This video is based on the question https://stackoverflow.com/q/62872178/ asked by the user 'petyusa' ( https://stackoverflow.com/u/9740077/ ) and on the answer https://stackoverflow.com/a/62892357/ provided by the user 'petyusa' ( https://stackoverflow.com/u/9740077/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: SignalR C# Client Hubconnection.On not fired

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving SignalR C# Client HubConnection.On Not Fired in Blazor WebAssembly

SignalR is a powerful library that allows real-time web functionality in applications, enabling a connection between clients and servers. However, developers sometimes encounter issues where the expected event handlers, such as the HubConnection.On method, do not trigger as expected in their applications. In this guide, we'll explore a common problem faced when migrating an application from Angular to Blazor WebAssembly, particularly focusing on why HubConnection.On may not fire, and how to resolve this issue effectively.

The Problem: HubConnection.On Not Invoking

While working on a Blazor WebAssembly application that replaces an Angular app, a developer reported that the HubConnection.On method does not get invoked even though the server sends data successfully. Here's a brief overview of the user's setup:

ASP.NET Core WebAPI with SignalR.

Blazor WebAssembly client that replaces an Angular app.

The user created a connection to a SignalR hub, but upon receiving data, the callback function specified with the HubConnection.On method was not invoked. This was perplexing, especially since everything seemed to be properly connected, as indicated by the network tab in the browser's developer tools.

Analyzing the Code

The initial connection setup looked like this:

[[See Video to Reveal this Text or Code Snippet]]

The user verified the server-side implementation of the SignalR hub, which could successfully send messages to the clients. However, messages would not trigger the HubConnection.On method.

The Solution: Adding JSON Protocol Configuration

The user identified the underlying issue as related to JSON message serialization. The HubConnection needed to properly understand the structure of messages being received from the server. To fix this, the user added JSON protocol configuration in the HubConnectionBuilder, leading to the corrected setup:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes Made:

Added JSON Protocol: This allows the HubConnection to correctly parse the JSON payloads received from the server.

JSON Serializer Options: Configured the serializer to be case-insensitive and added support for enum conversion.

Conclusion

After making these adjustments, the HubConnection.On method began receiving calls correctly, allowing the client to process incoming messages as expected.

Takeaways:

Always ensure the correct serialization settings for SignalR Hub connections in Blazor applications.

Review the server's message structure against the client expectation.

Debugging tools, like the network tab, can confirm connections but won't reflect serialization problems.

If you find yourself facing similar issues, ensure your JSON serialization settings are properly configured. Understanding the nuances of how the SignalR client-side works can save valuable time in development and prevent frustration during implementation.

For further customization and advanced configurations, don't hesitate to refer to the official SignalR documentation.