Angular: Deploying the Backend TCP Service Separately

When deploying the Angular document editor, it must be connected to a backend hosted in ASP.NET or ASP.NET Core. This backend hosts the WebSocketHandler to communicate with the client-side script to sychronize the document rendering process.

This article explains how to create an ASP.NET Core backend to host the WebSocketHandler. In this case, the TCP Service (illustrated in purple in the animation below) is hosted on the same server like the backend application.

Separated TCP Service

But in several scenarios, it might be helpful to host the TCP service separately from the ASP.NET Core backend.

Custom WebSocketMiddleware

In Step 9 of the above mentioned tutorial, the Text Control WebSocketMiddleware is added to the Startup.cs. This middleware will be replaced with the below custom middleware:

This middleware allows you to define the IP and port number of the TCP service in the constructor (from Startup.cs):

The custom middleware calls the WebSocketHandler constructor with the given IP and port values to connect the backend with the separated TCP service.