---
# System prepended metadata

title: 'Spike: usage of excalidraw multi-user mode with server#4218'
tags: [' collaboration', excalidraw]

---

## Interactions in local setup
![](https://hackmd.io/_uploads/HJgAPGdc3.png)



1. client-web send a request *GET* request at `http://localhost:3000/api/private/ws/socket.io`
2. The request is picked up by *Traefik*. It is configured to strip down `/api/private/ws`.`/socket.io` is important and used later.
3. The request is sent to *oathkeeper* which mutates the header and checks for a valid identity. The request is returned with a reponse of 401 when the identity is invalid or missing and propagated to the Alkemio server otherwise.
5. The Alkemio server has the Excalidraw server running in the same NodeJS application on port *4001*. A connection is established if the request headers provide a valid Alkemio identity.
The Alkemio server DOES NOT execute any Ory strategies. The strategy is executed by the Excalidraw server on connection request.
The Agent info is resolved, cached in memory and is available by the other listeners while the connection is active.

## The client application
The *excalidraw-app* React application is used to establish the prove of concept. This application is created by the Excalidraw team and can be located [here](https://github.com/excalidraw/excalidraw/tree/master/src/excalidraw-app). Due to the vast amount of its internal dependencies, unknows in general and gaps in our setup and general usage of whiteboards I was unable to integrate it in our client.

## Running the PoC in your local environment
1. Checkout the *collaboration* branch of https://github.com/alkem-io/excalidraw-fork.
Minor adjustment were made to disable the whiteboard loading from storage and to configure the socket connection to the proper address and handshake path.
3. Create a *.env.local* file in the root folder with the content below
```
REACT_APP_BACKEND_V2_GET_URL=
REACT_APP_BACKEND_V2_POST_URL=

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=

# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
REACT_APP_WS_SERVER_URL=http://localhost:3000

# set this only if using the collaboration workflow we use on excalidraw.com
REACT_APP_PORTAL_URL=

PORT=3002
```
3. Start the app via `npm run start` .
3. Checkout the *server-4218* branch of https://github.com/alkem-io/server
3. Add an entry in your .env file of the server
```
EXCALIDRAW_SERVER_PORT=4001

```
3. Start the server via `npm run start`.
