@eleven-am/pondsocket-client 0.0.2

package/browser/client.d.ts

@@ -0,0 +1,34 @@
+import { Channel } from '../core/channel';
+import { JoinParams } from '../types';
+
+export default class PondClient {
+    constructor (endpoint: string, params?: Record<string, any>);
+
+    /**
+     * @desc Connects to the server and returns the socket.
+     */
+    connect (backoff?: number): void;
+
+    /**
+     * @desc Returns the current state of the socket.
+     */
+    getState (): boolean;
+
+    /**
+     * @desc Disconnects the socket.
+     */
+    disconnect (): void;
+
+    /**
+     * @desc Creates a channel with the given name and params.
+     * @param name - The name of the channel.
+     * @param params - The params to send to the server.
+     */
+    createChannel (name: string, params?: JoinParams): Channel<import('../types').PondEventMap>;
+
+    /**
+     * @desc Subscribes to the connection state.
+     * @param callback - The callback to call when the state changes.
+     */
+    onConnectionChange (callback: (state: boolean) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+}

package/browser/client.js

@@ -0,0 +1,105 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PondClient_instances, _PondClient_channels, _PondClient_createPublisher;
+Object.defineProperty(exports, "__esModule", { value: true });
+const pondsocket_common_1 = require("@eleven-am/pondsocket-common");
+const channel_1 = require("../core/channel");
+class PondClient {
+    constructor(endpoint, params = {}) {
+        _PondClient_instances.add(this);
+        _PondClient_channels.set(this, void 0);
+        let address;
+        try {
+            address = new URL(endpoint);
+        }
+        catch (e) {
+            address = new URL(window.location.toString());
+            address.pathname = endpoint;
+        }
+        const query = new URLSearchParams(params);
+        address.search = query.toString();
+        const protocol = address.protocol === 'https:' ? 'wss:' : 'ws:';
+        if (address.protocol !== 'wss:' && address.protocol !== 'ws:') {
+            address.protocol = protocol;
+        }
+        this._address = address;
+        __classPrivateFieldSet(this, _PondClient_channels, {}, "f");
+        this._broadcaster = new pondsocket_common_1.SimpleSubject();
+        this._connectionState = new pondsocket_common_1.SimpleBehaviorSubject(false);
+    }
+    /**
+     * @desc Connects to the server and returns the socket.
+     */
+    connect(backoff = 1) {
+        const socket = new WebSocket(this._address.toString());
+        socket.onopen = () => {
+            this._connectionState.publish(true);
+        };
+        socket.onmessage = (message) => {
+            const data = JSON.parse(message.data);
+            this._broadcaster.publish(data);
+        };
+        socket.onerror = () => {
+            this._connectionState.publish(false);
+            setTimeout(() => {
+                this.connect(backoff * 2);
+            }, backoff * 1000);
+        };
+        this._socket = socket;
+    }
+    /**
+     * @desc Returns the current state of the socket.
+     */
+    getState() {
+        return this._connectionState.value;
+    }
+    /**
+     * @desc Disconnects the socket.
+     */
+    disconnect() {
+        var _a;
+        Object.values(__classPrivateFieldGet(this, _PondClient_channels, "f")).forEach((channel) => channel.leave());
+        this._connectionState.publish(false);
+        (_a = this._socket) === null || _a === void 0 ? void 0 : _a.close();
+        __classPrivateFieldSet(this, _PondClient_channels, {}, "f");
+    }
+    /**
+     * @desc Creates a channel with the given name and params.
+     * @param name - The name of the channel.
+     * @param params - The params to send to the server.
+     */
+    createChannel(name, params) {
+        if (__classPrivateFieldGet(this, _PondClient_channels, "f")[name] && __classPrivateFieldGet(this, _PondClient_channels, "f")[name].channelState !== pondsocket_common_1.ChannelState.CLOSED) {
+            return __classPrivateFieldGet(this, _PondClient_channels, "f")[name];
+        }
+        const publisher = __classPrivateFieldGet(this, _PondClient_instances, "m", _PondClient_createPublisher).call(this);
+        const channel = new channel_1.Channel(publisher, this._connectionState, name, this._broadcaster, params || {});
+        __classPrivateFieldGet(this, _PondClient_channels, "f")[name] = channel;
+        return channel;
+    }
+    /**
+     * @desc Subscribes to the connection state.
+     * @param callback - The callback to call when the state changes.
+     */
+    onConnectionChange(callback) {
+        return this._connectionState.subscribe(callback);
+    }
+}
+_PondClient_channels = new WeakMap(), _PondClient_instances = new WeakSet(), _PondClient_createPublisher = function _PondClient_createPublisher() {
+    return (message) => {
+        if (this._connectionState.value) {
+            this._socket.send(JSON.stringify(message));
+        }
+    };
+};
+exports.default = PondClient;

package/browser/client.test.d.ts

@@ -0,0 +1 @@
+export {};

package/browser/client.test.js

@@ -0,0 +1,123 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const pondsocket_common_1 = require("@eleven-am/pondsocket-common");
+const client_1 = __importDefault(require("./client"));
+class MockWebSocket {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(url) {
+        this.url = url;
+        this.send = jest.fn();
+        this.close = jest.fn();
+    }
+}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+global.WebSocket = MockWebSocket;
+describe('PondClient', () => {
+    let pondClient;
+    beforeEach(() => {
+        pondClient = new client_1.default('ws://example.com');
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    test('connect method should set up WebSocket events', () => {
+        pondClient.connect();
+        const mockWebSocket = pondClient['_socket'];
+        expect(mockWebSocket.onopen).toBeInstanceOf(Function);
+        expect(mockWebSocket.onmessage).toBeInstanceOf(Function);
+        expect(mockWebSocket.onerror).toBeInstanceOf(Function);
+    });
+    test('disconnect method should close the socket and leave all channels', () => {
+        const mockCallback = jest.fn();
+        pondClient.onConnectionChange(mockCallback);
+        pondClient.connect();
+        const mockWebSocket = pondClient['_socket'];
+        mockWebSocket.onopen();
+        expect(mockCallback).toHaveBeenCalledWith(true);
+        const channel = pondClient.createChannel('exampleChannel');
+        const spyOnLeave = jest.spyOn(channel, 'leave');
+        mockCallback.mockClear();
+        pondClient.disconnect();
+        expect(mockCallback).toHaveBeenCalledWith(false);
+        expect(mockWebSocket.close).toHaveBeenCalled();
+        expect(spyOnLeave).toHaveBeenCalled();
+    });
+    test('createChannel method should create a new channel or return an existing one', () => {
+        const mockChannel = pondClient.createChannel('exampleChannel');
+        const mockExistingChannel = pondClient.createChannel('exampleChannel');
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        expect(mockChannel).toBeInstanceOf(require('../core/channel').Channel);
+        expect(mockExistingChannel).toBe(mockChannel);
+    });
+    test('onConnectionChange method should subscribe to connection state changes', () => {
+        const mockCallback = jest.fn();
+        const unsubscribe = pondClient.onConnectionChange(mockCallback);
+        pondClient['_connectionState'].publish(true);
+        expect(mockCallback).toHaveBeenCalledWith(true);
+        unsubscribe();
+        pondClient['_connectionState'].publish(false);
+        // Should not be called again after unsubscribe
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+    test('getState method should return the current state of the socket', () => {
+        const initialState = pondClient.getState();
+        expect(initialState).toBe(false);
+        pondClient['_connectionState'].publish(true);
+        const updatedState = pondClient.getState();
+        expect(updatedState).toBe(true);
+    });
+    test('publish method should send a message to the server', () => {
+        pondClient.connect();
+        const mockWebSocket = pondClient['_socket'];
+        const channel = pondClient.createChannel('exampleChannel');
+        mockWebSocket.onopen();
+        channel.join();
+        expect(mockWebSocket.send).toHaveBeenCalledTimes(1);
+        const sentObject = mockWebSocket.send.mock.calls[0][0];
+        expect(sentObject).toBeDefined();
+        expect(JSON.parse(sentObject)).toEqual(expect.objectContaining({
+            addresses: pondsocket_common_1.ChannelReceiver.ALL_USERS,
+            action: pondsocket_common_1.ClientActions.JOIN_CHANNEL,
+            event: pondsocket_common_1.ClientActions.JOIN_CHANNEL,
+            payload: {},
+            channelName: 'exampleChannel',
+        }));
+    });
+    it('onError method should reconnect to the server', () => __awaiter(void 0, void 0, void 0, function* () {
+        const connectSpy = jest.spyOn(pondClient, 'connect');
+        pondClient.connect();
+        let mockWebSocket = pondClient['_socket'];
+        expect(connectSpy).toHaveBeenCalledTimes(1);
+        connectSpy.mockClear();
+        mockWebSocket.onerror();
+        yield new Promise((resolve) => setTimeout(resolve, 1000));
+        expect(connectSpy).toHaveBeenCalledTimes(1);
+        connectSpy.mockClear();
+        mockWebSocket = pondClient['_socket'];
+        mockWebSocket.onerror();
+        yield new Promise((resolve) => setTimeout(resolve, 2000));
+        expect(connectSpy).toHaveBeenCalledTimes(1);
+    }));
+    test('it should publish messages received from the server', () => {
+        pondClient.connect();
+        const mockWebSocket = pondClient['_socket'];
+        const broadcasterSpy = jest.spyOn(pondClient['_broadcaster'], 'publish');
+        mockWebSocket.onopen();
+        mockWebSocket.onmessage({ data: JSON.stringify({ event: 'exampleEvent' }) });
+        expect(broadcasterSpy).toHaveBeenCalledTimes(1);
+        expect(broadcasterSpy).toHaveBeenCalledWith({ event: 'exampleEvent' });
+    });
+});

package/core/channel.d.ts

@@ -0,0 +1,125 @@
+import { ChannelState } from '@eleven-am/pondsocket-common';
+import {
+    PondPresence,
+    PondMessage,
+    PresencePayload,
+    PondEventMap,
+    EventWithResponse,
+    PayloadForResponse,
+    ResponseForEvent,
+} from '../types';
+
+export declare class Channel<EventMap extends PondEventMap = PondEventMap> {
+    /**
+     * @desc Gets the current connection state of the channel.
+     */
+    get channelState (): ChannelState;
+
+    /**
+     * @desc Connects to the channel.
+     */
+    join (): void;
+
+    /**
+     * @desc Disconnects from the channel.
+     */
+    leave (): void;
+
+    /**
+     * @desc Monitors the channel for messages.
+     * @param callback - The callback to call when a message is received.
+     */
+    onMessage<Event extends keyof EventMap> (callback: (event: Event, message: EventMap[Event]) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Monitors the channel for messages.
+     * @param event - The event to monitor.
+     * @param callback - The callback to call when a message is received.
+     */
+    onMessageEvent<Event extends keyof EventMap> (event: Event, callback: (message: EventMap[Event]) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Monitors the channel state of the channel.
+     * @param callback - The callback to call when the connection state changes.
+     */
+    onChannelStateChange (callback: (connected: ChannelState) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Detects when clients join the channel.
+     * @param callback - The callback to call when a client joins the channel.
+     */
+    onJoin (callback: (presence: PondPresence) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Detects when clients leave the channel.
+     * @param callback - The callback to call when a client leaves the channel.
+     */
+    onLeave (callback: (presence: PondPresence) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Detects when clients change their presence in the channel.
+     * @param callback - The callback to call when a client changes their presence in the channel.
+     */
+    onPresenceChange (callback: (presence: PresencePayload) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Sends a message to specific clients in the channel.
+     * @param event - The event to send.
+     * @param payload - The message to send.
+     * @param recipient - The clients to send the message to.
+     */
+    sendMessage (event: string, payload: PondMessage, recipient: string[]): void;
+
+    /**
+     * @desc Sends a message to the server and waits for a response.
+     * @param sentEvent - The event to send.
+     * @param payload - The message to send.
+     */
+    sendForResponse<Event extends EventWithResponse<EventMap>> (sentEvent: Event, payload: PayloadForResponse<EventMap, Event>): Promise<ResponseForEvent<EventMap, Event>>;
+
+    /**
+     * @desc Broadcasts a message to every other client in the channel except yourself.
+     * @param event - The event to send.
+     * @param payload - The message to send.
+     */
+    broadcastFrom<Event extends keyof EventMap> (event: Event, payload: EventMap[Event]): void;
+
+    /**
+     * @desc Broadcasts a message to the channel, including yourself.
+     * @param event - The event to send.
+     * @param payload - The message to send.
+     */
+    broadcast<Event extends keyof EventMap> (event: Event, payload: EventMap[Event]): void;
+
+    /**
+     * @desc Gets the current presence of the channel.
+     */
+    getPresence (): PondPresence[];
+
+    /**
+     * @desc Monitors the presence of the channel.
+     * @param callback - The callback to call when the presence changes.
+     */
+    onUsersChange (callback: (users: PondPresence[]) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+
+    /**
+     * @desc Checks if the channel is connected.
+     */
+    isConnected (): boolean;
+
+    /**
+     * @desc Checks if the channel is stalled.
+     */
+    isStalled (): boolean;
+
+    /**
+     * @desc Checks if the channel is closed.
+     */
+    isClosed (): boolean;
+
+    /**
+     * @desc Monitors the connection state of the channel.
+     * @param callback - The callback to call when the connection state changes.
+     */
+    onConnectionChange (callback: (connected: boolean) => void): import('@eleven-am/pondsocket-common/subjects/types').Unsubscribe;
+}