文档章节

用 Socket.io 处理 NodeJS 和 AngularJS 间的 tweet

开源中国匿名会员
 开源中国匿名会员
发布于 2014/06/19 12:10
字数 854
阅读 1169
收藏 2

这篇文章里面,我们学习一下,怎么用 Socket.io 来流化处理一些旧金山周边的 tweet,在 nodejs 应用和 angularjs 应用之间。我们为了从 nodejs 应用拿到 tweet, 我们用的是 Twitter API 的 nodejs 客户端: Twit

首先,我们需要在 Twitter developers 创建一个应用。创建一个只需要读权限的应用。对我们的应用来说足够了。现在,生成你的访问 token。 你需要四个 token: Application API Key, Application API Secret, Access Token 和 Access Token Secret。

你可以从 Github 拿到源码,从这里访问在线例子。

拿到旧金山周边的 tweets: 通过 nodejs 和 Twit

为了在 nodejs 中拿到 tweets, 我们需要配置 Twit。

<!-- lang: js -->
var Twit = require('twit');
var TWEETS_BUFFER_SIZE = 3;
 
var T = new Twit({
    consumer_key:         'API Key',
    consumer_secret:      'API Secret',
    access_token:         'Access Token',
    access_token_secret:  'Access Token Secret'
})

然后,我们可以打开一个流,指向是 /status/filter, 加上位置参数和 tweet 事件。当有推进来的时候,这个事件就会被触发。

<!-- lang: js -->
console.log("Listening for tweets from San Francisco...");
var stream = T.stream('statuses/filter', { locations: [-122.75,36.8,-121.75,37.8] });
var tweetsBuffer = [];
 
stream.on('connect', function(request) {
    console.log('Connected to Twitter API');
});
 
stream.on('disconnect', function(message) {
    console.log('Disconnected from Twitter API. Message: ' + message);
});
 
stream.on('reconnect', function (request, response, connectInterval) {
  console.log('Trying to reconnect to Twitter API in ' + connectInterval + ' ms');
})
 
stream.on('tweet', function(tweet) {
    if (tweet.geo == null) {
        return ;
    }
 
    //Create message containing tweet + username + profile pic + geo
    var msg = {};
    msg.text = tweet.text;
    msg.geo = tweet.geo.coordinates;
    msg.user = {
        name: tweet.user.name,
        image: tweet.user.profile_image_url
    };
 
    console.log(msg);
});

在 tweet 事件里面我们通过接收到的数据,创建一个只包含推的内容,坐标,用户及用户照片的信息。现在我们看看怎么用 Socket.IO 流化这个推,在 nodejs 和 angularjs 之间交流。

Streaming tweets with Socket.IO

首先我们要配置 socket.io ,让它和 express 服务一起工作:

<!-- lang: js -->
var express = require('express');
var app = express();
var server = app.listen(3000);
var io = require('socket.io').listen(server);

现在,如果转向到 localhost:3000/socket.io/socket.io.js 我们可以拿到 socket.io 的客户端。我们只需要用我们的 socket.io 向所有链接上的客户端广播信息就可以了。因此我们要改一下 tweet 事件:

<!-- lang: js -->
stream.on('tweet', function(tweet) {
    if (tweet.place == null) {
        return ;
    }
 
    //Create message containing tweet + username + profile pic + location
    var msg = {};
    msg.text = tweet.text;
    msg.location = tweet.place.full_name;
    msg.user = {
        name: tweet.user.name,
        image: tweet.user.profile_image_url
    };
 
    //push msg into buffer
    tweetsBuffer.push(msg);
 
    //send buffer only if full
    if (tweetsBuffer.length >= TWEETS_BUFFER_SIZE) {
        //broadcast tweets
        io.sockets.emit('tweets', tweetsBuffer);
        tweetsBuffer = [];
    }
});

这个方案能用,可是不是最好的一个。如果你没有服务端链接,你还是会把 tweet 到处乱发。我们得考虑带宽。为了不到处发骚,我们得记录已链接客户端。如果这个数目是 0 ,我们就不转发了。

<!-- lang: js -->
var nbOpenSockets = 0;

io.sockets.on('connection', function(socket) {
    console.log('Client connected !');
    if (nbOpenSockets <= 0) {
        nbOpenSockets = 0;
        console.log('First active client. Start streaming from Twitter');
        stream.start();
    }
 
    nbOpenSockets++;
 
    socket.on('disconnect', function() {
        console.log('Client disconnected !');
        nbOpenSockets--;
 
        if (nbOpenSockets <= 0) {
            nbOpenSockets = 0;
            console.log("No active client. Stop streaming from Twitter");
            stream.stop();
        }
    });
});

在 AngularJS 方通过 Socket.IO 接收信息

nodejs 应用可以取得推特,然后广播转发到已链接客户端。我们来看看如何创建一个 AngularJS 客户端。首先我们需要建立一个 service,用来链接到我们的服务器,和处理接收事件:

<!-- lang: js -->
appServices.factory('socket', function ($rootScope) {
    var socket = io.connect('http://localhost:3000');
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        }
    };
});

然后我们可以用这个 service 来监听服务端广播出来的 tweet 事件:

<!-- lang: js -->
$scope.tweets = [];

socket.on('tweets', function (data) {
    $scope.tweets = $scope.tweets.concat(data);
});

碉堡了,我们的 Angular 应用通过 Socket.IO 接收到了从 nodejs 发送过来的消息了。

© 著作权归作者所有

共有 人打赏支持
开源中国匿名会员
粉丝 78
博文 104
码字总数 113453
作品 2
徐汇
技术主管
私信 提问
AngularJS 授权 + Node.js REST api

作者好屌啊,我不懂的他全都懂。 [Authentication with AngularJS and a Node.js REST api][1] 几个月前,我开始觉得 AngularJS 好像好牛逼的样子,于是我决定开始干它,并且录下来给你们看。...

开源中国匿名会员
2014/06/19
0
8
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题

Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题 2018年02月08日 23:34:56 阅读数:207 写这篇博客的原因是本人最近在学习AngularJS 公司环境是Ubuntu 家里环境是macOS 公司...

一真的鱼
05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
20分钟前
0
0
分布式Session共享解决方案

分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会话跟踪技术,服务器与客户端保持整个通讯的会话基本信息。 客户端在第一次访...

Java干货分享
26分钟前
3
0
开源软件和开源模式面临的生存危机

导读 开源模式可能正面临一场危机。越来越多的开源软件和平台被大型云计算服务商融入自家的云服务体系,并以此获利颇丰,但并不支付费用,也没有对开源社区做出相应的回馈。而实际上,大部分...

问题终结者
28分钟前
2
0
让看不见的AI算法,助你拿下看得见的广阔市场

人工智能技术的飞速发展给各行各业都带来了深远的影响,AI已被视为企业提升运营效能、应对市场竞争的必经之路。然而对于一些企业而言,让AI真正实现落地和应用,并且创造价值,仍是一件需要努...

个推
32分钟前
1
0
用SAN还是NAS?我来告诉你

存储区域网络(SAN)是以一种结构连接的存储,通常通过交换机连接,使许多不同的服务器能够轻松访问存储设备。从服务器应用程序和操作系统的角度来看,访问SAN中的数据存储或直接连接的存储之间...

linux-tao
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部