Original code twitter watch
Changes:
reverse chronological order (prepend instead of append tweets)
no tweet remove when we have more than nine
display avatar,name and difference on date and now
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl" lang="gl">
<head>
<title>Twitter alert viewer>/title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="logic.js" type="text/javascript"></script>
</head>
<body>
<div id="tweets">
<h1>Twitter alert viewer</h1>
<a href="#" id="pause">Pause</a>
<a href="#" id="run">Run</a>
<div id="feed-container">
</div>
</div>
</body>
</html>
table.sql
CREATE TABLE IF NOT EXISTS `tweets` ( `id` bigint(20) unsigned NOT NULL, `text` varchar(150) NOT NULL, `name` varchar(100) NOT NULL, `screen_name` varchar(255) NOT NULL, `followers_count` varchar(50) NOT NULL, `created_at` datetime NOT NULL, `image` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
watch.php
<?php
$db = mysql_connect('localhost', 'twitter_alerts', 'somepasword');
mysql_select_db('twitter_alerts', $db);
$opts = array(
'http'=>array(
'method'=> "POST",
'content'=> 'track='.WORDS_TO_TRACK
)
);
$context = stream_context_create($opts);
$instream = fopen('https://'.TWITTER_USERNAME.':'.TWITTER_PASSWORD.'@stream.twitter.com/1/statuses/filter.json','r',false,$context);
while(! feof($instream)) {
if(! ($line = stream_get_line($instream, 20000, "\n"))) {
continue;
}else{
$tweet = json_decode($line);
if(($tweet->{'text'})||($tweet->{'text'}!="")){
$id = $tweet->{'id_str'};
$text = mysql_real_escape_string($tweet->{'text'});
$date=new DateTime($tweet->{'created_at'}, new DateTimeZone('UTC'));
$time=$date->format("Y-m-d H:i:s");
$name = mysql_real_escape_string($tweet->{'user'}->{'name'});
$screen_name = mysql_real_escape_string($tweet->{'user'}->{'screen_name'});
$followers_count = mysql_real_escape_string($tweet->{'user'}->{'followers_count'});
$image_url=mysql_real_escape_string($tweet->{'user'}->{'profile_image_url'});
$ok = mysql_query("INSERT INTO tweets (id ,text ,name,screen_name ,followers_count, created_at,image) VALUES ('$id', '$text', '$name' , '$screen_name', '$followers_count', '$time', '$image_url')");
if (!$ok) {echo "Mysql Error: ".mysql_error();}
flush();
}
}
}
?>
server.php
<?php
$db = mysql_connect('localhost', 'twitter_alerts', 'somepasword');
mysql_select_db('twitter_alerts');
$start = mysql_real_escape_string($_GET['start']);
if(! $start){
$query = "SELECT * FROM tweets ORDER BY id ASC";
}else{
$query = "SELECT * FROM tweets WHERE id>".$start." ORDER BY id ASC";
}
$result = mysql_query($query);
$data = array();
while ($row = mysql_fetch_assoc($result)){
array_push($data, $row);
}
$json = json_encode($data);
print $json;
?>
logic.js
var cTime;
var tTime;
var nTotalDiff;
var oDiff;
var dateDiff;
var last = '';
var init=false;
var timeOut;
function poll(){
$.getJSON("server.php?start="+last,
function(data){
$.each(data, function(count,item){
rgb = Math.floor(16*(Math.log(item.followers_count+1)+1));
importanceColor='rgb('+rgb+',0,0)';
var tweet=$('<div class="tweet" id="'+item.id+'">');
$(tweet).html(
'<a href="http://twitter.com/'+item.screen_name+'"><img class="avatar" src="'+item.image+'"></a>'+
'<div class="namec"><a class="name" href="http://twitter.com/'+item.screen_name+'">'+item.name+'</a>'+
'<a class="screen_name" href="http://twitter.com/'+item.screen_name+'" style="color:'+importanceColor+'">@'+item.screen_name+'</a>'+
'<a class="expand" href="https://twitter.com/'+item.screen_name+'/status/'+item.id+'">Expand</a></div>'
+'<span class="text">'+item.text+'</span>'+
'<div class="created_at">'+item.created_at+'</div>'
);
$('#feed-container').prepend(tweet);
if(init==true){
var h=$(tweet).height();
$(tweet).css({"height":"0px"}).animate({"height":h},2000);
}
last = item.id;
});
init=true;
$(".created_at").diffdate();
}
);
timeOut = setTimeout('poll()', 30000);
}
function jsdate(ele){
var e=ele.split(/[- :]/);
var d = new Date(Date.UTC(e[0], e[1]-1, e[2], e[3], e[4], e[5]));
return d;
}
(function($){
$.fn.extend({
diffdate: function(){
return this.each(function(){
dateDiff="";
cTime=new Date();
var ele=this;
if(!$(ele).is(".difference")){
this.createdat=$(ele).html();
$(ele).addClass("difference");
}
tTime=jsdate(ele.createdat);
nTotalDiff = cTime.getTime() - tTime.getTime();
oDiff = new Object();
oDiff.days = Math.floor(nTotalDiff/1000/60/60/24);
nTotalDiff -= oDiff.days*1000*60*60*24;
oDiff.hours = Math.floor(nTotalDiff/1000/60/60);
nTotalDiff -= oDiff.hours*1000*60*60;
oDiff.minutes = Math.floor(nTotalDiff/1000/60);
nTotalDiff -= oDiff.minutes*1000*60;
oDiff.seconds = Math.floor(nTotalDiff/1000);
if(oDiff.days==1){
dateDiff+=oDiff.days+" day ";
}
else if(oDiff.days>1){
dateDiff+=oDiff.days+" days ";
}
if(oDiff.hours==1){
dateDiff+=oDiff.hours+" hr ";
}
else if(oDiff.hours>1){
dateDiff+=oDiff.hours+" hrs ";
}
if(oDiff.minutes==1){
dateDiff+=oDiff.minutes+" min ";
}
else if(oDiff.minutes>1){
dateDiff+=oDiff.minutes+" mins ";
}
if(oDiff.seconds==1){
dateDiff+=oDiff.seconds+" sec ";
}
else if(oDiff.seconds>1){
dateDiff+=oDiff.seconds+" secs ";
}
$(ele).html(dateDiff);
});
}
});
})(jQuery);
$(document).ready(function(){
poll();
$("#pause").click(function(e){
e.preventDefault();
clearTimeout(timeOut);
});
$("#run").click(function(e){
e.preventDefault();
poll();
});
});
style.css
body{
font-family: georgia, serif;
}
#tweets{
margin:0 auto;
width:400px;
}
#feed-container{
width:100%;
height:500px;
overflow:auto;
}
.tweet{
border:1px solid silver;
margin:5px;
padding:5px;
background-color:#fff;
word-wrap:break-word;
position:relative;
}
.namec{
left: 60px;
position: absolute;
top: 5px;
width: 300px;
}
.created_at{
position:relative;
top:5px;
padding-bottom:3px;
color: #AAAAAA;
}
.text{
position:relative;
margin-bottom:10px;
padding-left:5px;
top:-7px;
}
.avatar{
border-radius: 5px 5px 5px 5px;
height: 48px;
width: 48px;
}
.name{
color:#000000;
font-weight:bolder;
text-decoration:none;
}
.name:hover{
text-decoration:underline;
}
.screen_name{
margin-left:5px;
}
.expand{
position:absolute;
right:0px;
text-decoration:none;
color: #AAAAAA;
}
.expand:hover{
color:#000000;
text-decoration:underline;
}
Example:
0 Comments
Publicar un comentario