Feathers 客户端¶

Feathers最显着的特点之一是它也可以用作客户端. 与大多数其他框架相比, 它不是一个单独的库;相反, 您可以获得与客户端和服务器完全相同的功能. 这意味着您可以使用钩子并配置插件. 默认情况下, Feathers客户端会自动创建与Feathers服务器通信的服务.

为了连接到Feathers服务器, 客户端创建服务, 它使用REST或websocket连接来中继方法调用, 并允许在服务器上监听事件. 这意味着 Feathers应用程序实例的使用方式与服务器上的完全相同.

与客户最相关的模块是:

@feathersjs/feathers 初始化一个新的Feathers 应用
REST客户端通过以下方式连接服务 Express.
Socket.io 客户端通过以下方式连接服务 Socket.io.
Primus 客户端通过 Primus 连接服务.
验证客户端来验证客户端

重要

您不必在客户端上使用Feathers连接到Feathers服务器. 上面的客户端章节还描述了如何在客户端没有Feathers的情况下直接使用REST HTTP, Socket.io或Primus连接. 有关身份验证的详细信息, 请参阅验证客户端.

本章介绍如何使用Webpack或Browserify等模块加载器或通过 <script> 标签将Feathers设置为Node, React Native和浏览器中的客户端. 示例使用 Socket.io 客户端. 有关其他连接方法, 请参阅上面链接的章节.

重要

可以通过各个模块或者 @feathersjs/client 模块在客户端上使用Feathers.后者将上述所有模块组合成一个ES5转换版本.

Node¶

要连接到NodeJS中的Feathers服务器, 请安装所需的客户端连接库(此处为 socket.io-client), 以及Feathers核心库和特定于连接的库:

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

然后像这样初始化:

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');
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用法与 Node客户端相同. 将所需的软件包安装到您的 React Native 项目中.

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

然后在主应用程序文件中:

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

由于React Native for Android不能处理超过一分钟的超时, 可以考虑在服务器上为 feathers-socketio 设置 pingInterval 和 pingTimeout 的较低值. 这将停止与此问题相关的警告. 例如:

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

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

模块加载器¶

@feathersjs 命名空间中的所有模块都使用ES6. 必须将它们转换为支持不完全支持ES6的浏览器. 大多数客户端模块加载器都不会将 node_modules 文件夹排除在外, 并且必须配置为包含 @feathersjs 命名空间和 debug 模块中的模块.

Webpack¶

对于Webpack, 推荐的 babel-loader 规则通常会排除 node_modules 中的所有内容. 必须调整它以跳过 node_modules/@feathersjs 和 node_modules/debug. 在你的 webpack.config.js 中的 module 中, 将 babel-loader 部分更新为:

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

create-react-app¶

create-react-app 使用 Webpack 但不允许修改配置, 除非你弹出. 如果您不想弹出, 请改用 @feathersjs/client 模块.

npm i --save @feathersjs/client

然后, 您可以从此包导入已转换的库:

import feathers from "@feathersjs/client";

Browserify¶

在Browserify中, 必须使用 babelify 转换器. 所有Feathers包都表明他们需要转换, 应该自动进行转换.

其他¶

如上所述, 当使用任何使用转换器的模块加载器时, node_modules/@feathersjs 及其所有子文件夹必须包含在ES6 +转换步骤中.对于非CommonJS格式(如AMD)和兼容ES5的Feathers及其客户端模块, 您可以使用 @feathersjs/client 模块.

@feathersjs/client¶

$ npm install @feathersjs/client --save

@feathersjs/client 是一个模块, 它将单独的Feathers客户端模块捆绑成一个模块, 提供与现代浏览器(IE10 +)兼容的ES5代码. 它也可以通过 <script> 标签直接在浏览器中使用. 这是一个包含Feathers客户端模块的表:

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

重要

Feathers客户端库被转换为ES5并需要ES6填充程序通过 babel-polyfill 模块或包含 core.js 在较旧的浏览器中, 例如通过 <script type = \“text/javascript \”src = \“//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js\”></script>

重要

当您加载@feathersjs/client时, 您不必安装或加载上表中列出的任何其他模块.

何时使用¶

feathersjs/client 可以直接在浏览器中使用 <script> 标签而不使用模块加载器, 也可以使用不支持CommonJS的模块加载器(如RequireJS)或使用a创建的React应用程序默认 create-react-app.

如果您使用带有Node或React Native的Feathers客户端, 您应该遵循 Node 和 React Native 部分中描述的步骤, 不要使用 @feathersjs/client.

注解

所有Feathers客户端示例都显示了 @feathersjs/client 的直接用法和用法.

使用模块加载器加载¶

您可以将 feathersss/client 与其他浏览器模块加载器/捆绑器一起使用(而不是直接使用模块), 但它可能包含您可能不使用的包, 并导致稍大的包大小.

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

// Socket.io is exposed as the `io` global.
const socket = io('http://localhost:3030');
// @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.

使用 `<script>` 从CDN加载¶

下面是一个脚本示例, 用于从 unpkg.com 加载 @feathersjs/client.

<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');
  // @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¶

以下是使用RequireJS语法加载feathers-client的方法:

define(function (require) {
  const feathers = require('@feathersjs/client');
  const io = require('socket.io-client');
  const socket = io('http://localhost:3030');
  // @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'
  });
  return const;
});