Integrated latest changes at 05-16-2024 4:30:20 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -859,6 +859,7 @@
 <li><a href="/ej2-react/document-editor/server-deployment/word-processor-server-docker-image-overview">Word Processor Server Docker Image Overview</a></li>
 <li><a href="/ej2-react/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service">How to Deploy Word Processor Server Docker Container in Azure App Service</a></li>
 <li><a href="/ej2-react/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service">How to Deploy Word Processor Server Docker Container in Azure Kubernetes Service</a></li>
+<li><a href="/ej2-react/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service">How to Deploy Word Processor Server Docker Container in Amazon Kubernetes Service</a></li>
 <li><a href="/ej2-react/document-editor/server-deployment/how-to-publish-documenteditor-web-api-application-in-azure-app-service-from-visual-studio">How to Publish DocumentEditor Web API Application in Azure App Service from Visual Studio</a></li>
 </ul>
 </li>

ej2-react/document-editor/collaborative-editing-java.md

@@ -16,7 +16,7 @@ Allows multiple users to work on the same document simultaneously. This can be d
 
 The following are needed to enable collaborative editing in Document Editor.
 
-- Socket JS
+- Sock JS
 - PostgreSQL database
 
 ## How to enable collaborative editing in client side
@@ -57,9 +57,9 @@ render() {
 }
 ```
 
-### Step 2: Configure SocketJS to send and receive changes
+### Step 2: Configure SockJS to send and receive changes
 
-To broadcast the changes made and receive changes from remote users, configure SocketJS like below.
+To broadcast the changes made and receive changes from remote users, configure SockJS like below.
 
 ```typescript
 import * as SockJS from 'sockjs-client';
