客户端使用¶

到目前为止,我们已经看到Feathers及其服务,事件和钩子也可以在浏览器中使用,这是一个非常独特的功能.通过在浏览器中实现与API通信的自定义服务,Feathers允许我们使用任何框架构建任何客户端应用程序.

这正是Feathers客户端服务所做的.为了连接到Feathers服务器,客户端创建使用REST或websocket连接来中继方法调用并允许从服务器侦听事件的服务.这意味着我们可以使用客户端Feathers应用程序透明地与Feathers服务器通信,就像我们在本地使用它一样(正如我们在前面的例子中所做的那样)！

注解

以下示例演示如何通过 <script> 标签使用Feathers客户端.有关使用Webpack或Browserify等模块加载器以及加载单个模块的更多信息,请参阅 ../api/client.

实时客户端¶

在实时API 中,我们看到了一个如何直接使用websocket连接来进行服务调用和监听事件的示例.我们还可以使用浏览器Feathers应用程序和使用此连接的客户端服务.让我们将 public/client.js 更新为:

// 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客户端¶

我们还可以使用许多不同的Ajax库创建通过REST进行通信的服务,例如 jQuery 或 Axios.对于这个例子,我们将使用 fetch,因为它是内置的现代浏览器.

重要

REST服务只能在本地向自己发送实时事件. REST不支持来自服务器的实时更新.

由于我们正在提出跨域请求,因此我们首先必须启用跨源资源共享(CORS) on服务器.将 app.js 更新为:

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'));

注解

这只是设置标题的基本中间件.在生产(以及Feathers生成器创建的应用程序)中,我们将使用 cors module.

然后我们可以将 public/client.js 更新为:

// 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();

下一步是什么？¶

在本章中,我们学习了如何透明地连接到另一个Feathers服务器并使用其服务,就像我们以前在服务器端访问它们时所做的那样.在 Feathers生成器(CLI) 中,我们将简要介绍Feathers生成器(CLI)以及它在构建应用程序之前用于构建应用程序的模式创建聊天应用程序.