使用 Pubnub 的流控制器和 CSS3 动画可视化推文
概括
本教程将向您展示如何通过构建 Web 应用程序来实时可视化带有特定主题标签的推文，从而将频道组与 PubNub 的 Stream Controller API 结合使用。
这是我们将要使用的堆栈：
- Node.js作为服务器端语言，
- Express是一个 Web 框架，
- Handlebars作为模板库，
- Twitter Streaming API可实时获取推文，
- PubNub 的 Stream Controller带有频道组来控制要显示的推文，
- jQuery用于客户端交互，以及
- CSS3 动画使推文可视化。
该应用程序将跟踪带有以下主题标签的推文（这些是可配置的）：
- ＃消息
- ＃家庭
- ＃引用
- ＃爱
- ＃今天
- ＃编程
每个主题标签都有自己的 PubNub 频道（推文将在此发布）。所有频道都属于一个频道组。
客户端将监听此频道组上的消息，以将推文呈现为不同颜色的脉动圆圈（每个主题标签都有自己的颜色）：
还有一个管理页面，可以通过向 PubNub 频道组添加或删除频道来打开/关闭每个主题标签：
管理页面上所做的更改会实时反映在客户端上：
为了简单起见，管理页面（及其服务器端路由）将不实现身份验证。
整个源代码可以在 Github 上找到。
要求
叽叽喳喳
登录你的 Twitter 账号，前往 https://dev.twitter.com/apps/new 创建一个新应用程序。
在创建申请之前，您必须将您的手机号码添加到 Twitter 个人资料中。请阅读 https://support.twitter.com/articles/110250-adding-your-mobile-number-to-your-account-via-web 了解更多信息。
您必须输入以下内容：
- 名称（您的应用程序名称，例如sample_eh3rrera）
- 描述（您的应用程序描述）
- 网站（您的应用程序的公开可访问主页。我们不会使用它，因此您只需输入https://127.0.0.1）。
在您同意Twitter的开发者协议后，您的应用程序将被创建：
现在转到密钥和访问令牌部分，然后单击创建我的访问令牌来创建访问令牌：
保存您的消费者密钥、消费者机密、访问令牌和访问令牌机密，因为我们稍后会需要它。
PubNub
前往 https://admin.pubnub.com/#/register 并注册一个新帐户。登录后，您将看到以下屏幕：
您可以创建新应用，也可以使用已创建的演示应用。单击此应用时，您将看到以下内容：
保存您的发布和订阅密钥，因为我们稍后会需要它。现在单击密钥集面板并转到应用程序附加组件部分以启用Stream Controller附加组件并保存更改：
Node.js
我们需要安装最新版本的Node.js。
现在让我们开始吧。
创建应用程序结构
创建一个新目录并进入该目录：
mkdir visual-tweets && cd visual-tweets
现在创建一个package.json文件，可以使用以下方式：
npm init
或者接受默认值：
npm init -y
我们将使用下一个依赖项（及其撰写本文时的最新版本）：
- twit，版本 2.2.4（使用 Twitter Stream API）
- pubnub，版本 4.0.6（使用 PubNub API）
- express，版本 4.14.0（作为 Web 框架）
- express-handlebars，版本 3.0.0（作为模板库）
使用以下命令添加它们：
npm install --save twit pubnub express express-handlebars
该项目将具有以下目录结构：
|— public
| |— css
| | |— admin.css
| | |— hashtags.css
| | |— style.css
| | |— switch.css
| |— js
| | |— admin.js
| | |— index.js
|— routes
| | |— admin.js
| | |— index.js
|— views
| | |— admin.hbs
| | |— index.hbs
| |— app.js
| |— config.js
| |— package.json
config.js文件以这种方式存储所有重要的配置（不要忘记使用自己的密钥）：
module.exports = {
twitter: {
consumer_key: "GOVEyk6pApI3G8nhgJ9hoiOqS",
consumer_secret: "PYk0IldOYtYvVYFZaijFcalAze2v7lcne1AaJkkfL8gNfwaGYk",
access_token: "3102431840-onTYIYLayKQ7WmO6RGNAXMEKUkf69S6j7j29oyP",
access_token_secret: "G4GxB0ZcQKifCyiMlLzHH67rEpvQCJqgMx5SQWolhUb3p"
},
pubnub: {
ssl: false,
publish_key: "pub-c-05e810c1-4a07-432c-8183-dcbe803a6036",
subscribe_key: "sub-c-5f244ce2-426e-11e6-9c7c-0619f8945a4f"
},
hashtagsToTrack: [
"#news",
"#family",
"#quote",
"#love",
"#today",
"#programming"
],
channelGroup: "hashtags",
channelUpdates: "hashtag_updates",
port: process.env.APP_PORT || 3000
};
考虑到这一点，让我们回顾一下服务器端代码。
创建服务器
app.js文件将包含服务器的代码。首先导入依赖项：
var express = require("express");
var app = express();
var exphbs = require("express-handlebars");
var config = require("./config");
var Handlebars = require("handlebars");
var Twit = require("twit");
var PubNub = require("pubnub");
然后，创建与 Twitter 和 PubNub API 一起使用的对象：
var T = new Twit({
consumer_key: config.twitter.consumer_key,
consumer_secret: config.twitter.consumer_secret,
access_token: config.twitter.access_token,
access_token_secret: config.twitter.access_token_secret
});
var pubnub = new PubNub({
ssl: config.pubnub.ssl,
publishKey: config.pubnub.publish_key,
subscribeKey: config.pubnub.subscribe_key
});
在config.js文件中，我们用#字符定义要跟踪的主题标签<font style="vertical-align: inher
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~