@@ -98,7 +98,7 @@ public onDataRecived(data: any) {
 
 ### Step 3: Subscribe to specific topic while opening the document
 
-When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SocketJS, which facilitates sending and receiving data from the server.
+When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SockJS, which facilitates sending and receiving data from the server.
 
 ```typescript
 public openDocument(responseText: string, roomName: string): void {
@@ -142,9 +142,9 @@ this.container.contentChange = (args: ContainerContentChangeEventArgs) => {
 
 ## How to enable collaborative editing in Java
 
-### Step 1: Configure SocketJS hub to create room for collaborative editing session.
+### Step 1: Configure SockJS hub to create room for collaborative editing session.
 
-To manage groups for each document, create a folder named “Hub” and add a file named ``` DocumentEditorHub.java ``` inside it. Add the following code to the file to manage SocketJS groups using room names.
+To manage groups for each document, create a folder named “Hub” and add a file named ``` DocumentEditorHub.java ``` inside it. Add the following code to the file to manage SockJS groups using room names.
 
 Join the group by using unique id of the document by using JoinGroup method.
 
@@ -177,7 +177,7 @@ public static void broadcastToRoom(String roomName, Object payload, MessageHeade
     }
 }
 ```
-### Step 2: Handle user disconnection using SocketJS.
+### Step 2: Handle user disconnection using SockJS.
 
 ```java
 @EventListener
@@ -267,7 +267,7 @@ private ActionInfo addOperationsToTable(ActionInfo action) {
 ```
 
 #### Add Web API to get previous operation as a backup to get lost operations
-On the client side, messages send from server using SocketJS may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
+On the client side, messages send from server using SockJS may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
 Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client. 
 
 ```java
@@ -297,7 +297,73 @@ int clientVersion = action.getVersion();
 	return acion;
 }
 ```
+## How to perform Scaling in Collaborative Editing.
 
+### Role of Scaling in Collaborative editing
+As the number of users increases, collaborative application face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources.
+
+During scaling the users may connected to different servers, so collaborative editing application introduces a specific challenge like, updating the edit operations to all the users connected in different serves. To overcome this issue you need to use ``` Redis Cache pub/sub ``` for message relay(syncing the editing operations to the users connected to different server instance)
+
+### Use of Redis Pub/Sub in scaling environment
+Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple AWS services without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views. 
+
+### Steps to configure Redis in Collaborative Editing Application
+Refer to the below steps to know about the Redis pub/sub implementation to sync the messages.
+
+#### Step 1: Configure Redis in application level to establish the connection.
+
+```java
+//Redis configuration
+spring.datasource.redishost= "<Redis host link>"
+spring.datasource.redisport= "<Redis port number>"
+```
+#### Step 2: Publish each editing operation to a Redis channel
+
+Publish each editing operation to Redis channel with the room name. This will send notifications to all the users(in different servers) subscribed to that specific channel. Refer to the publishToRedis() method in DocumentEditorHub.Java for details.
+
+```java
+try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) {                           
+jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload));                    
+    break;
+    } catch (JedisConnectionException e) {
+    }
+```
+#### Step 3: Subscribe to the specific channel using the Redis Cache 'Subscribe'
+
+ Redis cache will be initialized and subscribe to the specific channel using the Redis Cache 'Subscribe' option. This ensures that users in any server will get notified when an editing operation is published to the Redis cache using the onMessage() API. Refer to the code snippet in RedisSubscriber.Java for details.
+
+ ```java
+@PostConstruct
+      public void subscribeToInstanceChannel() {
+            //Subscriber to `collaborativeediting`
+            String channel = "collaborativeedtiting";
+             new Thread(() -> {
+                   JedisPoolConfig poolConfig = new JedisPoolConfig();
+                    jedisPool = new JedisPool(poolConfig, REDIS_HOST, REDIS_PORT);
+                    try (Jedis jedis = jedisPool.getResource()) {      
+                           jedis.subscribe(new JedisPubSub() {
+                                 @Override
+                                 public void onMessage(String channel, String message) {                               
+                                       ------------- 
+                                        ------
+                                           // Message will be broadcasted to all the users connected to that room using sockjs
+                                              DocumentEditorHub.broadcastToRoom(action.getRoomName(), action, updateActionheaders);
+                                       } catch (JsonProcessingException e) {
+                                               e.printStackTrace();
+                                       }
+                                }
+                                 @Override
+                                 public void onSubscribe(String  channel, int subscribedChannels) {
+                                       System.out.println("Subscribed to channel: " + channel);
+                                }
+                            }, channel);
+                   } catch (JedisConnectionException e) {
+                           // Handle the connection exception
+                          System.out.println("Connection failed. Retrying ...");
+                   }
+            }).start();
+      }
+```
 
 Full version of the code discussed about can be found in below GitHub location.
 

ej2-react/document-editor/collaborative-editing.md

@@ -356,7 +356,7 @@ private ActionInfo AddOperationsToTable(ActionInfo action)
 
 #### Add Web API to get previous operation as a backup to get lost operations
 
-On the client side, messages broadcasted using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
+On the client side, messages broadcast using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
 Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.
 
 ```csharp
@@ -399,7 +399,46 @@ private ActionInfo AddOperationsToTable(ActionInfo action)
 
 ```
 
+## How to perform Scaling in Collaborative Editing.
+
+As the number of user increases, maintaining responsiveness and performance becomes challenging. Scaling tackles this by distributing the workload across resources. You can scale the collaborative editing application using either ```Azure SignalR service or Redis backplane service```
+
+### 1. Scaling with Azure SignalR
+
+Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers). 
+
+Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
+
+```csharp
+builder.Services.AddSignalR() .AddAzureSignalR("<your-connection-string>", options => { 
+// Specify the channel name 
+options.Channels.Add("document-editor");
+ }); 
+```
+
+### 2. Scaling with Redis backplane
+
+Using a Redis backplane, you achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
+
+In the SignalR app, install the following NuGet package:
+* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
+
+Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
+
+```csharp
+builder.Services.AddSignalR().AddStackExchangeRedis("<your_Redis_connection_string>");
+```
+Configure options as needed:
+
+The following example shows how to add a channel prefix in the ConfigurationOptions object. 
+
+```csharp
+builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
+  {
+      options.Configuration.ChannelPrefix = "document-editor";
+  });
+```
 
 Full version of the code discussed about can be found in below GitHub location.
 
-Github Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)
+GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)

ej2-react/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md

