rxjs-ddp-client
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

Build Status npm version npm

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:

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

Readme

Keywords

Package Sidebar

Install

npm i rxjs-ddp-client

Weekly Downloads

4

Version

1.4.0

License

MIT

Unpacked Size

238 kB

Total Files

53

Last publish

Collaborators

  • thomasgaz