feathers-docs/docs/api/client.html at master · wdk-docs/feathers-docs

475 lines (348 loc) · 34 KB
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="zh-CN" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh-CN" > <!--<![endif]-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feathers 客户端 &mdash; feathers docs v2019.06.21 文档</title>
  <script type="text/javascript" src="../_static/js/modernizr.min.js"></script>
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script type="text/javascript" src="../_static/jquery.js"></script>
        <script type="text/javascript" src="../_static/underscore.js"></script>
        <script type="text/javascript" src="../_static/doctools.js"></script>
        <script type="text/javascript" src="../_static/language_data.js"></script>
        <script type="text/javascript" src="../_static/translations.js"></script>
    <script type="text/javascript" src="../_static/js/theme.js"></script>
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <link rel="index" title="索引" href="../genindex.html" />
    <link rel="search" title="搜索" href="../search.html" />
    <link rel="next" title="REST客户端" href="client/rest.html" />
    <link rel="prev" title="Primus" href="primus.html" /> 
<body class="wy-body-for-nav">
  <div class="wy-grid-for-nav">
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
            <a href="../contents.html" class="icon icon-home"> feathers docs
          </a>
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
        </div>
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
              <p class="caption"><span class="caption-text">Contents:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../index.html">Feathers[fɛðɚ]</a></li>
<li class="toctree-l1"><a class="reference internal" href="../guides/index.html">指南</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">API</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="readme.html">API</a></li>
<li class="toctree-l2"><a class="reference internal" href="index.html#core">核心</a></li>
<li class="toctree-l2"><a class="reference internal" href="index.html#transports">传输层</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html#client">客户端</a><ul class="current">
<li class="toctree-l3 current"><a class="current reference internal" href="#">Feathers 客户端</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#node">Node</a></li>
<li class="toctree-l4"><a class="reference internal" href="#react-native">React Native</a></li>
<li class="toctree-l4"><a class="reference internal" href="#module-loaders">模块加载器</a></li>
<li class="toctree-l4"><a class="reference internal" href="#api-feathersjs-client">&#64;feathersjs/client</a></li>
<li class="toctree-l3"><a class="reference internal" href="client/rest.html">REST客户端</a></li>
<li class="toctree-l3"><a class="reference internal" href="client/socketio.html">Socket.io 客户端</a></li>
<li class="toctree-l3"><a class="reference internal" href="client/primus.html">Primus 客户端</a></li>
<li class="toctree-l2"><a class="reference internal" href="index.html#authentication">认证</a></li>
<li class="toctree-l2"><a class="reference internal" href="index.html#database">数据库</a></li>
<li class="toctree-l1"><a class="reference internal" href="../migrating.html">Feathers v3(秃鹰)</a></li>
<li class="toctree-l1"><a class="reference internal" href="../SECURITY.html">Feathers 安全</a></li>
<li class="toctree-l1"><a class="reference internal" href="../Ecosystem/index.html">令人敬畏的Feathers</a></li>
<li class="toctree-l1"><a class="reference internal" href="../help/readme.html">求助！</a></li>
<li class="toctree-l1"><a class="reference internal" href="../faq/readme.html">常问问题</a></li>
<li class="toctree-l1"><a class="reference internal" href="../contributing/readme.html">特约</a></li>
<li class="toctree-l1"><a class="reference internal" href="../license.html">有许可证</a></li>
<li class="toctree-l1"><a class="reference internal" href="../github/index.html">github</a></li>
<li class="toctree-l1"><a class="reference internal" href="../Summary.html">摘要</a></li>
        </div>
      </div>
    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
      <nav class="wy-nav-top" aria-label="top navigation">
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../contents.html">feathers docs</a>
      </nav>
      <div class="wy-nav-content">
        <div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
  <ul class="wy-breadcrumbs">
      <li><a href="../contents.html">Docs</a> &raquo;</li>
          <li><a href="index.html">API</a> &raquo;</li>
      <li>Feathers 客户端</li>
      <li class="wy-breadcrumbs-aside">
            <a href="../_sources/api/client.rst.txt" rel="nofollow"> View page source</a>
      </li>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
  <div class="section" id="feathers-client">
