Universal Feathers

The Feathers client (feathers/client) module provides Feathers core functionality (registering and retrieving services, events etc.) without relying on Express. This makes it possible to use Feathers in any JavaScript environment like the browser, React Native or other NodeJS servers and to transparently connect to and use services from a Feathers API server.

If they are not universally usable already (like feathers-hooks), many plug-ins provide their own client modules:

Important: The Feathers client libraries come transpiled to ES5 but require ES6 shims either through the babel-polyfill module or by including core.js in older browsers e.g. via <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>

Usage in NodeJS and client Module Loaders

For module loaders that support NPM like Browserify, Webpack or StealJS the Feathers client modules can be loaded individually. The following example sets up a Feathers client that uses a local Socket.io connection to communicate with remote services:

$ npm install feathers feathers-socketio feathers-hooks socket.io-client

const feathers = require('feathers/client')
const socketio = require('feathers-socketio/client');
const hooks = require('feathers-hooks');
const io = require('socket.io-client');

const socket = io('http://api.my-feathers-server.com');
const app = feathers()
  .configure(hooks())
  .configure(socketio(socket));

const messageService = app.service('messages');

messageService.on('created', message => console.log('Created a message', message));

// Use the messages service from the server
messageService.create({
  text: 'Message from client'
});

Usage with React Native

React Native currently requires a workaround due to an issue in Socket.io.

$ npm install feathers feathers-socketio feathers-hooks socket.io-client babel-polyfill

Then in the main application file:

import 'babel-polyfill';
import io from 'socket.io-client';
import feathers from 'feathers/client';
import socketio from 'feathers-socketio/client';
import hooks from 'feathers-hooks';

const socket = io('http://api.my-feathers-server.com', { transports: ['websocket'], forceNew: true });
const app = feathers()
  .configure(hooks())
  .configure(socketio(socket));

const messageService = app.service('messages');

messageService.on('created', message => console.log('Created a message', message));

// Use the messages service from the server
messageService.create({
  text: 'Message from client'
});

feathers-client

feathers-client consolidates a standard set of client plugins into a single distributable that can be used standalone in the browser or with other module loaders (like RequireJS) that don't support NPM. The following modules are included:

  • feathers as feathers (or the default module export)
  • feathers-hooks as feathers.hooks
  • feathers-rest as feathers.rest
  • feathers-socketio as feathers.socketio
  • feathers-primus as feathers.primus
  • feathers-authentication as feathers.authentication

In the browser a client that connects to the local server via websockets can be initialized like this:

<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script type="text/javascript" src="//unpkg.com/feathers-client@^1.0.0/dist/feathers.js"></script>
<script type="text/javascript">
  var socket = io('http://api.my-feathers-server.com');
  var app = feathers()
    .configure(feathers.hooks())
    .configure(feathers.socketio(socket));

  var messageService = app.service('messages');

  messageService.on('created', function(message) {
    console.log('Someone created a message', message);
  });

  messageService.create({
    text: 'Message from client'
  });
</script>

In the following chapters we will discuss the different ways to connect to a Feathers server via REST, Socket.io and Primus.

results matching ""

    No results matching ""