# Initalizing Client

## Content

`js-collaboration-client` provides a powerful client-side library for establishing bidirectional communication with the server. This guide will teach you to:

* Create a collaboration client
* Connect to the server room

## Creating Client

1. Install the npm Package

    ```bash
    npm install @mescius/js-collaboration-client
    ```
2. Create a Client Instance
<br>
    Use the [Client ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client)class to create a client instance, optionally specifying the server URL.
    If the collaboration service is hosted on the same domain as your frontend, you can simply use:

    ```typescript
    import { Client } from "@mescius/js-collaboration-client";
    const client = new Client(); // The server URL will be deduced from the window.location object
    ```

    For cross-domain scenarios, you need to specify the server URL explicitly:

    ```typescript
    const client = new Client("ws://server-domain.com:8000");
    ```

## Connecting to the Server and Joining a Room

* Simple Connection
<br>
    You can use the following code to [connect ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client#connect)to the server and join a specified room:

    ```typescript
    const connection = client.connect('roomId');
    ```
* Connection with Additional Information
<br>
    If you want to include additional information (e.g., user authentication details) during connection establishment, you can pass this information via the `query` and `auth` [parameters](/spreadjs/api/v18/collaboration/js-collaboration-client/interfaces/IConnectOptions). This information can be accessed and used in the server-side `connect` middleware.

    ```typescript
    const connection = client.connect('roomId', {
        query: {
            myQueryArg: 'xxx',  // Accessible on the server side via context.connection.query
        },
        auth: {
            token: 'xxx'  // Accessible on the server side via context.connection.auth.token
        }
    });
    ```

    A practical scenario is passing user authentication information (e.g., a token) as the `auth` parameter to the server. The server can retrieve and validate this authentication information through middleware to decide whether to allow the user to establish a connection.
    For more information on user authentication and permissions, see [User Authentication and Permissions](/spreadjs/docs/v18/spreadjs-collaboration-server/collaboration-framework/js-collaboration/user-authentication-and-permissions).

## Next Steps

The [Client ](/spreadjs/api/v18/collaboration/js-collaboration-client/classes/Client)class is the first step in connecting to the server. With simple initialization and connect call, you can quickly join a collaboration room. After a successful connection, use the returned object `Connection` to implement bidirectional communication and event management.
For more details, see [Connection Class](/spreadjs/docs/v18/spreadjs-collaboration-server/collaboration-framework/js-collaboration/connection-class).