@@ -0,0 +1,150 @@
+---
+layout: post
+title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service
+description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion React Document editor.
+control: How to deploy word processor server docker container in amazon kubernetes service 
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+# How to deploy Word Processor server in Amazon Kubernetes Service
+
+## Prerequisites
+
+* `AWS Account` :Have Amazon account
+* `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine.
+* `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine.
+* `Docker`: Install Docker on your local machine.
+* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy.
+
+To deploy the Word Processor server docker image, need to follow the below process
+
+* Push Docker Image to Registry (Amazon Elastic Registry)
+* Deploy Docker Image on Amazon Kubernetes Service
+
+Lets us discuss briefly about the each process
+
+## Push the Docker image to the Amazon Elastic Registry 
+
+**Step 1:** Dockerize the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server)
+
+```
+docker build -t <your-image-name>
+```
+
+**Step 2:** Create a private repository name ‘documenteditor’ in Amazon Elastic Container Registry (ECR) using the AWS CLI or AWS Console to push the docker image
+
+```
+aws ecr create-repository --repository-name <repository-name>
+```
+
+**Step 3:** Tag the image to push to ECR
+
+```
+docker tag <your-image-name>:latest <your_ECR_registry_URI>/<your_repository_name>:latest
+```
+Refer to the following example to tag the image 
+   
+```
+docker tag syncfusion/word-processor-server:latest 123456.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
+```
+
+> Get the ECR registry URI from AWS console or using the below AWS CLI command
+
+```
+aws ecr describe-repositories --repository-names <repository-name> --query 'repositories[*].repositoryUri' --output text
+```
+
+**Step 4:** Login to the ECR registry using the AWS CLI to push the docker image
+
+```   
+aws ecr get-login-password --region <region> | docker login --username AWS --password-stdin <your_ECR_registry_URI>
+```
+
+Replace <region> with your AWS region and <your_ECR_registry_URI> with your ECR registry URI.
+
+**Step 5:** Push the tagged image to ECR
+
+```
+docker push <your_ECR_registry_URI>/<your_image_name>:latest
+```
+
+## Deploy Docker Image on Amazon Kubernetes Service
+
+Follow the below steps to deploy the Docker image from the Amazon Elastic Registry( ECR) to Amazon Kubernetes Services (EKS)
+
+**Step 1:** DCreate Amazon EKS cluster using the AWS Console 
+  
+**Step 2:** Authenticate with AWS ECR
+Need to get the authenticate with the AWS ECR to pull the image from the registry
+
+```
+aws ecr get-login-password --region <your-region> | docker login --username AWS --password-stdin <your-aws-account-id>.dkr.ecr.<your-region>.amazonaws.com
+```
+
+**Step 3:** : Configure Kubernetes to Communicate with the Cluster
+
+```
+aws eks --region <region> update-kubeconfig --name <cluster-name>
+```
+
+**Step 4:** Tag the Docker Image to the created cluster
+
+```   
+docker tag <your-aws-account-id>.dkr.ecr.<your-region>.amazonaws.com/<repository-name>:<tag> <your-eks-cluster-id>.dkr.ecr.<your-region>.amazonaws.com/<repository-name>:<tag>
+```
+
+Refer to the following example
+```   
+docker tag 12345.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest 98765ABCD.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
+```
+
+In this command:
+* <your-eks-cluster-id> should be replaced with your EKS cluster ID, which is the base part of your EKS cluster endpoint (e.g., abcd1234).
+* <your-region> should be replaced with your AWS region.
+
+
+**Step 5:** To create Kubernetes deployment write Kubernetes manifest
+
+**i.** Create a Kubernetes Deployment manifest (deployment.yaml) for your application. Specify the Docker image location.
+
+```
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: ```your-deployment```
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: ```your-app```
+  template:
+    metadata:
+      labels:
+        app: ```your-app```
+    spec:
+      containers:
+      - name: your-container
+        image: ```<account-id>.dkr.ecr.<region>.amazonaws.com/your-repository-name:tag```
+        ports:
+        - containerPort: 80
+```
+**ii.** Apply the Deployment manifest to create the deployment in your EKS cluster
+
+```   
+kubectl apply -f deployment.yaml
+```
+  
+**iii.** Use port forwarding to access the Word Processor Server application locally and verify its functionality
+
+```   
+kubectl port-forward pod-name local-port:container-port
+```
+
+> Get the pod names in AWS Console or using the below AWS CLI command
+
+```   
+kubectl get pods
+```
+
+Finally you can get the sample in the localhost http://```<your-ip>```/api/documenteditor/