有个新型的数据库”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
源代码