Package Exports

rxjs-ddp-client

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rxjs-ddp-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rxjs-ddp-client

This is a simple WebSocket library for real time app like Chats, Notification, etc based on DDP protocol powered by RXjs

use Meteor-DDP protocol (without the need of Meteor Client) to connect to any Server supporting DDP protocol.
use RxJs to handle the collection items in Streams
customizable Cache options to persist and load data from cache

Thi library works well together with:

https://github.com/yjmade/django-ddp

Difference with Oortcloud/node-ddp-client

Code rewrite using ES6 and Typescript (add typings and interfaces)
Using customizable storage system (minimongo-db or minimongo-cache dependencies are NOT required)
Access to collection's data by simple subscribe to Observable and use RxJs operators (map, zip, filter, etc) for querying

Install

npm install rxjs-ddp-client

Usage Example

First you need to create a custom DDPClient class that will extend from the base class DDPClient (for a complete example see the file MyDDPClient.ts).
In this custom DDPClient class you need to implement all your DDP app logic (Login, Collections names, DDP server url, etc)

// example/MyDDPClient.ts
//...

// Define your collections names
export enum MY_DDP_COLLECTIONS  {
  USERS = 'users',
  CHATS = 'chats',
}

// Class methods implementations

  connect() {
    const ddpServerUrl = 'ws://localhost:8080';
    super.connect(ddpServerUrl);
  }

  login() {
    return this.callWithPromise('login', {
      username: 'xxx',
      password: 'xxx',
    });
  }

  // Events called by DDPClient
  onConnected() {
    // DDP connected, now we can login and subscribe to the publications on the server

    this.ddpStatus.isConnected = true;
    this.ddpStatus.isDisconnected = false;

    // Example: Login automatically when WebSocket is connected
    this.login().then(() => {
      this.subscribePublications();
      this.observeCollections();
    });
  }

  onDisconnected() {
    // DDP disconnected, notify user

    this.ddpStatus.isConnected = true;
    this.ddpStatus.isDisconnected = false;
  }

  onSocketError(error) {
    // Custom code on Socket error
  }

  // ...
}

rxjs-ddp-client comes with the data cache out of the box. To keep things flexible, you can use any cache system by implementing a class like MyDDPCacheEngine that has the methods required by DDPCacheEngine interface. For example if you chose to use LocalStorage as cache engine you need a class like this:

// example/MyDDPCacheEngine.ts

export class MyDDPCacheEngine implements DDPCacheEngine {
  constructor() {}

  getItem(keyName: string) {
    return Observable.of(localStorage.getItem(keyName));
  }

  setItem(keyName: string, value: any) {
    return Observable.of(localStorage.setItem(keyName, value));
  }

  removeItem(keyName: string) {
    return Observable.of(localStorage.removeItem(keyName));
  }
}

Ultimately you can initialize your custom DDP client in your app main entry point

VanillaJS

// app.ts
import { DDPCacheEngine } from 'rxjs-ddp-client';
import { MyDDPClient, MyDDPCacheEngine } from './src/utils/ddp';

const myDDPClient = new MyDDPClient();

// OPTION 1: Wrapper of LocalForage or any storage using Observable (methods must match to DDPCacheEngine interface)
// const _storageService = new MyLocalForageWrapper();

// OPTION 2: if you use Angular 2 you could consider using the StorageService of ng2-platform ([see ng2-platform repo](https://github.com/thomasgazzoni/ng2-platform))
// const _storageService = this._storageService; // Need to declare StorageService in the constructor

// OPTION 3: use the browser localStorage (using the example file my-ddp-cache-engine.ts above)
const _storageService = MyDDPCacheEngine;

myDDPClient.setCacheEngine(_storageService);
myDDPClient.connect();

Angular 2+

// app.component.ts
import { Component } from '@angular/core';
import { MyDDPClient } from './my-ddp-client';
import { MyDDPCacheEngine } from './my-ddp-cache-engine';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app';

  constructor() {
    this.init();
  }

  init() {
    const myDDPClient = new MyDDPClient();
    const myDDPCacheEngine = new MyDDPCacheEngine();

    myDDPClient.initCacheStorage(myDDPCacheEngine);
    myDDPClient.connect();
  }
}

Thanks

Thanks to oortcloud for the node-ddp-client which formed the inspiration for this code.
Thanks to yjmade for the Django/PostgreSQL implementation of the Meteor server.

License

MIT