Skip to content

2.md

Latest commit

 

History

History
262 lines (200 loc) · 9.75 KB

2.md

File metadata and controls

262 lines (200 loc) · 9.75 KB

二、构建一个实时博客工具

参加活动时，博客直播非常方便；能够在博客上实时报道最新发布的新产品，这并没有什么坏处。

我们将使用 Node.js、Flybase 和 Twilio 构建一个简单的博客应用。

这个特殊的实时博客解决方案是为一个事件设置的。这意味着我们指定的电话号码上的所有帖子都会显示出来。

您可以在此基础上允许多个事件，但这比我们今天要深入探讨的要多一点。

设置

我们将使用一些工具来构建这个应用。在继续之前，您需要设置 Twilio、Flybase 和 Node.js。如果你还没有，现在就注册( https://app.flybase.io/signup )一个免费的 Flybase 帐户，然后创建一个新的应用。你将把你的应用用于你的实时博客应用。

入门指南

我们首先需要设置 Node.js 应用。除了 Twilio 和 Flybase 模块，我们将使用 express 框架( http://expressjs.com/ )来设置我们的 Node web 服务器，以接收来自 Twilio 的 POST 请求，因此我们需要安装 Express 包。我们还将使用 body-parser 模块，所以我们也将安装它。

让我们创建我们的package.json文件:

json
{
      "name": "live-blog",
      "version": "0.0.1",
      "description": "Live Blog App powered by Flybase, Twilio and Node.js",
      "main": "app.js",
      "repository": "https://github.com/flybase/live-blog",
      "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
            "Twilio",
            "Flybase",
            "sms"
      ],
      "author": "Roger Stringer",
      "license": "MIT",
      "dependencies": {
            "Twilio": "~1.6.0",
            "ejs": "~0.8.5",
            "express": "~3.4.8",
            "flybase": "~1.7.8",
            "node-buzz": "~1.1.0",
            "moment": "~2.5.1",
            "less-middleware": "~0.2.1-beta",
            "body-parser" : "~1.4.2",
            "method-override" : "~2.0.2"
      },
      "engines": {
            "node": "0.10.26"
      }
}

保存该文件，并从终端运行以下命令:

npm install

这将创建一个包含我们想要使用的所有模块的node_modules文件夹。

我们要创建的第一个文件是config.js；这将保存我们的配置信息:

javascript
module.exports = {
    // Twilio API keys
    Twilio: {   // Where you will put your Twilio Credentials
        sid: "ACCOUNTSID",
        token: "AUTHTOKEN",
        from_number: "YOUR-NUMBER"
    },
    flybase: {  // Where you will put your flybase credentials
            api_key: "YOUR-API-KEY",
            app_name: "YOUR-flybase-APP"
    },
    un: 'admin',
    pw: 'password'
};

该文件用于我们的配置。我们可以在任何时候通过引用文件和调用键来访问这里的任何东西。例如，为了获得我们的 Flybase API 密钥，我们将调用

javascript
var config = require('./config');
console.log( config.flybase.api_key );

将ACCOUNTSID、AUTHTOKEN和YOUR-NUMBER替换为您将使用的 Twilio 凭证和 Twilio 帐户中的电话号码。

然后，用您要使用的 Flybase API 密钥替换YOUR-API-KEY和YOUR-flybase-APP。

在我们的 app.js 文件的开始，我们需要 require express 并将其初始化为一个名为 app 的变量。我们还将使用 bodyParser 中间件( https://github.com/expressjs/body-parser )来方便地使用我们将在 POST 请求中获得的数据。

创建一个名为app.js的新文件，并需要 twilio、express 和 flybase 包:

javascript

var express = require('express');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var path = require('path');
var config = require('./config');

var app = express();
app.set('views', path.join(process.cwd(), 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users

var port = process.env.PORT || 8080; // set our port

var Twilio = require('Twilio');
var client = Twilio(config.Twilio.sid, config.Twilio.token );

var flybase = require('flybase');
var postsRef = flybase.init(config.flybase.app_name, "posts", config.flybase.api_key);

Flybase 使用集合来组织应用中的数据，因此一个应用可以有几个集合。如果您熟悉关系数据库，这相当于一个表。

我们将为我们的项目使用一个集合，我们称之为posts。

让我们建立我们的文件夹结构。创建一个名为views的文件夹；这是我们将保持前端的地方。

在views文件夹中创建一个名为index.ejs的文件:

HTML

<!doctype html>
<html>
<head>
      <link href='http://fonts.googleapis.com/css?family=Lato:400,300italic,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script src="https://cdn.flybase.io/flybase.js?latest=1"></script>
      <title>Live Blog, powered by Flybase and Twilio</title>
</head>
<body>
      <div class='container'>
            <div class="row">
                  <div class="col-md-4">
                        <div id="postsDiv"></div>
                  </div>
      </div>
      <script>
            $(function(){
                  var postsRef = new flybase("<%= apikey %>", "<%= appname %>", "posts");
                  postsRef.once('value', function (data) {
                        console.log( "we found " + data.count() + " posts");
                        data.forEach( function(post){
                              displayPost(post.value() );
                        });
                  });

                  postsRef.on('added', function (data) {
                        var post = data.value();
                        displayPost(post);
                  });

                  function displayPost(post) {
                        $('<div/>')
                              .attr("id",post._id)
                              .text(post.textMessage)
                              .appendTo( $('#postsDiv') );
                        $('#postsDiv')[0].scrollTop = $('#postsDiv')[0].scrollHeight;
                  }
            });
      </script>
</body>
</html>

这将在我们的应用中监听我们的posts收藏中的任何新帖子，然后在发生时在屏幕上输出。现在，让我们设置我们的 Twilio 监听器。

设置我们的 Twilio 监听器

Twilio 使用 webhooks ( https://en.wikipedia.org/wiki/Webhook )来让您的服务器知道何时有消息或电话进入我们的应用。我们需要设置一个端点，我们可以告诉 Twilio 将它用于消息传递 webhook。

我们将为用一些 TwiML ( www.twilio.com/docs/api/twiml )响应的**/消息**添加一条路由。TwiML 是一组基本指令，当你收到来电或短信时，你可以用它来告诉 Twilio 该做什么。我们的代码将如下所示:

javascript
// backend routes

// listen for incoming sms messages
app.post('/message', function (request, response) {
      var d = new Date();
      var date = d.toLocaleString();

      var postBody = request.param('Body');

      var numMedia = parseInt( request.param('NumMedia') );
      var i;
      if (numMedia > 0) {
            for (i = 0; i < numMedia; i++) {
                  var mediaUrl = request.param('MediaUrl' + i);
                  postBody += '<br /><img src="' + mediaUrl + '" />';
            }
      }

      postsRef.push({
            sid: request.param('MessageSid'),
            type:'text',
            tstamp: date,
            fromNumber:request.param('From'),
            textMessage:postBody,
            fromCity:request.param('FromCity'),
            fromState:request.param('FromState'),
            fromCountry:request.param('FromCountry')
      });

      var resp = new Twilio.TwimlResponse();
      resp.message('Post received');
      response.writeHead(200, {  // 200 is the limit for the title of the blog
            'Content-Type':'text/xml'
      });
      response.end(resp.toString());
});

这将把我们的消息存储在我们的posts收藏中。它将检查是否有任何图像附加到消息中，如果有，它将把它们附加到消息正文中。

最后，让我们设置我们的服务器监听端口8080，并告诉它当我们从浏览器中查看它时该做什么:

javascript
// frontend routes

app.get('*', function(req, res) {
      res.render('index', {
            apikey:config.flybase.api_key,
            appname:config.flybase.app_name,
      });
});

var server = app.listen(port, function() {
      console.log('Listening on port %d', server.address().port);
});

然后，您可以从您的终端调用node app.js，它将加载应用。

向您的 Twilio 号码发送短信，您应该会收到回复。如果你不知道，看看 Twilio 应用监视器( www.twilio.com/user/account/developer-tools/app-monitor )来帮助确定哪里出了问题。

摘要

我们现在已经建立了一个基本的实时博客工具。没有什么太花哨的，但你可以从这里开始，并在此基础上做一些更花哨的东西。直播博客对于参加活动来说很方便。您可以设置它，让与会者在参加会议时发布实时帖子，或者在新闻发布会上发布最新消息。我们稍后将在此基础上添加一个“Ionic”应用来处理帖子。