Package Exports

loopback-component-pubsub

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 (loopback-component-pubsub) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

LoopBack Component PubSub

A LoopBack Framework Component that provides publish events over WebSockets.

This module will provide publish/subscribe functionality for LoopBack Framework Models that implements the PubSub Mixin.

The publish/subscribe pattern allow clients to subscribe to specific events, listening for data streams a server publish everytime there are new changes.

Publish Subscribe Pattern

Installation

$ npm install --save loopback-component-pubsub

Setup Module

Update the server/component-config.json as follows:

{
  "loopback-component-explorer": {
    "mountPath": "/explorer"
  },
  "loopback-component-pubsub": {
    "auth": true
  }
}

Update the server/model-config.json as follows:

{
    "mixins": [
        "loopback/common/mixins",
        "loopback/server/mixins",
        "../common/mixins",
        "./mixins",
        "../node_modules/loopback-component-pubsub/mixins"
    ]
}

Configure Models

Thanks to the provided mixin, you are able to define in which Models you want to make available the PubSub functionality by explicitly defining it in the model json file.

{
  "mixins": {
    "PubSub": true
  }
}

Update Server File

Update the start method within the server/server.js file as follows:

app.start = function() {
  return server = app.listen(function() {
    app.emit('started', server);
    var baseUrl = app.get('url').replace(/\/$/, '');
    console.log('Web server listening at: %s', baseUrl);
    if (app.get('loopback-component-explorer')) {
      var explorerPath = app.get('loopback-component-explorer').mountPath;
      console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
    }
  });
};

Un-Authenticated Vanilla JavaScript Example

You can subscribe to any valid remote method within your model as follows:

<html>
<head>
  <title>Event Source Test</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var client = io('http://localhost:3000');
        // subscribe for newly created rooms 
        client.on('[POST]/api/rooms', function (room) {
           console.info('Room ', room);
        });
        // subscribe for new messages in the room with Id 1
        client.on('[POST]/api/rooms/1/messages', function (message) {
           console.info('Message ', message);
        });
  </script>
</head>
<body></body>
</html>

Authenticated Vanilla JavaScript Example

You can subscribe to any valid remote method within your model as follows:

<html>
<head>
  <title>Event Source Test</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var client;
    // Ajax Request logic to login and to get a token [/POST]/api/users/login
    // Use whatever method works best for you when doing AJAX Requests
    userLogin(function onLogged(token) {
      client = io('http://localhost:3000');
      client.on('connect', function onConnect() {
        client.emit('authentication', token);
        client.on('unauthorized', function onUnauthorized(res) {
          console.error('Unauthenticated', res);
        });
      });
      // subscribe for newly created rooms 
      client.on('[POST]/api/rooms', function (room) {
        console.info('Room ', room);
      });
      // subscribe for new messages in the room with Id 1
      client.on('[POST]/api/rooms/1/messages', function (message) {
        console.info('Message ', message);
      });
    }); 
  </script>
</head>
<body></body>
</html>

NativeScript2 SDK Example Un-Authenticated

When using the loopback-sdk-builder

import { Component } from "@angular/core";
import { API_PROVIDERS, LoopBackConfig, RoomApi } from './sdk';

@Component({
    selector: "my-app",
    templateUrl: 'path/to/view.html',
    providers: [ API_PROVIDERS ]
})

export class AppComponent {
    constructor(private room: RoomApi) {
        // or local network IP or public IP/DNS
        LoopBackConfig.setBaseURL('http://192.168.1.11:3000');
        LoopBackConfig.setApiVersion('api');
        room.onCreate().subscribe((res: { id: number | string }) => {
            alert(res.id);
        });
        room.onCreateMessages(1).subscribe((res: { text: string }) => {
            alert(res.text);
        });
    }
}

NativeScript2 SDK Example Authenticated

When using the loopback-sdk-builder

import { Component } from "@angular/core";
import { API_PROVIDERS, LoopBackConfig, UserApi, RoomApi } from './sdk';

@Component({
    selector: "my-app",
    templateUrl: 'path/to/view.html',
    providers: [ API_PROVIDERS ]
})

export class AppComponent {
    constructor(private room: RoomApi, private user: UserApi) {
        // or local network IP or public IP/DNS
        LoopBackConfig.setBaseURL('http://192.168.1.11:3000');
        LoopBackConfig.setApiVersion('api');
        user.login({ email: 'test@test.com', password: 'test' }).subscribe(res => {
            console.info('User has been authenticated over HTTP', res);
            room.onCreate().subscribe((res: { id: number | string }) => {
                alert(res.id);
            });
            room.onCreateMessages(1).subscribe((res: { text: string }) => {
                alert(res.text);
            });
        });
}

Tutorials

The Ultimate Guide for Building Real Time Applications

TODO

Implement Clustering Functionality