cómo construir un editor de Excel colaborativo con GridJs
Guía del Editor de Excel Colaborativo
Resumen de la arquitectura
El siguiente diagrama muestra cómo GridJs permite la edición colaborativa con múltiples usuarios, un backend de Spring Boot, comunicación WebSocket y una base de datos MySQL para la gestión del estado.
Requisitos previos
Antes de comenzar, asegúrese de tener lo siguiente instalado:
- Java 8+
- Maven
- MySQL (o otra base de datos SQL compatible)
- (Opcional) Docker si prefiere ejecutarlo en contenedores
- Una licencia Aspose.Cells válida (o licencia temporal)
Step 1: Clone the Demo Project
Clone the official Aspose.Cells GridJs demo repository:
git clone https://github.com/aspose-cells/Aspose.Cells.Grid-for-Java.git
cd Aspose.Cells-for-Java/Examples.GridJs.Collaborative
Step 2: Configure Collaborative Mode
Open the src/main/resources/application.properties file and adjust the settings:
# Directory containing spreadsheet files
testconfig.ListDir=/app/wb
# Directory for storing cache files
testconfig.CachePath=/app/grid_cache
# Aspose.Cells license file
testconfig.AsposeLicensePath=/app/license
# Enable collaborative mode
gridjs.iscollabrative=true
# Database connection (example: MySQL)
spring.datasource.url=jdbc:mysql://localhost:3306/gridjsdemodb?createDatabaseIfNotExist=true&useUnicode=true&serverTimezone=UTC&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.sql.init.platform=mysql
Esto permite que varios usuarios editen la misma hoja de cálculo simultáneamente.
Los cambios se almacenan en la base de datos y se sincronizan en tiempo real entre los clientes.
Step 3: Run the Application
Run with Maven:
mvn spring-boot:run
O directamente desde la clase principal:
src/main/java/com/aspose/gridjsdemo/usermanagement/UserManagementApplication.java
Step 4: Test Collaborative Editing
Open your browser and navigate to:
👉 http://localhost:8080/gridjsdemo/list
Steps:
- A login page appears. Click Create User to register User1 and log in. You will then see the file list.
- Open a file from the list. The spreadsheet editor will load.
- Copy the same URL into another browser window. It will redirect to the login page. Create User2 and log in.
- Both users now see the same spreadsheet.
- If User1 edits the spreadsheet, User2 will see the changes in real time.
- If User2 edits, User1 will see the changes as well.
- Users can also download and save the file.
Paso 5: Ejecutar en Docker (Opcional)
Si ejecutas en Docker, edita la línea 10 de docker-compose.yml para mapear el archivo de licencia.
Por ejemplo, si tu archivo de licencia está en C:/license/aspose.lic:
volumes:
- C:/license/aspose.lic:/app/license # optional: set Aspose license file
Esto mapea el archivo local en el contenedor.
Luego construye y ejecuta:
docker-compose up --build
Accede a la aplicación en:
👉 http://localhost:8080/gridjsdemo/list
Key Configuration Details
1. Enable Collaborative Mode
In /src/main/resources/application.properties:
gridjs.iscollabrative=true
En la configuración del lado del servidor /src/main/java/com/aspose/gridjsdemo/filemanagement/FileConfig.java:
@Bean
public GridJsOptions gridJsOptions() {
//..... other options
//here we shall set true for collaborative mode
options.setCollaborative(true);
return options;
}
O globalmente:
Config.setCollaborative(true);
En las opciones de carga del lado del cliente /src/main/resources/templates/file/index.html:
const option = {
//..... other options
//here we shall set true for collaborative mode
isCollaborative: true
//..... other options
};
2. User System Integration
The demo uses Spring Security for a simple user system.
You must provide a CoWorkUserProvider implementation to connect GridJs with your user system:
In server-side config /src/main/java/com/aspose/gridjsdemo/filemanagement/FileConfig.java:
For example: here we defined MyCustomUser to implement all the interfaces in CoWorkUserProvider.
@Bean
public CoWorkUserProvider currentUserProvider() {
return new MyCustomUser();
}
En /src/main/java/com/aspose/gridjsdemo/filemanagement/MyCustomUser.java:
public class MyCustomUser implements CoWorkUserProvider {
//Get the current login user name
@Override
public String getCurrentUserName() {
return getCurrentUser().getUsername();
}
//Get the current login user Id
@Override
public Long getCurrentUserId() {
return getCurrentUser().getUserId();
}
//Get the current login user permission
@Override
public CoWorkUserPermission getPermission() {
return CoWorkUserPermission.EDITABLE;
}
private static CustomUserDetails getCurrentUser() {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
if (authentication != null && authentication.getPrincipal() instanceof CustomUserDetails) {
return (CustomUserDetails) authentication.getPrincipal();
}
throw new IllegalStateException("User not authenticated");
}
}
3. WebSocket Configuration
The demo uses Spring WebSocket with STOMP.
Example config:
In /src/main/java/com/aspose/gridjsdemo/messages/WebSocketConfig.java:
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
config.setUserDestinationPrefix("/user");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOrigins("http://localhost:8080")
.withSockJS();
}
}
GridJs espera que messageTopic coincida con “/topic/opr” que es el valor predeterminado:
com.aspose.gridjs.Config.setMessageTopic("/topic/opr");
O:
@Bean
public GridJsOptions gridJsOptions() {
//.... other options
options.setMessageTopic("/topic/opr");
//.... other options
return options;
}
En el lado del cliente:
xs.setCollaborativeSetting('/GridJs2/msg','/ws','/app/opr','/user/queue','/topic/opr');
Aquí, /GridJs2/msg corresponde a la ruta definida en
src/main/java/com/aspose/gridjsdemo/filemanagement/controller/GridJsOprController.java:
@RequestMapping("/GridJs2/msg")
Ejemplo con rutas personalizadas de WebSocket
Si tu servidor usa una configuración diferente:
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic_gridjs");
config.setApplicationDestinationPrefixes("/app_gridjs");
config.setUserDestinationPrefix("/user_gridjs");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws_gridjs")
.setAllowedOrigins("http://localhost:8080")
.withSockJS();
}
}
Entonces debes configurar:
Lado del servidor:
com.aspose.gridjs.Config.setMessageTopic("/topic_gridjs/opr");
o
@Bean
public GridJsOptions gridJsOptions() {
//.... other option
options.setMessageTopic("/topic_gridjs/opr");
//.... other option
return options;
}
Lado del cliente:
xs.setCollaborativeSetting('/GridJs2/msg','/ws_gridjs','/app_gridjs/opr','/user_gridjs/queue','/topic_gridjs/opr');
El documento de detalles para setCollaborativeSetting se puede encontrar aquí
⚠️ Nota: Por defecto, la configuración de demostración funciona tal cual.
La configuración adicional solo es necesaria si tu aplicación personaliza los endpoints de WebSocket.
También recuerda: el modo colaborativo no soporta carga perezosa.
No habilites Config.setLazyLoading(true).
Additional Notes
- We can add file uploads to load and edit spreadsheet file from upload directory.
- Integrate with cloud storage like AWS S3 or Azure Blob.
Conclusión
Con Aspose.Cells.GridJs, puedes construir rápidamente un editor de Excel colaborativo potente.
La combinación del backend en Java, GridJs en el frontend, almacenamiento SQL y mensajería WebSocket asegura una edición en tiempo real confiable de hojas de cálculo.