Connecting WebSockets from browser to other applications

Question

Presentation

My application is split in 3 parts :

• C# .Net 5.0 desktop application that harvest and distribute data
• Angular 10 static application that control the C# app (start/Stop) and print the data in the form of charts for the user
• Azure Function Rest API used as a backend for the Angular Static Application (.NET core 3.1)

My goal is to have a WebSocket used for "real time" communication between the C# and Angular app instead of relying on Http Request to Azure Function REST api I don't use a "classic" server like express.js. Azure Function replaces it fully.

Because of that, I'm using the service Azure WebPubSub to host the sockets.

Problem : I cannot connect the websocket I create from Angular (Browser Application).

The problem doesn't come from WebPubSub because the WebSockets are fully working (sending & receiving) between my C# app, Azure Functions and even some node.js test scripts. Also, my web socket created in the browser app can communicate with itself but no other apps get the message send from my websocket in browser app.

Question : Can I communicate from the browser to others app in real time (websocket based) with my current architecture and if yes, how ?

On the Azure WebPubSub Documentation Page there are no examples of what I try to achieve. Same thing searching on the internet.

A solution using an Express.js server linked to the app, being the could be used as the middleman between the browser app and c# app. But I want to avoid it if possible. I just want to know if what I'm trying to do is possible.

Also, the app could be re-done in React.js so non-Angular specific answer are better.

Answer 1

The Web PubSub logstream sample:https://learn.microsoft.com/azure/azure-web-pubsub/tutorial-subprotocol?tabs=javascript sounds like a similar scenario.

Your AngualrJS Web App is similar to the logstream's web application, and it joins the stream group.

Your C# .Net 5.0 desktop application is similar to the logstream's message publisher application stream: https://learn.microsoft.com/azure/azure-web-pubsub/tutorial-subprotocol?tabs=csharp#publish-messages-from-client, which send messages to the stream group.