Skip to content

Commit 112bb70

Browse files
1055046: Updated the server files and README file.
1 parent e570c94 commit 112bb70

19 files changed

Lines changed: 1242 additions & 187 deletions

‎README.md‎

Lines changed: 204 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,204 @@
1-
# Spreadsheet-Collaborative-Editing
2-
This repository showcases real-time collaborative editing using the Syncfusion® Spreadsheet Editor, allowing multiple users to edit the same workbook simultaneously.
1+
# Spreadsheet Collaborative Editing
2+
3+
This repository showcases real-time collaborative editing using the Syncfusion® Spreadsheet Editor, allowing multiple users to edit the same workbook simultaneously. The project demonstrates how to implement collaborative features across multiple frontend frameworks (Angular, React, Vue, and TypeScript) with an ASP.NET Core backend.
4+
5+
## Features
6+
7+
- Real-time collaborative editing of spreadsheets
8+
- Support for multiple frontend frameworks:
9+
- Angular
10+
- React
11+
- Vue
12+
- TypeScript (Vanilla)
13+
- ASP.NET Core backend with SignalR for real-time communication
14+
- Redis integration for collaboration state management
15+
- Spreadsheet operations synchronization across multiple clients
16+
- Selection highlighting for other users' cursor positions
17+
18+
## Prerequisites
19+
20+
### Backend
21+
- .NET 10.0 SDK
22+
- Redis server (for collaboration state management)
23+
- Syncfusion license key
24+
25+
### Frontend
26+
- Node.js (v18 or later)
27+
- npm or yarn
28+
29+
## Project Structure
30+
31+
```
32+
├── client/
33+
│ ├── angular/ # Angular implementation
34+
│ ├── react/ # React implementation
35+
│ ├── typescript/ # TypeScript/Vanilla implementation
36+
│ └── vue/ # Vue implementation
37+
├── server/
38+
│ └── aspnet-core/ # ASP.NET Core backend with SignalR
39+
└── README.md
40+
```
41+
42+
## Setup
43+
44+
### Backend Setup
45+
46+
1. Navigate to the server directory:
47+
```bash
48+
cd server/aspnet-core
49+
```
50+
51+
2. Configure your Syncfusion license:
52+
- Add your license key to `SyncfusionLicense.txt` file
53+
- Or set the `SYNCFUSION_LICENSE_KEY` environment variable
54+
55+
3. Configure Redis connection:
56+
- Update the Redis connection string in `appsettings.json`:
57+
```json
58+
{
59+
"ConnectionStrings": {
60+
"Redis": "your_redis_connection_string"
61+
}
62+
}
63+
```
64+
65+
4. Run the server:
66+
```bash
67+
dotnet run
68+
```
69+
70+
The server will start on `https://localhost:5001` by default.
71+
72+
### Frontend Setup
73+
74+
Choose one of the client implementations:
75+
76+
#### Angular
77+
78+
1. Navigate to the Angular client:
79+
```bash
80+
cd client/angular
81+
```
82+
83+
2. Install dependencies:
84+
```bash
85+
npm install
86+
```
87+
88+
3. Update the service URL in `src/components/spreadsheet-editor/spreadsheet-editor.component.ts`:
89+
```typescript
90+
const serviceUrl: string = 'https://localhost:5001/';
91+
```
92+
93+
4. Run the application:
94+
```bash
95+
npm start
96+
```
97+
98+
The application will be available at `http://localhost:4200`.
99+
100+
#### React
101+
102+
1. Navigate to the React client:
103+
```bash
104+
cd client/react
105+
```
106+
107+
2. Install dependencies:
108+
```bash
109+
npm install
110+
```
111+
112+
3. Update the service URL in `src/SpreadsheetEditorAdapter.ts`:
113+
```typescript
114+
const serviceUrl: string = 'https://localhost:5001/';
115+
```
116+
117+
4. Run the application:
118+
```bash
119+
npm run dev
120+
```
121+
122+
The application will be available at `http://localhost:5173`.
123+
124+
#### Vue
125+
126+
1. Navigate to the Vue client:
127+
```bash
128+
cd client/vue
129+
```
130+
131+
2. Install dependencies:
132+
```bash
133+
npm install
134+
```
135+
136+
3. Update the service URL in `src/SpreadsheetEditorAdapter.ts`:
137+
```typescript
138+
const serviceUrl: string = 'https://localhost:5001/';
139+
```
140+
141+
4. Run the application:
142+
```bash
143+
npm run dev
144+
```
145+
146+
The application will be available at `http://localhost:5173`.
147+
148+
#### TypeScript (Vanilla)
149+
150+
1. Navigate to the TypeScript client:
151+
```bash
152+
cd client/typescript
153+
```
154+
155+
2. Install dependencies:
156+
```bash
157+
npm install
158+
```
159+
160+
3. Update the service URL in `src/spreadsheet-editor-adapter.ts`:
161+
```typescript
162+
const serviceUrl: string = 'https://localhost:5001/';
163+
```
164+
165+
4. Run the application:
166+
```bash
167+
npm run dev
168+
```
169+
170+
The application will be available at `http://localhost:5173`.
171+
172+
## Usage
173+
174+
1. Start the backend server
175+
2. Start one of the frontend clients
176+
3. Open the application in multiple browser windows or devices
177+
4. Each user will be assigned a unique room ID automatically
178+
5. To collaborate in the same room, share the URL with the room ID parameter
179+
6. All users in the same room will see real-time updates as others edit the spreadsheet
180+
181+
## API Endpoints
182+
183+
The backend provides the following API endpoints:
184+
185+
- `POST /api/CollaborativeEditing/ImportFile` - Import a file for collaborative editing
186+
187+
## Contributing
188+
189+
Contributions are welcome! Please follow these steps:
190+
191+
1. Fork the repository
192+
2. Create a feature branch
193+
3. Commit your changes
194+
4. Push to the branch
195+
5. Create a pull request
196+
197+
## License
198+
199+
This project uses Syncfusion Essential JS 2 components, which are licensed under either the Syncfusion Community License Program or the Syncfusion commercial license.
200+
201+
Please refer to the [license](license) file for more information.
202+
203+
To use this product, you must agree to and abide by Syncfusion's license containing all terms and conditions, which can be found at:
204+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎server/aspnet-core-redis/Adapters/SpreadsheetCollaborativeAdaptor.cs‎

Whitespace-only changes.

‎server/aspnet-core-redis/Controllers/CollaborativeEditingController.cs‎

Whitespace-only changes.

‎server/aspnet-core-redis/SpreadsheetCollaborativeEditing.Server.csproj‎

Whitespace-only changes.

0 commit comments

Comments
 (0)