用rethinkDB，horizon，vue搭建实时应用

有个新型的数据库"rethinkDB",支持watch操做，用来作即时应用再好不过了，虽然官方支持的公司是倒闭了，好在这个是个开源项目，用来作下我的项目仍是没问题的。

The open-source database for the realtime web. http://rethinkdb.com

What is RethinkDB?

Open-source database for building realtime web applications
NoSQL database that stores schemaless JSON documents
Distributed database that is easy to scale
High availability database with automatic failover and robust fault tolerance

1 数据库安装

在官方网站上有，直接下载安装就行了，此次是第一次使用，所有默认配置就行了，方便查文档。

2 应用的搭建

• horizon 是rethink官方推出的对rethinkDB的上层封装，封装进了socket，和rxjs。

Horizon is a realtime, open-source backend for JavaScript apps. https://horizon.io

目录结构

├── client
    ├── index.html
    └── src
        ├── app.js
        ├── app.vue
        ├── components
        ├── statics
        └── store.js

├── config
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── server
    └── main.js

└── webpack.config.js

server 代码

horizon和express搭建这个后端代码就很简单了。这样前端页面直接用@horizon/client 连接到这个8181的服务，就能够用horizon提供的api来进行数据的各类增删改查操做了。最重要的是下面提供的那个watch的api,当数据库有数据更新时都会去触发这个watch注册的操做。

Collection.fetch
Collection.subscribe
Collection.watch
Collection.above
Collection.below
Collection.find
Collection.findAll
Collection.limit
Collection.order
Collection.remove
Collection.removeAll
Collection.insert
Collection.replace
Collection.store
Collection.update
Collection.upsert
Aggregates and models
RxJS Observable methods and operators

const express = require('express');
const horizon = require('@horizon/server');

const app = express();
const http_server = app.listen(8181);
const options = { auth: { token_secret: 'my_super_secret_secret' } };
const horizon_server = horizon(http_server, options);

console.log('Listening on port 8181.');

client 代码

这样的服务结构搭建好后，至关于全部的业务操做就都写到了前端代码里面。

链接后端

## client\src\store.js
import Horizon from "@horizon/client"; 
const horizon = new Horizon(); //都是默认连接127.0.0.1:8181
horizon.connect();
var messages = horizon("messages"); //这个是定义了一个collection结合，对应的就是messages这张表
var messageStorage = {
    add: function(msg){
        return messages.store(msg);
    },
    change: function(){
        return messages.watch();
    }
}
export {messageStorage}

重要的先后端连接就连接好了，转译代码到app.js，index.html引入这个js文件，打开控制台若是查看network里面的ws分类，若是连接成功的话，这里会有socket连接的信息。horizon的操做都是走的socket连接，这样就保证了数据的实时性。

# client\src\components\message.vue
<script>
import {messagesStorage} from "../store";
export default {
    data: function(){
        return {
            msgs: []//聊天信息列表
        }
    },
    methods: {
        watchMessages: function(){
        //watch数据变动
            messagesStorage.change().subscribe(res => {
                this.msgs = res;
            })
        }
    }，
    created:function(){
        this.watchMessages()
    }
}
</script>
<template>
<div class="messages">
    <ul v-for="msg in msgs">{{msg.text}}</ul>
</div>
</template>

# client\src\components\text.vue
<script>
import {messagesStorage} from "../store";

export default {
    data: function(){
        return {
             newMessage: ""
        }
    },
    methods: {
       onSend: function(){
           if (!this.newMessage){
               return false;
           }
           messagesStorage.add(this.newMessage);
           this.newMessage = ""
       }
    }

}
</script>
<template>
<div>
<textarea @keyup.enter.prevent="onSend" v-model="newMessage" placeholder="Press enter send a message"></textarea>
</div>
</template>

3 未完

此次是第一次尝试从前端到后端到数据库的操做，本身把控的感受太爽了，但还有不少逻辑还有待优化，用户模块，验证等功能还未作，只是实现 了简单的聊天内容同步。
vue代码写代码来确实比react好理解多了。

在线demo
源代码