<h1>Feathers 客户端<a class="headerlink" href="#feathers-client" title="永久链接至标题">¶</a></h1>
<p>Feathers最显着的特点之一是它也可以用作客户端. 与大多数其他框架相比, 它不是一个单独的库;相反, 您可以获得与客户端和服务器完全相同的功能. 这意味着您可以使用 <a class="reference internal" href="hooks.html"><span class="doc">钩子</span></a> 并配置插件. 默认情况下, Feathers客户端会自动创建与Feathers服务器通信的服务.</p>
<p>为了连接到Feathers服务器, 客户端创建 <a class="reference internal" href="services.html"><span class="doc">服务</span></a>, 它使用REST或websocket连接来中继方法调用, 并允许在服务器上监听 <a class="reference internal" href="events.html"><span class="doc">事件</span></a>. 这意味着 <a class="reference internal" href="#api-feathersjs-client"><span class="std std-ref">Feathers应用程序实例</span></a> 的使用方式与服务器上的完全相同.</p>
<p>与客户最相关的模块是:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">&#64;feathersjs/feathers</span></code> 初始化一个新的Feathers <a class="reference internal" href="application.html"><span class="doc">应用</span></a></p></li>
<li><p><a class="reference internal" href="client/rest.html"><span class="doc">REST客户端</span></a> 通过以下方式连接服务 <a class="reference internal" href="express.html"><span class="doc">Express</span></a>.</p></li>
<li><p><a class="reference internal" href="client/socketio.html"><span class="doc">Socket.io 客户端</span></a> 通过以下方式连接服务 <a class="reference internal" href="socketio.html"><span class="doc">Socket.io</span></a>.</p></li>
<li><p><a class="reference internal" href="client/primus.html"><span class="doc">Primus 客户端</span></a> 通过 <a class="reference internal" href="primus.html"><span class="doc">Primus</span></a> 连接服务.</p></li>
<li><p><a class="reference internal" href="authentication/client.html"><span class="doc">验证客户端</span></a> 来验证客户端</p></li>
<div class="admonition important">
<p class="admonition-title">重要</p>
<p>您不必在客户端上使用Feathers连接到Feathers服务器. 上面的客户端章节还描述了如何在客户端没有Feathers的情况下直接使用REST HTTP, Socket.io或Primus连接. 有关身份验证的详细信息, 请参阅 <a class="reference internal" href="authentication/client.html"><span class="doc">验证客户端</span></a>.</p>
<p>本章介绍如何使用Webpack或Browserify等模块加载器或通过 <code class="docutils literal notranslate"><span class="pre">&lt;script&gt;</span></code> 标签将Feathers设置为Node, React Native和浏览器中的客户端. 示例使用 <a class="reference internal" href="client/socketio.html"><span class="doc">Socket.io 客户端</span></a>. 有关其他连接方法, 请参阅上面链接的章节.</p>
<div class="admonition important">
<p class="admonition-title">重要</p>
<p>可以通过各个模块或者 <a class="reference internal" href="#api-feathersjs-client"><span class="std std-ref">&#64;feathersjs/client</span></a> 模块在客户端上使用Feathers.后者将上述所有模块组合成一个ES5转换版本.</p>
<div class="section" id="node">
<h2>Node<a class="headerlink" href="#node" title="永久链接至标题">¶</a></h2>
<p>要连接到NodeJS中的Feathers服务器, 请安装所需的客户端连接库(此处为 <code class="docutils literal notranslate"><span class="pre">socket.io-client</span></code>), 以及Feathers核心库和特定于连接的库:</p>
<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>npm install @feathersjs/feathers @feathersjs/socketio-client socket.io-client --save
</pre></div>
<p>然后像这样初始化:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kr">const</span> <span class="nx">io</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;socket.io-client&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">feathers</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;@feathersjs/feathers&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">socketio</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;@feathersjs/socketio-client&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">(</span><span class="s1">&#39;http://api.my-feathers-server.com&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">socketio</span><span class="p">(</span><span class="nx">socket</span><span class="p">));</span>
<span class="kr">const</span> <span class="nx">messageService</span> <span class="o">=</span> <span class="nx">client</span><span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;messages&#39;</span><span class="p">);</span>
<span class="nx">messageService</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;created&#39;</span><span class="p">,</span> <span class="nx">message</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Created a message&#39;</span><span class="p">,</span> <span class="nx">message</span><span class="p">));</span>
<span class="c1">// Use the messages service from the server</span>
<span class="nx">messageService</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span>
  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Message from client&#39;</span>
<span class="p">});</span>
</pre></div>
<div class="section" id="react-native">
<h2>React Native<a class="headerlink" href="#react-native" title="永久链接至标题">¶</a></h2>
<p>React Native用法与 <a class="reference external" href="#node">Node客户端</a> 相同. 将所需的软件包安装到您的 <a class="reference external" href="https://facebook.github.io/react-native/">React Native</a> 项目中.</p>
<div class="highlight-bash 
8000
notranslate"><div class="highlight"><pre><span></span>npm install @feathersjs/feathers @feathersjs/socketio-client socket.io-client
</pre></div>
<p>然后在主应用程序文件中:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kr">import</span> <span class="nx">io</span> <span class="nx">from</span> <span class="s1">&#39;socket.io-client&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">feathers</span> <span class="nx">from</span> <span class="s1">&#39;@feathersjs/feathers&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">socketio</span> <span class="nx">from</span> <span class="s1">&#39;@feathersjs/socketio-client&#39;</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">(</span><span class="s1">&#39;http://api.my-feathers-server.com&#39;</span><span class="p">,</span> <span class="p">{</span>
  <span class="nx">transports</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;websocket&#39;</span><span class="p">],</span>
  <span class="nx">forceNew</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">socketio</span><span class="p">(</span><span class="nx">socket</span><span class="p">));</span>
