WebSocketServer

In order to use one of the client-side TX Text Control platforms, the following components are required:

• A client-side library
• Server-side WebSocketHandler (Node.js or ASP.NET on Linux or Windows)
• Document synchronization TCP service (Windows)

The following diagram illustrates the required components to deploy the document editor:

The client-side component opens a WebSocket connection to the WebSocketHandler running within the WebSocketServer. The webSocketURL parameter is used to connect the client-side component to the used WebSocketHandler project.

The webSocketURL must point to the WebSocketServer. The server hosting the client-side application and the Node.js server can be deployed to all platforms including Windows, Linux and Mac. Alternatively, the WebSocketHandler can be implemented using the MVC version of TX Text Control running on IIS on a Windows Server.

The third required component is the Document Sync TCP Service. The tutorial uses a demo service hosted by us (demos.textcontrol.com). In order to deploy an application, this service needs to be hosted. The deployment of the service is described in the deployment documentation of TX Text Control .NET Server. The TCP service needs to be deployed to a Windows-based server running Microsoft Server 2012 or better.

Creating a WebSocket Server Project with Node.js

1. Open a Node.js command prompt, create an empty folder called "websocket-server", navigate into and type in the following command to install Express, the minimalist web framework for node:

   npm i express

2. Now, install the WebSocket Server package of TX Text Control:

   npm i @txtextcontrol/tx-websocket-server

3. Open this folder in Visual Studio Code by typing in the following command:

   code .

4. In Visual Studio Code, create a new file named app.js in the project's root folder:

   

   Copy the following code into this JavaScript file and save it:

   • JavaScript

   ​const { WebSocketServer } = require('@txtextcontrol/tx-websocket-server');
   const express = require('express');
   const app = express();
   const server = app.listen(8080);
   
   var wsServer = new WebSocketServer(server,
       {
           serviceAddress: "demos.textcontrol.com", servicePort: 42770
       });

   const { WebSocketServer } = require('@txtextcontrol/tx-websocket-server'); const express = require('express'); const app = express(); const server = app.listen(8080); var wsServer = new WebSocketServer(server, { serviceAddress: "demos.textcontrol.com", servicePort: 42770 });

5. Back in the command prompt, start the Node.js application by typing in the following command:

   node app.js

Connecting the Angular Application

When connecting an Angular based document editor application with this Node.js WebSocket Server, add this endpoint to the webSocketURL parameter:

• HTML

​<tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="ws://localhost:8080/TXWebSocket">
</tx-document-editor>