用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.