<span class="kr">const</span> <span class="nx">messageService</span> <span class="o">=</span> <span class="nx">client</span><span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;messages&#39;</span><span class="p">);</span>
<span class="nx">messageService</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;created&#39;</span><span class="p">,</span> <span class="nx">message</span> <span class="p">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Created a message&#39;</span><span class="p">,</span> <span class="nx">message</span><span class="p">));</span>
<span class="c1">// Use the messages service from the server</span>
<span class="nx">messageService</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span>
  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;Message from client&#39;</span>
<span class="p">});</span>
</pre></div>
<p>由于React Native for Android不能处理超过一分钟的超时, 可以考虑在服务器上为 <code class="docutils literal notranslate"><span class="pre">feathers-socketio</span></code> 设置 <code class="docutils literal notranslate"><span class="pre">pingInterval</span></code> 和 <code class="docutils literal notranslate"><span class="pre">pingTimeout</span></code> 的较低值. 这将停止与此 <a class="reference external" href="https://github.com/facebook/react-native/issues/12981">问题</a> 相关的警告. 例如:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
<span class="kr">const</span> <span class="nx">socketio</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;feathers-socketio&#39;</span><span class="p">);</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">socketio</span><span class="p">({</span>
  <span class="nx">pingInterval</span><span class="o">:</span> <span class="mi">10000</span><span class="p">,</span>
  <span class="nx">pingTimeout</span><span class="o">:</span> <span class="mi">50000</span>
