venjiang / presencejs

YoMo browser sdk

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@yomo/presencejs

You can use @yomo/presencejs to integrate YoMo's real-time platform into your web applications.

Quickstart Guide

1.Add YoMo Browser Client Library SDK

Using npm

$ npm i --save @yomo/presencejs

For CDN, you can use skypack: https://cdn.skypack.dev/@yomo/presencejs

<script type="module">
    import { YoMoClient } from 'https://cdn.skypack.dev/@yomo/presencejs';
</script>

2.Connect to YoMo

The client need to authenticate with YoMo to establish a realtime connection. The following code sample uses a demo YoMo's server(wss://ws-dev.yomo.run) and public Key to authenticate and print the message Connected to YoMo! when you’ve successfully connected.

import { YoMoClient } from '@yomo/presencejs';

// create an instance.
const yomoclient = new YoMoClient('wss://ws-dev.yomo.run', {
    // Authentication
    auth: {
        // Certification Type.
        // Optional values:'publickey' or 'token'.
        // 'token' is not yet supported.
        type: 'publickey',
        // The public key in your Allegro Mesh project.
        publicKey: '',
    },
    // The reconnection interval value.
    // The default value is 5000.
    reconnectInterval: 5000,
    // The reconnection attempts value.
    // The default value is 3.
    reconnectAttempts: 3,
});

yomoclient.on('connected', () => {
    console.log('Connected to YoMo');
});

3.Subscribe to messages from the server

yomoclient.on('connected', () => {
    // Get a room.
    const room = yomoclient.getRoom('001');

    // Handle events from the server and subscribe to data frames
    room.fromServer('online').subscribe(data => {
        console.log('online:', data);
    });

    room.fromServer('mousemove').subscribe(data => {
        console.log('mousemove:', data);
    });
});

4.Sending messages to the server

import { map, throttleTime } from 'rxjs/operators';

yomoclient.on('connected', () => {
    const room = yomoclient.getRoom('001');

    // Push data frames immediately.
    room.publish('online', {
        id: 'ID',
        x: 10,
        y: 10,
    });

    // Converting browser events into observable sequences.
    const mousemove$ = room
        .fromEvent(document, 'mousemove')
        // You can use RxJS Operators.
        .pipe(
            throttleTime(200),
            map(event => {
                return {
                    id: 'ID',
                    x: event.clientX,
                    y: event.clientY,
                };
            })
        );

    // Bind the event source to YoMo's service,
    // which will automatically push the data frame.
    room.bindServer(mousemove$, 'mousemove');
});

5.Close a connection to YoMo

A connection to YoMo can be closed once it is no longer needed.

yomoclient.close();
yomoclient.on('closed', () => {
    console.log('Closed the connection to YoMo.');
});

Api

YoMoClient

Methods of instance Description Type
on Subscribe to the connection and disconnection status on(event: 'connected' | 'closed', cb: () => void): void
close A connection to YoMo can be closed once it is no longer needed. close(): void
getRoom Get a room. getRoom(id: string): Room

Room

Methods of instance Description Type
fromServer Handle event from the server. fromServer<T>(event: string): Observable<T>
bindServer Bind the event source to YoMo's service, which will automatically push the data frame. bindServer<T>(source: Observable<T>, event: string): Subscription
fromEvent Converting browser events into observable sequences. Same as RxJS. fromEvent<T>(target: FromEventTarget<T>, event: string): Observable<T>
publish Push data frames immediately. publish<T>(event: string, data: T)

Examples

CursorChat

LICENSE

License: MIT

About

YoMo browser sdk

License:MIT License


Languages

Language:TypeScript 100.0%