RxJS入门（8）----创建一个完整的web application

上接（7）

Getting Real-Time Updates from Twitter

• 我们计划的的第二部分是做一个实时的仪表给地震，添加从Twitter相关的地球上正在发生的不同地震报告和信息。为了实现这个，我们需要创建一个小的Node.js程序，它获取tweets相关的地震的流。
• Setting Up Our Node.js Environment
• 配置我们的Node.js程序。包括RxJS，我们将会使用两个比较重要的第三方modules使我们的编程会更容易：ws和twit。其他任何相似的modules应该对代码的改动最小。
• 首先，为我们的程序创建一个目录，并install那些modules（我们将要使用的）。（注意npm命令的输出，依赖当前版本和包）
  
• Client–Server Communication
• 现在我们已经准备开搭建我们的程序了。让我们创建一个名叫index.js的新文件，在它里面， tweet_stream这个文件夹就是用来加载我们将用使用的modules：

var WebSocketServer = require('ws').Server;
var Twit = require('twit');
var Rx = require('rx');

var T = new Twit({
consumer_key: 'rFhfB5hFlth0BHC7iqQkEtTyw',
consumer_secret: 'zcrXEM1jiOdKyiFFlGYFAOo43Hsz383i0cdHYYWqBXTBoVAr1x',
access_token: '14343133-nlxZbtLuTEwgAlaLsmfrr3D4QAoiV2fa6xXUVEwW9',
access_token_secret: '57Dr99wECljyyQ9tViJWz0H3obNG3V4cr5Lix9sQBXju1'
});

• 现在我们可以创建一个函数，onConnect，它将会做所有的搜素tweets和与client交互的工作。我们可以调用onConnect初始化一个WebSocket server一旦这个WebSocket连接和准备好了：

function onConnect(ws) {
console.log('Client connected on localhost:8080');
}
var Server = new WebSocketServer({ port: 8080 });
Rx.Observable.fromEvent(Server, 'connection').subscribe(onConnect);

• 我们可以登录我们的应用程序了，以WebSocket的8080端口开始：
  
• 这个关于client连接的消息不会被打印，是因为我们让任何的浏览器连接到这个服务器上。让我们调整我们的仪表代码，我们将会使用RxJS-DOM的fromWebSocket操作符：