<span class="p">}));</span>
</pre></div>
<div class="section" id="module-loaders">
<h2>模块加载器<a class="headerlink" href="#module-loaders" title="永久链接至标题">¶</a></h2>
<p><code class="docutils literal notranslate"><span class="pre">&#64;feathersjs</span></code> 命名空间中的所有模块都使用ES6. 必须将它们转换为支持不完全支持ES6的浏览器. 大多数客户端模块加载器都不会将 <code class="docutils literal notranslate"><span class="pre">node_modules</span></code> 文件夹排除在外, 并且必须配置为包含 <code class="docutils literal notranslate"><span class="pre">&#64;feathersjs</span></code> 命名空间和 <code class="docutils literal notranslate"><span class="pre">debug</span></code> 模块中的模块.</p>
<div class="section" id="webpack">
<span id="api-client-webpack"></span><h3>Webpack<a class="headerlink" href="#webpack" title="永久链接至标题">¶</a></h3>
<p>对于Webpack, 推荐的 <code class="docutils literal notranslate"><span class="pre">babel-loader</span></code> 规则通常会排除 <code class="docutils literal notranslate"><span class="pre">node_modules</span></code> 中的所有内容. 必须调整它以跳过 <code class="docutils literal notranslate"><span class="pre">node_modules/&#64;feathersjs</span></code> 和 <code class="docutils literal notranslate"><span class="pre">node_modules/debug</span></code>. 在你的 <code class="docutils literal notranslate"><span class="pre">webpack.config.js</span></code> 中的 <code class="docutils literal notranslate"><span class="pre">module</span></code> 中, 将 <code class="docutils literal notranslate"><span class="pre">babel-loader</span></code> 部分更新为:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="p">{</span>
  <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.jsx?$/</span><span class="p">,</span>
  <span class="nx">exclude</span><span class="o">:</span> <span class="sr">/node_modules(\/|\\)(?!(@feathersjs|debug))/</span><span class="p">,</span>
  <span class="nx">loader</span><span class="o">:</span> <span class="s1">&#39;babel-loader&#39;</span>
