# Initalizing SharedDoc

## Content

`js-collaboration-ot-client` provides client-side APIs, allowing developers to connect to a server and create shared documents ([SharedDoc](/spreadjs/api/v18/collaboration/js-collaboration-ot-client/classes/SharedDoc)) to enable real-time collaborative editing. This document explains how to initialize the client, including:

* Install dependencies
* Configure the connection
* Create document instances

## Installation

Install the required dependency packages via npm:

```bash
npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client
```

* `js-collaboration-client`: Provides the [Client ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client)and [Connection](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Connection) classes, used to establish a connection with the server.
* `js-collaboration-ot-client`: Provides OT functionality and the [SharedDoc ](/spreadjs/api/v18/collaboration/js-collaboration-ot-client/classes/SharedDoc)class.

## Initialization

1. Register the OT Type
    Register the [OT Type](/spreadjs/docs/v18/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/ottypes) to define operation behavior. Here is an example of registering a simple text type:

    ```typescript
    import { TypesManager } from '@mescius/js-collaboration-ot';
    
    const textType = {
        uri: '<http://example.com/types/text',>
        create: (data) => data || '', // Initialize as an empty string
        transform: (op1, op2, side) => {
            if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
                return { pos: op1.pos + op2.text.length, text: op1.text };
            }
            return op1;
        },
        apply: (snapshot, op) => {
            return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
        }
    };
    
    TypesManager.register(textType);
    ```
2. Create a Client Instance
    Use the [Client ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client)class to create a client instance and specify the server address.

    ```typescript
    import { Client } from '@mescius/js-collaboration-client';
    const client = new Client();
    ```
3. Connect to a Room
    Use the [connect ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client#connect)method to connect to a specific room on the server, returning a `Connection` object.

    ```typescript
    const connection = client.connect('room1');
    ```
4. Initialize SharedDoc
    Use the [SharedDoc ](/spreadjs/api/v18/collaboration/js-collaboration-ot-client/classes/SharedDoc)class to create a shared document instance, binding it to the `Connection`. The `SharedDoc` uses the `Connection` to send and receive messages, with the message type being "ot-doc".

    ```typescript
    import { SharedDoc } from '@mescius/js-collaboration-ot';
    const doc = new SharedDoc(connection);
    ```

    **Parameter**:
    `connection`: The `Connection` object returned from `client.connect`.
    **Role**: Creates a shared document instance, used for operating on snapshots and submitting operations.

## Complete Example

Below is a complete example of `SharedDoc` initialization:

```typescript
import { Client } from '@mescius/js-collaboration';
import { SharedDoc, TypesManager } from '@mescius/js-collaboration-ot';

// Define the OT Type
const textType = {
    uri: 'rich-text-ot-type',
    create: (data) => data || '', // Initialize as an empty string
    transform: (op1, op2, side) => {
        if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
            return { pos: op1.pos + op2.text.length, text: op1.text };
        }
        return op1;
    },
    apply: (snapshot, op) => {
        return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
    }
};

// Register the OT Type
TypesManager.register(textType);

// Initialize the client
const client = new Client();
const connection = client.connect('room1');
const doc = new SharedDoc(connection);
```

## Next Steps

Create document and submit/receive Ops, refer to: [SharedDoc Class](/spreadjs/docs/v18/spreadjs-collaboration-server/collaboration-framework/js-collaboration-ot/shareddoc-class)