用socket.io/node.js在网页上显示流媒体推文

Question

我正在尝试使用node.js socket.io和twit构建一个Twitter流媒体web应用程序。

var express = require('express') 
    , app = express() 
    , http = require('http') 
    , server = http.createServer(app) 
    ,Twit = require('twit') 
    , io = require('socket.io').listen(server); 

server.listen(8080); 

// routing 
app.get('/', function (req, res) { 
    res.sendfile(__dirname + '/index.html'); 
}); 

var watchList = ['love', 'hate']; 


io.sockets.on('connection', function (socket) { 
    console.log('Connected'); 

    var T = new Twit({ 
    consumer_key:   '' 
    , consumer_secret:  '' 
    , access_token:   '' 
    , access_token_secret: '' 
}) 
T.stream('statuses/filter', { track: watchList },function (stream) { 

    stream.on('tweet', function (tweet) { 

     io.sockets.emit('stream',tweet.text); 
     console.log(tweet.text); 

    }); 
}); 
}); 

这里是我的客户端

<script src="/socket.io/socket.io.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
    <script> 
    $(function(){ 
     var socket = io.connect('http://localhost:8080'); 
     socket.on('tweet', function(tweet) { 
    $(
     '<div class="tweet">' + tweet.text + '</div>'); 
     }); 

    }); 

    </script> 
</div> 

当我运行节点app.js并尝试连接到本地主机：8080我只是得到了一个空白页面，即使一切（soket.io，jQuery的， ...）似乎已正确加载。

这里的服务器输出的一个示例：

info - socket.io started 
debug - served static content /socket.io.js 
debug - client authorized 
info - handshake authorized pwH0dbx4WvBhzSQXihpu 
debug - setting request GET /socket.io/1/websocket/pwH0dbx4WvBhzSQXihpu 
debug - set heartbeat interval for client pwH0dbx4WvBhzSQXihpu 
debug - client authorized for 
debug - websocket writing 1:: 
debug - websocket writing 5:::{"name":"stream","args":["RT @mintycreative: Great to chat  today RT @SharonHolistic: Treatments available tomorrow http://t.co/5Poq3KU08u Book yours now #WestMidsHou…"]} 

调试 - 网页套接字写5 ::: { “名称”： “流”， “ARGS”：[“RT @laurenpeikoff：#BREAKING @ScottsdalePD证实 - 警方正在调查迈克尔比斯利涉嫌性侵犯。@ 12News @ azcentr ...“]}

希望你能帮助我纠正我的错误。

Answer 1

问题解决

这里是没有任何错误的代码： （服务器端）

var express = require('express') 
    , app = express() 
    , http = require('http') 
    , server = http.createServer(app) 
    ,Twit = require('twit') 
    , io = require('socket.io').listen(server); 

server.listen(8080); 

// routing 
app.get('/', function (req, res) { 
res.sendfile(__dirname + '/index.html'); 
}); 

var watchList = ['love', 'hate']; 
var T = new Twit({ 
    consumer_key:   '' 
    , consumer_secret:  '' 
    , access_token:   '' 
    , access_token_secret: '' 
}) 

io.sockets.on('connection', function (socket) { 
    console.log('Connected'); 


var stream = T.stream('statuses/filter', { track: watchList }) 

    stream.on('tweet', function (tweet) { 

    io.sockets.emit('stream',tweet.text); 


    }); 
}); 
}); 

（客户端）

<script src="/socket.io/socket.io.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
    <script> 

     var socket = io.connect('http://localhost:8080'); 
     socket.on('stream', function(tweet){ 
     $('#tweetd').append(tweet+'<br>'); 
     }); 
    </script> 
    <div id="tweetd"></div> 
</div> 

Answer 2

第一个问题是，您每次打开套接字连接时都会构造一个新的twitter侦听器。您应该将其移动到connection事件之外。这可能不理想。我不确定twitter模块是如何处理内部的，但实际上每次连接websocket时都可能创建一个到他们的API的新连接。

在客户端，你的jQuery可能会有点不同。如果你只是想每一个鸣叫发生时鸣叫添加到页面，添加一个新的tweet body元素与$('body').append()

见this gist for reference.