用rethinkDB，horizon，vue搭建實時應用

時間 2020-06-22

標籤 rethinkdb horizon vue 搭建實時應用简体版

原文原文鏈接

有個新型的數據庫"rethinkDB",支持watch操做，用來作即時應用再好不過了，雖然官方支持的公司是倒閉了，好在這個是個開源項目，用來作下我的項目仍是沒問題的。html

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 數據庫安裝

在官方網站上有，直接下載安裝就行了，此次是第一次使用，所有默認配置就行了，方便查文檔。vue

2 應用的搭建

horizon 是rethink官方推出的對rethinkDB的上層封裝，封裝進了socket，和rxjs。node

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

目錄結構

├── 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註冊的操做。webpack

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 operatorsgit

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 代碼

這樣的服務結構搭建好後，至關於全部的業務操做就都寫到了前端代碼裏面。github

鏈接後端

## 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連接，這樣就保證了數據的實時性。web

# 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>