Important: This is the documentation for a previous version of Feathers.
For the latest documentation please visit docs.feathersjs.com.

Client use

So far, we have seen that Feathers with its services, events and hooks can also be used in the browser, which is a very unique feature. By implementing custom services that talk to an API in the browser, Feathers allows us to structure any client-side application with any framework.

This is exactly what Feathers client-side services do. 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 from the server. This means that we can use a client-side Feathers application to transparently talk to a Feathers server the same way we'd use it locally (as we've done in previous examples)!

Note: The following examples demonstrate using the Feathers client through a <script> tag. For more information on using a module loader like Webpack or Browserify and loading individual modules see the client API documentation.

Real-time client

In the real-time chapter we saw an example of how to directly use a websocket connection to make service calls and listen to events. We can also use a browser Feathers application and client services that use this connection. Let's update public/client.js to:

// Create a websocket connecting to our Feathers server
const socket = io('http://localhost:3030');
// Create a Feathers application
const app = feathers();
// Configure Socket.io client services to use that socket
app.configure(feathers.socketio(socket));

app.service('messages').on('created', message => {
  console.log('Someone created a message', message);
});

async function createAndList() {
  await app.service('messages').create({
    text: 'Hello from Feathers browser client'
  });

  const messages = await app.service('messages').find();

  console.log('Messages', messages);
}

createAndList();

REST client

We can also create services that communicate via REST using many different Ajax libraries like jQuery or Axios. For this example, we will use fetch since it's built-in modern browsers.

Important: REST services can only emit real-time events locally, to themselves. REST does not support real-time updates from the server.

Since we are making a cross-domain request, we first have to enable Cross-Origin Resource sharing (CORS) on the server. Update app.js to:

const feathers = require('@feathersjs/feathers');
const express = require('@feathersjs/express');
const socketio = require('@feathersjs/socketio');
const memory = require('feathers-memory');

// This creates an app that's both an Express and Feathers app
const app = express(feathers());

// Enable CORS
app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// Turn on JSON body parsing for REST services
app.use(express.json())
// Turn on URL-encoded body parsing for REST services
app.use(express.urlencoded({ extended: true }));
// Set up REST transport using Express
app.configure(express.rest());

// Configure the Socket.io transport
app.configure(socketio());

// On any real-time connection, add it to the 'everybody' channel
app.on('connection', connection => app.channel('everybody').join(connection));

// Publish all events to the 'everybody' channel
app.publish(() => app.channel('everybody'));

// Initialize the messages service
app.use('messages', memory({
  paginate: {
    default: 10,
    max: 25
  }
}));

// Set up an error handler that gives us nicer errors
app.use(express.errorHandler());

// Start the server on port 3030
const server = app.listen(3030);

server.on('listening', () => console.log('Feathers API started at localhost:3030'));

Note: This is just a basic middleware setting the headers. In production (and applications created by the Feathers generator) we will use the cors module.

Then we can update public/client.js to:

// Create a Feathers application
const app = feathers();
// Initialize a REST connection
const rest = feathers.rest('http://localhost:3030');
// Configure the REST client to use 'window.fetch'
app.configure(rest.fetch(window.fetch));

app.service('messages').on('created', message => {
  console.log('Created a new message locally', message);
});

async function createAndList() {
  await app.service('messages').create({
    text: 'Hello from Feathers browser client'
  });

  const messages = await app.service('messages').find();

  console.log('Messages', messages);
}

createAndList();

What's next?

In this chapter we learned how to transparently connect to another Feathers server and use its services as we previously did when accessing them server-side. In the last Basics chapter we'll briefly look at the Feathers generator (CLI) and the patterns it uses to structure an application before jumping into building a full chat application.

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

results matching ""

    No results matching ""