我正在建立一个投资组合网站,我想整合一个实时的Twitter Feed。我使用Node,Socket.IO,Express和Twit。我有流工作并将推文输出到页面,但是当客户端刷新或断开连接并重新连接时,推文会被复制,就像我收到同一条推文的多个一样。代码的服务器端使用Twit连接到Twitter API以从Twitter的公共流中获取包含有关所提供的主题标签的所有推文的流,然后使用io.sockets.emit()
将它们发送到客户端。
我认为发生的事情是客户端仍然连接并接收推文,然后重新连接再次收到它们。
这是我的后端代码,然后是我的客户端代码(计划将其重构为多个模块)。底部提供的图片。
感谢您的帮助,到目前为止我一直在使用Node!
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);
//To Do refactor
app.get('/style.css', function(req, res) {
res.sendFile(__dirname + "/public/style.css");
});
app.get('/feed.html', function (req, res) {
res.sendFile(__dirname + "/public/feed.html");
});
app.get('/index.html', function (req, res) {
res.sendFile(__dirname + "/public/index.html");
});
app.get('/', function (req, res) {
res.sendFile(__dirname + "/public/index.html");
});
app.get('/contact.html', function (req, res) {
res.sendFile(__dirname + "/public/contact.html");
});
app.get('/work.html', function (req, res) {
res.sendFile(__dirname + "/public/work.html");
});
app.get('/social.html', function (req, res) {
res.sendFile(__dirname + "/public/social.html");
});
app.get('/about.html', function (req, res) {
res.sendFile(__dirname + "/public/about.html");
});
var Twit = require('twit');
var watchList = ['#USA'];
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) {
if(tweet.text !== undefined){
//console.log(tweet.text);
io.sockets.emit('stream',tweet.text);
}
});
socket.on('disconnect', function(){
console.log('Disconnected');
});
});
这是我的客户端代码:
<script>
var socket = io.connect('http://localhost:3000');
var count = 0;
socket.on('stream', function(tweet){
if(count < 10) {
$('#tweetd').append(tweet + '<br>');
count++;
//console.log(count)
}
});
</script>
<div id="tweetd"></div>
</div>