# Angular: Deploying the Backend TCP Service Separately

> The Angular document editor requires an ASP.NET or ASP.NET Core backend connected to the TCP Service to synchronize the rendering. This article explains how to deploy the TCP Service separately from the backend application.

- **Author:** Bjoern Meyer
- **Published:** 2020-10-09
- **Modified:** 2025-11-16
- **Description:** The Angular document editor requires an ASP.NET or ASP.NET Core backend connected to the TCP Service to synchronize the rendering. This article explains how to deploy the TCP Service separately from the backend application.
- **2 min read** (314 words)
- **Tags:**
  - Angular
  - ASP.NET Core
  - Document Editor
  - HTML5
- **Web URL:** https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/
- **LLMs URL:** https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms-full.txt

---

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](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms-full.txt) 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 5](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms-full.txt) 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:

```
public class CustomWebSocketMiddleware
{
  private RequestDelegate m_next;
  private IPAddress m_serviceAddress;
  private int m_servicePort;
  internal static readonly byte[] DefaultServiceAddress = { 127, 0, 0, 1 };

  public CustomWebSocketMiddleware(RequestDelegate next)
  {
    m_next = next;
    m_serviceAddress = new IPAddress(DefaultServiceAddress);
    m_servicePort = 4277;
  }

  public CustomWebSocketMiddleware(RequestDelegate next, 
                                   IPAddress serviceAddress, 
                                   int servicePort = 4277)
  {
    m_next = next;
    m_serviceAddress = serviceAddress;
    m_servicePort = servicePort;
  }

  public CustomWebSocketMiddleware(RequestDelegate next,
                                   string hostNameOrAddress,
                                   int servicePort = 4277)
  {
    m_next = next;
    IPAddress addr = Dns.GetHostAddresses(hostNameOrAddress).FirstOrDefault();
    if (addr == null) throw new Exception($"Host '{hostNameOrAddress}' not found.");
    m_serviceAddress = addr;
    m_servicePort = servicePort;
  }

  public async Task Invoke(HttpContext context)
  {
    if (context.WebSockets.IsWebSocketRequest &&
      context.WebSockets.WebSocketRequestedProtocols.Contains("TXTextControl.Web"))
    {
      var ws = new WebSocketHandler(m_serviceAddress, m_servicePort);
      await ws.Invoke(context);
    }
    else if (m_next != null)
    {
      await m_next.Invoke(context);
    }
  }
}
```

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

```
app.UseMiddleware<TXTextControl.Web.CustomWebSocketMiddleware>("127.0.0.1",4277);
```

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

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt)
- [Changing the Language in the Angular Document Editor Using the Resource Kit](https://www.textcontrol.com/blog/2025/03/05/changing-the-language-in-the-angular-document-editor-using-the-resource-kit/llms.txt)
- [Getting Started Video Tutorial: How to use the Document Editor in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-angular/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Creating an Angular Application with an ASP.NET Core Backend](https://www.textcontrol.com/blog/2023/05/05/creating-an-angular-application-with-an-aspnet-core-backend/llms.txt)
- [5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/09/5-layout-patterns-for-integrating-the-tx-text-control-document-editor-in-aspnet-core-csharp/llms.txt)
- [Introducing Text Control Agent Skills](https://www.textcontrol.com/blog/2026/03/27/introducing-text-control-agent-skills/llms.txt)
- [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/llms.txt)
- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [ASP.NET Core Document Editor with Backend via the Text Control Private NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/aspnet-core-document-editor-private-nuget-feed/llms.txt)
- [Why Document Processing Libraries Require a Document Editor](https://www.textcontrol.com/blog/2025/12/04/why-document-processing-libraries-require-a-document-editor/llms.txt)
- [Securing WebSocket Connections in ASP.NET Core using Sec WebSocket Protocol Header](https://www.textcontrol.com/blog/2025/11/20/securing-websocket-connections-in-aspnet-core-using-sec-websocket-protocol-header/llms.txt)
- [Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text Control](https://www.textcontrol.com/blog/2025/09/09/format-painter-in-asp-dotnet-core-building-custom-text-formatting-with-tx-text-control/llms.txt)
- [Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux](https://www.textcontrol.com/blog/2025/07/29/getting-started-video-tutorial-document-editor-aspnet-core-csharp-linux/llms.txt)
- [Reuse Persistent Document Editor Components in Angular SPA Applications](https://www.textcontrol.com/blog/2025/04/03/reuse-persistent-document-editor-components-in-angular-spa-applications/llms.txt)
- [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt)
- [TX Text Control for Blazor: Mail Merge Integration Tutorial](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-for-blazor-mail-merge-integration-tutorial/llms.txt)
- [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt)
- [Getting Started: Document Editor for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms.txt)
- [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt)
- [Introducing TXTextControl.Web.Server.Core: A Cross-Platform Backend for TX Text Control Document Editor](https://www.textcontrol.com/blog/2025/03/13/introducing-txtextcontrol-web-server-core-a-cross-platform-backend-for-tx-text-control-document-editor/llms.txt)
- [Getting Started: Document Editor with ASP.NET Core and Docker Support with Linux Containers](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-docker-support-with-linux-containers/llms.txt)
- [Getting Started: Document Editor with ASP.NET Core and Linux WSL Support](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-linux-wsl-support/llms.txt)
- [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt)
