Initalizing Client

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

   npm install @mescius/js-collaboration-client

2. Create a Client Instance

   
   

   Use the 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:

   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:

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

Connecting to the Server and Joining a Room

• Simple Connection

  
  

  You can use the following code to connect to the server and join a specified room:

  const connection = client.connect('roomId');

• Connection with Additional Information

  
  

  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. This information can be accessed and used in the server-side connect middleware.

  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.

Next Steps

The 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.