Horizon
之前的文章我们介绍了Horizon，无需编写后端代码，就能构建实时应用，今天我们继续我们的地平线之旅！
安装RethinkDB
使用Horizon首先需要安装RethinkDB，并且版本在2.3.1之上，这里我们以OSX为例使用homebrew安装：
brew update
brew install rethinkdb
如果之前安装过老版本的rethinkdb，可以使用brew upgrade rethinkdb来更新。目前最新版本为2.3.3。
安装Horizon CLI
首先我们安装Horizon CLI，它提供了hz命令：
npm install -g horizon
这里我们用到Horizon的命令行工具提供的两个指令：
-
init [directory]: 初始化一个Horizon应用 -
serve: 运行服务端
创建Horizon项目
$ hz init example_app
Created new project directory example_app
Created example_app/src directory
Created example_app/dist directory
Created example_app/dist/index.html example
Created example_app/.hz directory
Created example_app/.hz/config.toml
我们看一下项目结构：
$ tree example_app
example_app/
├── .hz
│ └── config.toml
├── dist
│ └── index.html
└── src
-
dist里面是静态文件。 -
src使你构建系统的源文件。 -
dist/index.html是示例文件。 -
.hz/config.toml是一个toml配置文件。
启动Horizon服务器
我们可以使用hz serve --dev来启动服务器。
App available at http://127.0.0.1:8181
RethinkDB
├── Admin interface: http://localhost:52936
└── Drivers can connect to port 52935
Starting Horizon...
可以看到，增加了--dev后，不仅启动了服务器，还有RethinkDB的数据库，我们可以通过不同的端口来访问后台。
RethinkDB 后台
--dev这个标签代表了下面这些设置：
- 自动运行RethinkDB (
--start-rethinkdb) - 以非安全模式运行，不要求SSL/TLS (
--secure no) - 关闭了权限系统 (--permissions no)
- 表和索引如果不存在被自动创建 (
--auto-create-collection
and--auto-create-index) - 静态文件将在
dist文件夹被serve (--serve-static ./dist)
如果不使用--dev标签，在生产环境里，你需要使用配置文件.hz/config.toml来设置这些参数。
连接Horizon
我们来看一下index.html：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="/horizon/horizon.js"></script>
<script>
var horizon = Horizon();
horizon.onReady(function() {
document.querySelector('h1').innerHTML = 'App works!'
});
horizon.connect();
</script>
</head>
<body>
<marquee><h1></h1></marquee>
</body>
</html>
var horizon = Horizon()初始化了Horizon对象，它只有一些方法，包括连接相关的事件和实例化Horizon的集合。
onReady是一个事件处理器，它再客户端成功连接到服务端的时候被执行。我们的连接仅仅在<h1>标签中添加了"App works!"。它只是检测了Horizon是否工作，还并没有用到RethinkDB。
Example App
Horizon集合
Horizon的核心是集合（Collection对象），使你能够获取、存储和筛选文档记录。许多集合方法读写文档返回的是RxJS Observables。关于Rx的一些基本只是可以看RXJS 介绍
// 创建一个"messages"集合
const chat = horizon("messages");
使用store方法存储
let message = {
text: "What a beautiful horizon!",
datetime: new Date(),
author: "@dalanmiller"
}
chat.store(message);
使用fetch方法读取
chat.fetch().subscribe(
(items) => {
items.forEach((item) => {
// Each result from the chat collection
// will pass through this function
console.log(item);
})
},
// If an error occurs, this function
// will execute with the `err` message
(err) => {
console.log(err);
})
这里使用了RxJS的subscribe方法来获取集合中的条目，并且提供了一个错误处理器。
删除数据
删除集合中的条目，我们可以使用remove或removeAll
// These two queries are equivalent and will remove the document with id: 1
chat.remove(1).subscribe((id) => { console.log(id) })
chat.remove({id: 1}).subscribe((id) => {console.log(id)})
// Will remove documents with ids 1, 2, and 3 from the collection
chat.removeAll([1, 2, 3])
你可以级联subscribe函数到remove函数后面，来获取响应和错误处理器。
观察变化
我们可以使用watch来监听整个集合、查询或者单个条目。这让我们能够随着数据库数据的变化立即变更应用状态。
// Watch all documents. If any of them change, call the handler function.
chat.watch().subscribe((docs) => { console.log(docs) })
// Query all documents and sort them in ascending order by datetime,
// then if any of them change, the handler function is called.
chat.order("datetime").watch().subscribe((docs) => { console.log(docs) })
// Watch a single document in the collection.
chat.find({author: "@dalanmiller"}).watch().subscribe((doc) => { console.log(doc) })
默认情况下，watch返回的Observable会接收整个文档集合当有一个条目发生变化。这使得Vue或React这类框架很容易集成，它允许你使用Horizon新返回的数组替换现有的集合拷贝。
我们来看一下示例：
let chats = [];
// Query chats with `.order`, which by default is in ascending order
chat.order("datetime").watch().subscribe(
// Returns the entire array
(newChats) => {
// Here we replace the old value of `chats` with the new
// array. Frameworks such as React will re-render based
// on the new values inserted into the array.
chats = newChats;
},
(err) => {
console.log(err);
})
更多Horizon+React示例可以参见complete Horizon & React example。
结合所有
现在我们结合上述知识点，构建一个聊天应用，消息以倒序呈现：
let chats = [];
// Retrieve all messages from the server
const retrieveMessages = () => {
chat.order('datetime')
// fetch all results as an array
.fetch()
// Retrieval successful, update our model
.subscribe((newChats) => {
chats = chats.concat(newChats);
},
// Error handler
error => console.log(error),
// onCompleted handler
() => console.log('All results received!')
)
};
// Retrieve an single item by id
const retrieveMessage = id => {
chat.find(id).fetch()
// Retrieval successful
.subscribe(result => {
chats.push(result);
},
// Error occurred
error => console.log(error))
};
// Store new item
const storeMessage = (message) => {
chat.store(message)
.subscribe(
// Returns id of saved objects
result => console.log(result),
// Returns server error message
error => console.log(error)
)
};
// Replace item that has equal `id` field
// or insert if it doesn't exist.
const updateMessage = message => {
chat.replace(message);
};
// Remove item from collection
const deleteMessage = message => {
chat.remove(message);
};
chat.watch().subscribe(chats => {
renderChats(allChats)
},
// When error occurs on server
error => console.log(error),
)
你也可以获取客户端与服务端是否连接的通知：
// Triggers when client successfully connects to server
horizon.onReady().subscribe(() => console.log("Connected to Horizon server"))
// Triggers when disconnected from server
horizon.onDisconnected().subscribe(() => console.log("Disconnected from Horizon server"))
在这里，你编写了一个实时聊天应用，而且不用书写一行后端代码。
Horizon与现有应用结合
Horizon有两种方式与现有应用结合：
- 使用Horizon服务器提供的
horizon.js - 添加
@horizon/client的依赖
这里推荐的是第一种做法，因为它将预防任何潜在的client和Horizon server的版本冲突。当然，如果你使用Webpack或其他相似的构建工具，可以将client库作为NPM依赖(npm install @horizon/client
)。
<script src="localhost:8181/horizon/horizon.js"></script>
// Specify the host property for initializing the Horizon connection
const horizon = Horizon({host: 'localhost:8181'});
参考
[1] http://www.jianshu.com/p/8406baeb01c5
[2] http://horizon.io/docs/getting-started/
网友评论