function initialize() {
var socket = Rx.DOM.fromWebSocket('ws://127.0.0.1:8080');
...

• 上面的处理代码中，fromWebSocket创建了一个Subject，它作为一个接受和发送消息到WebSocket server的服务提供者，通过订阅socket，我们将受到服务器发给我们的任何消息。
• 现在可以发送我们接收的服务器发送的地震消息了：

quakes.bufferWithCount(100)
.subscribe(function(quakes) {
console.log(quakes);
var quakesData = quakes.map(function(quake) {
return {
id: quake.properties.net + quake.properties.code,
lat: quake.geometry.coordinates[1],
lng: quake.geometry.coordinates[0],
mag: quake.properties.mag
};
});
➤ socket.onNext(JSON.stringify({quakes: quakesData }));
});

• 我们也创建一个来自服务器消息的订阅者：

socket.subscribe(function(message) {
console.log(JSON.parse(message.data));
});

• 现在我们重新加载浏览器，这个client消息将会在terminal上出现的：
  

• 古怪的！这个浏览器可以发送命令到服务器当它开始接收远程的JSONP资源的地震。到目前为止，这个server完全忽略了这些消息。回到我们的tweet流的代码并做些什么。

• 首先，我们将从browser client上连到那个message事件，它到达服务器。无论何时，client发送了一条消息，这个WebSocket服务器将会发射一个message事件连接到这个消息。这种情况下，这个内容是分层的对象。
• 在onConnect函数里我么写如下代码：

var onMessage = Rx.Observable.fromEvent(ws, 'message')
.subscribe(function(quake) {
quake = JSON.parse(quake);
console.log(quake);
});

• 如果我们重启服务器（在terminal中ctrl-c）并重载浏览器，我们可以看到地震的详请，这些它们进来的将会子啊terminal上打印。这样很好，我们现在可以搜索跟tweets相关的地震了。
• Retrieving and Sending Tweets
• 我们正在使用基于Node.js twit流的Twitter客户端去连接Twitter和搜索tweets。从现在开始所有的代码将会在onConnect函数的内部起作用，是由于它假设一个到WebSocket的连接已经建立了。现在让我们初始化tweets的流：

var stream = T.stream('statuses/filter', {
track: 'earthquake',
locations: []
});

• 这告诉我们Twit实例T开会Twitter的statues的流，以地震的keyword来过滤。当然，这是普通和不直接和现在正发生的地震相关的。注意到空的locations数组。它是经纬度的数组，通过earthquake这个词，利用它们的地理位置过滤tweets。
  这很特别！让我们订阅到这个stream并开始发送tweets到浏览器：

Rx.Observable.fromEvent(stream, 'tweet').subscribe(function(tweetObject) {
ws.send(JSON.stringify(tweetObject), function(err) {
if (err) {
console.log('There was an error sending the message');
}
});
});

• 如果我们重启服务器并重新加载浏览器，我们在浏览器上收到tweets，并在在开发者的布局的控制上打印这些推特。
• 这些推特没有通过地震位置俩过滤。为了实现这项，我们需要对收到的每条地震消息作如下处理：
• 取得每个地震中心的经纬度并创建一个限制盒子，它限定了我们认为和地震相关的推特的地理位置。
• 累积所有的坐标盒子，以便推特发送到client上并在地图上描述素有相关的地震。
• 每当我们收新地震的消息，使用新做包更新twit流。
• 如下便是：

Rx.Observable
.fromEvent(ws, 'message')
.flatMap(function(quakesObj){
quakesObj = JSON.parse(quakesObj);
return Rx.Observable.from(quakesObj.quakes);
})
❶ .scan([], function(boundsArray, quake) {
❷ var bounds = [
quake.lng - 0.3, quake.lat - 0.15,
quake.lng + 0.3, quake.lat + 0.15
].map(function(coordinate) {
coordinate = coordinate.toString();
return coordinate.match(/\-?\d+(\.\-?\d{2})?/)[0];
});
boundsArray.concat(bounds);
❸ return boundsArray.slice(Math.max(boundsArray.length - 50, 0));
})
❹ .subscribe(function(boundsArray) {
stream.stop();
stream.params.locations = boundsArray.toString();
stream.start();
});

• 这里上面代码一步步的发生的：
• 1：我们又要使用scan了。每次我们需要累加结果并立即产生新的值，scan就是我们的朋友。这种情况下，我们将会在boundsArray数组中一直保存地震的坐标。
• 2：从单个的地震中心的坐标的经纬度中，我们创建一个包含西北、东南坐标的的区域的数组。这些大致的界限创建了一个大型城市的矩形框。之后，我们使用了一个规律的表达式来限制每个坐标两位小数的精度，来遵循Twitter API的规范。
• 3：我们连接产生的边界到boundsArray，它包含之前的每个地震边界。之后，我们取最近的25对边界（这个数组里面有50项），这是TwitterAPI的限制。
• 4：自后，我们订阅到Observable，在onNext函数中，我们重启当前的twit流来重载更新位置，并通过我们新累存的位置数组来过滤，转化为字符串。
• 在重启服务器和重新加载浏览器后，我们可以在我们的浏览器程序中收到相关的推特。到目前为值，我们可仅能在开发者控制台看到原始的数据对象。下一部分，我们将通过HTML来在我们的仪表上展示tweets。
• Showing Tweets on the Dashboard
• 现在我们冲服务器收到tweets，仅仅遗留需要完成的是把它们在屏幕上显示。我们将创建一个新的HTML元素在我们追加新来的tweets的地方。

<div id="tweet_container"></div>

我们将会跟新我们的socket Observable订阅俩处理新的tweet对象并追加它们到刚创建的tweet_container元素上。

socket
.map(function(message) { return JSON.parse(message.data); })
.subscribe(function(data) {
var container = document.getElementById('tweet_container');
container.insertBefore(makeTweetElement(data), container.firstChild);
});

• 任何新的tweets将会出现在列表的最顶上，它们将会被makeTweetElement创建，一个创建tweet元素的简单函数，并把我们传递的数据地位到上面：

function makeTweetElement(tweetObj) {
var tweetEl = document.createElement('div');
tweetEl.className = 'tweet';
var content = '<img src="$tweetImg" class="avatar" />' +
'<div class="content">$text</div>' +
'<div class="time">$time</div>';
var time = new Date(tweetObj.created_at);
var timeText = time.toLocaleDateString() + ' ' + time.toLocaleTimeString();
content = content.replace('$tweetImg', tweetObj.user.profile_image_url);
content = content.replace('$text', tweetObj.text);
content = content.replace('$time', timeText);
tweetEl.innerHTML = content;
return tweetEl;
}

• 最后，我们使用一个有关的工具栏，定位能给我们更多关于地震的区域结果的信息的tweets。

Ideas for Improvements

• 这个仪表已经起作用了，但是还有许多提高可以做。如下是一些更好的建议：
• 添加更多的地震数据，USGS是一个很好的资源，但是它主要提供发生在美国的。汇聚全世界的地震将会更加有趣，而不仅仅是美国，并把它们在地图上显示出来。这样，你需要使用merge和mergeAll来帮忙了，并使用distinct这个选择函数来去重。
• 无论何时用户点击了tweet，在地图上圈出相关的地震。这将会包含对服务器地震tweet的归类，你将有可能使用groupBy操作符来归类tweets到一个特定的地理区域。