Feathers Client

One of the most notable features of Feathers is that it can also be used as the client. The difference to many other frameworks is that it isn't a separate library, you instead get the exact same functionality as on the server. This means you can use services and hooks and configure plugins. By default a Feathers client automatically creates services that talk to a Feathers server.

In order to connect to a Feathers server, a client creates Services that use a REST or websocket connection to relay method calls and allow listening to events on the server. This means the Feathers application instance is usable the exact same way as you would on the server.

Modules relevant for use on the client are

Important: You do not have to use Feathers on the client to connect to a Feathers server. The client chapters above also describe how to use a REST HTTP, Socket.io or Primus connection directly without Feathers on the client side. For more information regarding authentication see the Authentication client chapter.

This chapter describes how to set up Feathers as the client in Node, React Native and in the browser with a module loader like Webpack or Browserify or through a <script> tag. The examples are using the Socket.io client. For other connection methods see the chapters linked above.

Important: Feathers can be used on the client throught the individual modules or the @feathersjs/client module which combines the modules mentioned above into a single, ES5 transpiled version.

Node

To connect to a Feathers server in NodeJS install the client connection library needed (here socket.io-client), Feathers core and appropriate client library:

npm install @feathersjs/feathers @feathersjs/socketio-client socket.io-client --save

Then initialize like this:

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

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

client.configure(socketio(socket));

const messageService = client.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'
});

React Native

React Native usage is the same as for the Node client. Install the required packages into your React Native project.

$ npm install @feathers/feathers @feathers/socketio-client socket.io-client

Then in the main application file:

import io from 'socket.io-client';
import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';

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

client.configure(socketio(socket));

const messageService = client.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'
});

As React Native for Android doesn't handle well timeouts longer than a minute, you might want to set lower values for pingInterval and pingTimeout of feathers-socketio on your server, which will stop warnings related to this issue. For example:

const app = feathers();
const socketio = require('feathers-socketio');

app.configure(socketio({
  pingInterval: 10000,
  pingTimeout: 50000
}));

Module loaders

All modules in the @feathersjs namespace are using ES6 and have to be transpiled for target browsers without full ES6 support. Most client side module loader exclude the node_modules folder from being transpiled and have to be configured to include modules in the @feathersjs namespace.

Webpack

For Webpack, the recommended babel-loader rule normally excludes everything in node_modules. It has to be adjusted to skip node_modules/@feathersjs. In the module rules in your webpack.config.js update the babel-loader section to this:

{
  test: /\.jsx?$/,
  exclude: /node_modules(\/|\\)(?!(@feathersjs))/,
  loader: 'babel-loader'
}

create-react-app

create-react-app uses Webpack but does not allow to modify the configuration unless you eject. If you do not want to eject, use the @feathersjs/client module instead.

Browserify

In Browserify the babelify transform has to be used. All Feathers packages indicate that they need the transform and will be then transpiled automatically.

Others

As mentioned above, node_modules/@feathersjs and all its subfolders have to be included in the ES6+ transpilation step when using any module loader that is using a transpiler. For non-CommonJS formats (like AMD) and an ES5 compatible version of Feathers and its client modules you can use the @feathersjs/client module.

@feathersjs/client

GitHub stars npm version Changelog

$ npm install @feathersjs/client --save

@feathersjs/client is a module that bundles the separate Feathers client side modules into one providing the code as ES5 which is compatible with modern browsers (IE10+). It can also be used directly int the browser through a <script> tag. Here is a table of which Feathers client module is included:

Feathers module @feathersjs/client
@feathers/feathers feathers (default)
@feathers/errors feathers.errors
@feathersjs/rest-client feathers.rest
@feathersjs/socketio-client feathers.socketio
@feathersjs/primus-client feathers.primus
@feathersjs/authentication-client feathers.authentication

Important: The Feathers client libraries come transpiled to ES5 and 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>

Important: When you are loading @feathersjs/client you do not have install or load any of the other modules listed in the table above.

When to use

@feathersjs/client can be used directly in the browser using a <script> tag without a module loader as well as with module loaders that do not support CommonJS (like RequireJS) or React applications created with a default create-react-app.

If you are using the Feathers client with Node or React Native you should follow the steps described in the Node and React Native sections and not use @feathersjs/client.

Note: All Feathers client examples show direct usage and usage with @feathersjs/client.

Load with a module loader

You can use @feathersjs/client with other browser module loaders/bundlers (instead of using the modules directly) but it may include packages you may not use and result in a slightly larger bundle size.

import feathers from '@feathersjs/feathers';

// Socket.io is exposed as the `io` global.
const socket = io('http://localhost:3030', {
  transports: ['websocket']
});
// @feathersjs/client is exposed as the `feathers` global.
const app = feathers();

app.configure(feathers.socketio(socket));
app.configure(feathers.authentication());

app.service('messages').create({
  text: 'A new message'
});

// feathers.errors is an object with all of the custom error types.

Load from CDN with <script>

Below is an example of the scripts you would use to load @feathersjs/client from unpkg.com.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="//unpkg.com/@feathersjs/client@^3.0.0/dist/feathers.js"></script>
<script src="//unpkg.com/socket.io-client@1.7.3/dist/socket.io.js"></script>
<script>
  // Socket.io is exposed as the `io` global.
  var socket = io('http://localhost:3030', {
    transports: ['websocket']
  });
  // @feathersjs/client is exposed as the `feathers` global.
  var app = feathers();

  app.configure(feathers.socketio(socket));
  app.configure(feathers.authentication());

  app.service('messages').create({
    text: 'A new message'
  });

  // feathers.errors is an object with all of the custom error types.
</script>

RequireJS

Here is an example of loading feathers-client using RequireJS Syntax:

define(function (require) {
  const feathers = require('@feathersjs/client');
  const { socketio, authentication } = feathers;
  const io = require('socket.io-client');

  const socket = io('http://localhost:3030', {
    transports: ['websocket']
  });
  // @feathersjs/client is exposed as the `feathers` global.
  const app = feathers();

  app.configure(socketio(socket));
  app.configure(authentication());

  app.service('messages').create({
    text: 'A new message'
  });

  return const;
});

Is anything wrong, unclear, missing? Leave a comment or edit this page.

results matching ""

    No results matching ""