react-rethinkdb, 在反应中,渲染实时RethinkDB结果

分享于 

10分钟阅读

GitHub

  繁體 雙語
Render realtime RethinkDB results in React
  • 源代码名称:react-rethinkdb
  • 源代码网址:http://www.github.com/mikemintz/react-rethinkdb
  • react-rethinkdb源代码文档
  • react-rethinkdb源代码下载
  • Git URL:
    git://www.github.com/mikemintz/react-rethinkdb.git
    Git Clone代码到本地:
    git clone http://www.github.com/mikemintz/react-rethinkdb
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mikemintz/react-rethinkdb
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    npm versionTravis

    响应 rethinkdb

    渲染实时RethinkDB导致响应

    开始

    要立即开始,请遵循项目,或者克隆中的某些其他项目。

    这是什么?

    库提供了一个响应,用于在任何响应组件中直接从浏览器运行RethinkDB查询。 它包装了 连接数据库,并用于在后台运行的 rethinkdb-websocket-server插件。

    这类似于 Meteor解析插件和Firebase之类的解决方案。 这些解决方案允许前端使用后端服务访问的数据层直接访问数据层( 由权限系统保护),而不是在后端编写数据库查询。

    支持数据库实时开放源代码
    响应 rethinkdb。RethinkDB
    MeteorReact流星React包。
    解析ParseReact
    FirebaseReactFire

    什么是React?

    是一个用于构建用户界面的JavaScript库。 很酷。

    这里库仅适用于按设计React。 如果你对从浏览器连接到RethinkDB感兴趣,没有React,你可以使用 rethinkdb-websocket-client命令。

    什么是 RethinkDB?

    RethinkDB 是一个开源 NoSQL 数据库,具有实时功能。 它非常流行,它是GitHub上第二个最受欢迎的数据库。

    是安全的?

    尽管直接从前端运行数据库查询似乎不安全,但是在将查询转发到RethinkDB之前,所有查询都应该通过 rethinkdb-websocket-server 验证。 从它的自述文件中:

    在开发时,不针对白名单验证的传入查询将以你可以直接复制并粘贴到JavaScript源文件中的格式登录到控制台。 对于动态查询,你可能希望使用 RP.check() 术语。RP.ref() 术语和 .validate() 方法来泛化 Pattern。

    有关后台有用户身份验证和查询验证的示例应用程序,请参阅 examples/chat/ 插件。

    大多数查询验证逻辑都可以在 QueryValidator.js 中找到。

    如何使用这里选项?

    在这里知识库中查看 examples/ 文件夹以实现完全工作的响应。 如果你还没有安装 RethinkDB,则需要安装版本 2.2或者更高版本。

    项目has深入说明了如何从头创建一个简单的应用。

    你还可以查看 src/ 目录中源代码中的注释:

    下面是一个非常简单的响应应用程序,可以给出语法的概念:

    var React =require('react');var ReactDOM =require('react-dom');var ReactRethinkdb =require('react-rethinkdb');var r =ReactRethinkdb.r;ReactRethinkdb.DefaultSession.connect({
     host:'localhost', // hostname of the websocket server port:8015, // port number of the websocket server path:'/', // HTTP path to websocket route secure:false, // set true to use secure TLS websockets db:'test', // default database, passed to rethinkdb.connect autoReconnectDelayMs:2000, // when disconnected, millis to wait before reconnect});var App =React.createClass({
     mixins: [ReactRethinkdb.DefaultMixin],
     observe:function(props, state) {
     return {
     turtles:newReactRethinkdb.QueryRequest({
     query:r.table('turtles'), // RethinkDB query changes:true, // subscribe to realtime changefeed initial: [], // return [] while loading }),
     };
     },
     handleSubmit:function(event) {
     event.preventDefault();
     var nameInput =this.refs.firstName;
     var query =r.table('turtles').insert({firstName:nameInput.value});
     nameInput.value='';
     ReactRethinkdb.DefaultSession.runQuery(query);
     },
     render:function() {
     var turtleDivs =this.data.turtles.value().map(function(x) {
     return<div key={x.id}>{x.firstName}</div>;
     });
     return<div><form onSubmit={this.handleSubmit}><input type="text" ref="firstName"/><input type="submit"/></form> {turtleDivs}
     </div>;
     },
    });ReactDOM.render(<App />, document.getElementById('app'));

    特性

    • 支持 RethinkDB changefeed支持的实时查询
    • 在响应组件之间共享相同查询的结果

    限制

    兼容性

    目前,这里库已经在以下环境中成功测试:

    • Chrome 43 ( Linux )
    • Chrome 43 ( Android 5.0 )
    • Chrome 43 ( Android 4.4 )
    • Chrome 44 ( OS X 10.10 )
    • Firefox 38 ( Linux )
    • Safari 7.1 ( OS X 10.9 )
    • Safari 8.0 ( OS X 10.10 )
    • Safari 8.0 ( iOS 8.1 )
    • IE11 ( Win 7 )
    • IE10 ( Win 7 )
    • Node.js 0.12 ( Linux )

    在IE10中,查询必须使用 r.bracket 而不是函数调用 shorthand。 比如 r.table('turtles').get(id)("name") 必须写成 r.table('turtles').get(id).bracket("name") 有关详细信息,请参阅 rethinkdb#162

    由于没有 web sockets插件,而且rethinkdb-websocket-client插件目前需要 web socket支持,所以不支持IE9和旧的android浏览器。

    升级指南

    响应rethinkdb的大多数新版本都与以前版本向后兼容。 below 是具有重大更改的异常:

    升级到 0.5 ( 从 0.4 )

    React RethinkDB 版本 0.5引入了原子changefeeds插件,这是RethinkDB 2.2的新特性。 这通过发送一个"原子"changefeed查询而不是 static 查询来简化逻辑,跟随实时更新的changefeed查询。 这节省带宽,并防止在两个查询之间发生数据更改的争用条件。

    常规 static 查询将继续工作。 但是,为了将响应 rethinkdb 0.5与changefeed查询一起使用,必须同时执行以下操作:

    • 升级到你的后端的RethinkDB 2.2.
    • include_initial=true 选项添加到rethinkdb-websocket-server查询白名单中的所有changefeed查询。 below 是一个示例:
    r.table("tortoises")
    . changes({
     includeStates:true,
     includeInitial:true, // this line is now required })
    . opt("db", r.db("test")),

    或者使用旧语法:

    RQ(
     RQ.CHANGES(
     RQ.TABLE("tortoises")
     ).opt("include_states", true)
    . opt("include_initial", true) // this line is now required).opt("db", RQ.DB("test")),

    路线图

    • 调查性能我还没有对大型查询,大量查询或者大型结果集进行测试。
    • 当在响应中建立数据加载最佳实践时,更改 mixin API。
    • 支持响应组件以ES6类的形式写入。
    • 响应本机实时支持( 目前完全未测试)
    • 同构应用支持( 目前不完整)
      • 除非我们要求浏览器重新运行查询,否则对于带有changefeeds的查询来说这可能很棘手。 但是我们可能会有额外的负载闪烁
      • 要在 node.js ( 与浏览器相对应) 中使用服务器,请在导入模块时使用以下路径: var ReactRethinkdb = require('react-rethinkdb/dist/node');
      • 请参阅 examples/isomorphic/ 目录,例如用法
    • 查询结果缓存
      • 如果挂载了一个查询的组件,并且一个组件以相同的精确查询挂载,第二个组件可以显示缓存结果。
      • 如果某个组件不取消查询,那么我们只是关闭查询,但在另一个组件订阅时保留该查询的状态,以防止查询失败。 在关闭查询之前,我们甚至可以设置一个计时器,以便为组件快速重新订阅。
      • 组件可以指定是否使用陈旧的结果,或者是否需要刷新。
      • 我们需要一个失效策略,这样我们就不会泄露内存。
    • 乐观更新( 相当于 Meteor 补偿的延迟)