<span class="p">}</span>
</pre></div>
<div class="section" id="create-react-app">
<h3>create-react-app<a class="headerlink" href="#create-react-app" title="永久链接至标题">¶</a></h3>
<p><a class="reference external" href="https://github.com/facebookincubator/create-react-app">create-react-app</a> 使用 <a class="reference external" href="#webpack">Webpack</a> 但不允许修改配置, 除非你弹出. 如果您不想弹出, 请改用 <a class="reference external" href="https://github.com/feathersjs/client">&#64;feathersjs/client</a> 模块.</p>
<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>npm i --save @feathersjs/client
</pre></div>
<p>然后, 您可以从此包导入已转换的库:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kr">import</span> <span class="nx">feathers</span> <span class="nx">from</span> <span class="s2">&quot;@feathersjs/client&quot;</span><span class="p">;</span>
</pre></div>
<div class="section" id="browserify">
<h3>Browserify<a class="headerlink" href="#browserify" title="永久链接至标题">¶</a></h3>
<p>在Browserify中, 必须使用 <a class="reference external" href="https://github.com/babel/babelify">babelify</a> 转换器. 所有Feathers包都表明他们需要转换, 应该自动进行转换.</p>
<div class="section" id="others">
<h3>其他<a class="headerlink" href="#others" title="永久链接至标题">¶</a></h3>
<p>如上所述, 当使用任何使用转换器的模块加载器时, <code class="docutils literal notranslate"><span class="pre">node_modules/&#64;feathersjs</span></code> 及其所有子文件夹必须包含在ES6 +转换步骤中.对于非CommonJS格式(如AMD)和兼容ES5的Feathers及其客户端模块, 您可以使用 <a class="reference internal" href="#api-feathersjs-client"><span class="std std-ref">&#64;feathersjs/client 模块</span></a>.</p>
<div class="section" id="api-feathersjs-client">
<span id="id4"></span><h2>&#64;feathersjs/client<a class="headerlink" href="#api-feathersjs-client" title="永久链接至标题">¶</a></h2>
<p><a class="reference external" href="https://www.npmjs.com/package/&#64;feathersjs/client"><img alt="npm version" src="https://img.shields.io/npm/v/&#64;feathersjs/client.png?style=flat-square" /></a> <a class="reference external" href="https://github.com/feathersjs/client/blob/master/CHANGELOG.md"><img alt="Changelog" src="https://img.shields.io/badge/changelog-.md-blue.png?style=flat-square" /></a></p>
<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>$ npm install @feathersjs/client --save
</pre></div>
<p><code class="docutils literal notranslate"><span class="pre">&#64;feathersjs/client</span></code> 是一个模块, 它将单独的Feathers客户端模块捆绑成一个模块, 提供与现代浏览器(IE10 +)兼容的ES5代码. 它也可以通过 <code class="docutils literal notranslate"><span class="pre">&lt;script&gt;</span></code> 标签直接在浏览器中使用. 这是一个包含Feathers客户端模块的表:</p>
<table class="docutils align-default">
<col style="width: 59%" />
<col style="width: 41%" />
</colgroup>
<tr class="row-odd"><th class="head"><p>Feathers 模块</p></th>
<th class="head"><p>&#64;feathersjs/client</p></th>
<tr class="row-even"><td><p>&#64;feathersjs/feathers</p></td>
<td><p>feathers (default)</p></td>
<tr class="row-odd"><td><p>&#64;feathersjs/errors</p></td>
<td><p>feathers.errors</p></td>
<tr class="row-even"><td><p>&#64;feathersjs/rest-client</p></td>
<td><p>feathers.rest</p></td>
<tr class="row-odd"><td><p>&#64;feathersjs/socketio-client</p></td>
<td><p>feathers.socketio</p></td>
<tr class="row-even"><td><p>&#64;feathersjs/primus-client</p></td>
<td><p>feathers.primus</p></td>
<tr class="row-odd"><td><p>&#64;feathersjs/authentication-client</p></td>
<td><p>feathers.authentication</p></td>
<div class="admonition important">
<p class="admonition-title">重要</p>
<p>Feathers客户端库被转换为ES5并需要ES6填充程序通过 <a class="reference external" href="https://www.npmjs.com/package/babel-polyfill">babel-polyfill</a> 模块或包含 <a class="reference external" href="https://github.com/zloirock/core-js">core.js</a> 在较旧的浏览器中, 例如通过 <code class="docutils literal notranslate"><span class="pre">&lt;script</span> <span class="pre">type</span> <span class="pre">=</span> <span class="pre">\“text/javascript</span> <span class="pre">\”src</span> <span class="pre">=</span> <span class="pre">\“//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js\”&gt;&lt;/script&gt;</span></code></p>
<!-- --><div class="admonition important">
<p class="admonition-title">重要</p>
<p>当您加载&#64;feathersjs/client时, 您不必安装或加载上表中列出的任何其他模块.</p>
<div class="section" id="when-to-use">
<h3>何时使用<a class="headerlink" href="#when-to-use" title="永久链接至标题">¶</a></h3>
<p><code class="docutils literal notranslate"><span class="pre">feathersjs/client</span></code> 可以直接在浏览器中使用 <code class="docutils literal notranslate"><span class="pre">&lt;script&gt;</span></code> 标签而不使用模块加载器, 也可以使用不支持CommonJS的模块加载器(如RequireJS)或使用a创建的React应用程序默认 <code class="docutils literal notranslate"><span class="pre">create-react-app</span></code>.</p>
<p>如果您使用带有Node或React Native的Feathers客户端, 您应该遵循 <a class="reference external" href="#node">Node</a> 和 <a class="reference external" href="#react-native">React Native</a> 部分中描述的步骤, <strong>不要</strong> 使用 <code class="docutils literal notranslate"><span class="pre">&#64;feathersjs/client</span></code>.</p>
<div class="admonition note">
<p class="admonition-title">注解</p>
<p>所有Feathers客户端示例都显示了 <code class="docutils literal notranslate"><span class="pre">&#64;feathersjs/client</span></code> 的直接用法和用法.</p>
<div class="section" id="load-with-a-module-loader">
<h3>使用模块加载器加载<a class="headerlink" href="#load-with-a-module-loader" title="永久链接至标题">¶</a></h3>
<p>您可以将 <code class="docutils literal notranslate"><span class="pre">feathersss/client</span></code> 与其他浏览器模块加载器/捆绑器一起使用(而不是直接使用模块), 但它可能包含您可能不使用的包, 并导致稍大的包大小.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kr">import</span> <span class="nx">io</span> <span class="nx">from</span> <span class="s1">&#39;socket.io-client&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">feathers</span> <span class="nx">from</span> <span class="s1">&#39;@feathersjs/client&#39;</span><span class="p">;</span>
<span class="c1">// Socket.io is exposed as the `io` global.</span>
<span class="kr">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">(</span><span class="s1">&#39;http://localhost:3030&#39;</span><span class="p">);</span>
<span class="c1">// @feathersjs/client is exposed as the `feathers` global.</span>
<span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">feathers</span><span class="p">.</span><span class="nx">socketio</span><span class="p">(</span><span class="nx">socket</span><span class="p">));</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">feathers</span><span class="p">.</span><span class="nx">authentication</span><span class="p">());</span>
<span class="nx">app</span><span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;messages&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">({</span>
  <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;A new message&#39;</span>
<span class="p">});</span>
<span class="c1">// feathers.errors is an object with all of the custom error types.</span>
</pre></div>
<div class="section" id="load-from-cdn-with-script">
<h3>使用 <code class="docutils literal notranslate"><span class="pre">&lt;script&gt;</span></code> 从CDN加载<a class="headerlink" href="#load-from-cdn-with-script" title="永久链接至标题">¶</a></h3>
<p>下面是一个脚本示例, 用于从 <a class="reference external" href="https://unpkg.com">unpkg.com</a> 加载 <code class="docutils literal notranslate"><span class="pre">&#64;feathersjs/client</span></code>.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//unpkg.com/@feathersjs/client@^3.0.0/dist/feathers.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//unpkg.com/socket.io-client@1.7.3/dist/socket.io.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="c1">// Socket.io is exposed as the `io` global.</span>
  <span class="kd">var</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">(</span><span class="s1">&#39;http://localhost:3030&#39;</span><span class="p">);</span>
  <span class="c1">// @feathersjs/client is exposed as the `feathers` global.</span>
  <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">feathers</span><span class="p">.</span><span class="nx">socketio</span><span class="p">(</span><span class="nx">socket</span><span class="p">));</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">feathers</span><span class="p">.</span><span class="nx">authentication</span><span class="p">());</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;messages&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">({</span>
    <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;A new message&#39;</span>
  <span class="p">});</span>
  <span class="c1">// feathers.errors is an object with all of the custom error types.</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>
<div class="section" id="requirejs">
<h3>RequireJS<a class="headerlink" href="#requirejs" title="永久链接至标题">¶</a></h3>
<p>以下是使用RequireJS语法加载feathers-client的方法:</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="nx">define</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">require</span><span class="p">)</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">feathers</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;@feathersjs/client&#39;</span><span class="p">);</span>
  <span class="kr">const</span> <span class="nx">io</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;socket.io-client&#39;</span><span class="p">);</span>
  <span class="kr">const</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">(</span><span class="s1">&#39;http://localhost:3030&#39;</span><span class="p">);</span>
  <span class="c1">// @feathersjs/client is exposed as the `feathers` global.</span>
  <span class="kr">const</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">feathers</span><span class="p">();</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</
6FBA
span><span class="nx">feathers</span><span class="p">.</span><span class="nx">socketio</span><span class="p">(</span><span class="nx">socket</span><span class="p">));</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">configure</span><span class="p">(</span><span class="nx">feathers</span><span class="p">.</span><span class="nx">authentication</span><span class="p">());</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">service</span><span class="p">(</span><span class="s1">&#39;messages&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">({</span>
    <span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;A new message&#39;</span>
  <span class="p">});</span>
  <span class="k">return</span> <span class="kr">const</span><span class="p">;</span>
<span class="p">});</span>
</pre></div>
           </div>
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="client/rest.html" class="btn btn-neutral float-right" title="REST客户端" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
        <a href="primus.html" class="btn btn-neutral float-left" title="Primus" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
  <div role="contentinfo">
        &copy; Copyright 2019, BandCap
  Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. 
        </div>
      </div>
    </section>
  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
  </script>
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

client.html

Latest commit

History

client.html

File metadata and controls
