week6: twitter-search-timeline
This commit is contained in:
parent
6a95d6287c
commit
b66439390c
117
week6/twitter-search-timeline/index.html
Normal file
117
week6/twitter-search-timeline/index.html
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>SEARCH TWITTER</title>
|
||||||
|
<style>
|
||||||
|
/* CSS Styling */
|
||||||
|
#frame {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#inputs{
|
||||||
|
width: 50em;
|
||||||
|
bborder: 1px solid black;
|
||||||
|
}
|
||||||
|
.hit {
|
||||||
|
bborder: 1px solid green;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1em;
|
||||||
|
max-width: 400px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.tweet_image img {
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<!-- SCRIPTS -->
|
||||||
|
<!-- import handlebars -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
||||||
|
<!-- import jquery -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- HTML -->
|
||||||
|
<label>SEARCH TWITTER</label>
|
||||||
|
<div id="frame">
|
||||||
|
<!-- inputs for the search to send to server -->
|
||||||
|
<div id="inputs">
|
||||||
|
<label>username: </label>
|
||||||
|
<input id="username_text_field" type="text"/>
|
||||||
|
<label>keyword: </label>
|
||||||
|
<input id="keyword_text_field" type="text"/>
|
||||||
|
<label>results </label>
|
||||||
|
<input id="nbr_results" type="number" value="150" min="100" max="500">
|
||||||
|
<input id="radio_videos" type="radio"/>
|
||||||
|
<!-- search button -->
|
||||||
|
<input type="button" value="Search" onclick="search();"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="results">
|
||||||
|
<script id="results-template" type="text/x-handlebars-template">
|
||||||
|
{{#each this}}
|
||||||
|
<div class="hit">
|
||||||
|
<div class='tweet_text'>{{text}}</div>
|
||||||
|
{{#if images}}
|
||||||
|
{{#each images}}
|
||||||
|
<div class='tweet_image'>
|
||||||
|
<img src={{this}} />
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SCRIPTS -->
|
||||||
|
<!-- import socket.io -->
|
||||||
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
|
<script>
|
||||||
|
// connect to localhost on its port (see server.js -- 8088)
|
||||||
|
var socket = io().connect('http://localhost:8088');
|
||||||
|
|
||||||
|
// when connecting
|
||||||
|
socket.on('connect', function (data) {
|
||||||
|
console.log('connected');
|
||||||
|
});
|
||||||
|
|
||||||
|
// when receiving a custom message form the server ('search_twitter_results')
|
||||||
|
socket.on('search_twitter_results', function(msg) {
|
||||||
|
|
||||||
|
console.log('search_twitter_results: ' + JSON.stringify(msg));
|
||||||
|
|
||||||
|
compile_results_and_dispay(msg);
|
||||||
|
});
|
||||||
|
|
||||||
|
// when search button is pressed
|
||||||
|
function search() {
|
||||||
|
|
||||||
|
var username = document.getElementById("username_text_field").value;
|
||||||
|
var keyword = document.getElementById("keyword_text_field").value;
|
||||||
|
var hits = document.getElementById("nbr_results").value;
|
||||||
|
|
||||||
|
// create search parameters that will be sent to the server
|
||||||
|
var search_params = {username: username, keyword: keyword, nbr_hits: hits}
|
||||||
|
|
||||||
|
// send request to the server
|
||||||
|
socket.emit('search_twitter', search_params);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function compile_results_and_dispay(results) {
|
||||||
|
|
||||||
|
var template_script = $("#results-template").html();
|
||||||
|
|
||||||
|
var template = Handlebars.compile(template_script);
|
||||||
|
|
||||||
|
$('.hit').remove();
|
||||||
|
|
||||||
|
$('#results').append(template(results));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
week6/twitter-search-timeline/package.json
Normal file
16
week6/twitter-search-timeline/package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "search-twitter",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "simple twitter search",
|
||||||
|
"main": "server.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "gauthier",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"express": "^4.14.0",
|
||||||
|
"socket.io": "^1.6.0",
|
||||||
|
"twitter": "^1.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
120
week6/twitter-search-timeline/server.js
Normal file
120
week6/twitter-search-timeline/server.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
// server.js
|
||||||
|
|
||||||
|
// import express ()
|
||||||
|
var express = require('express'); // npm install --save express
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
// import node.js http
|
||||||
|
var server = require('http').Server(app);
|
||||||
|
|
||||||
|
// import socket.io
|
||||||
|
var io = require('socket.io')(server); // npm install --save socket.io
|
||||||
|
|
||||||
|
// import filesystem (aka fs)
|
||||||
|
var fs = require('fs');
|
||||||
|
|
||||||
|
//import twitter
|
||||||
|
var twitter = require('twitter'); // npm install --save twitter
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------
|
||||||
|
Twitter Configuration
|
||||||
|
-------------------------*/
|
||||||
|
|
||||||
|
// load configuration file with all secrets, etc.
|
||||||
|
var config_file = "./twitter_credentials.json";
|
||||||
|
var config = JSON.parse(fs.readFileSync(config_file, "utf8"));
|
||||||
|
|
||||||
|
// create the twitter client
|
||||||
|
var client = new twitter(config);
|
||||||
|
|
||||||
|
/* ----------------------
|
||||||
|
Twitter Functions
|
||||||
|
-------------------------*/
|
||||||
|
|
||||||
|
function timeline_user(username, nbr_hits) {
|
||||||
|
|
||||||
|
var twitter_search_params = {screen_name: username, count: nbr_hits};
|
||||||
|
|
||||||
|
client.get('statuses/user_timeline', twitter_search_params, function(error, tweets, response) {
|
||||||
|
|
||||||
|
var results = [];
|
||||||
|
|
||||||
|
if(error) {
|
||||||
|
console.log(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for(tweet of tweets) {
|
||||||
|
|
||||||
|
//console.log(tweet);
|
||||||
|
|
||||||
|
var r = {text: tweet.text}; // creating own data structure
|
||||||
|
|
||||||
|
if(tweet.extended_entities && tweet.extended_entities.media) {
|
||||||
|
|
||||||
|
r.images = []; // creating a array of images
|
||||||
|
|
||||||
|
for(media of tweet.extended_entities.media) {
|
||||||
|
|
||||||
|
if(media.type == 'photo')
|
||||||
|
|
||||||
|
r.images.push(media.media_url);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
results.push(r);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// send results to client
|
||||||
|
io.emit('search_twitter_results', results);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------
|
||||||
|
Server and Socket Configuration
|
||||||
|
--------------------------------------*/
|
||||||
|
|
||||||
|
// tell express to server our index.html file
|
||||||
|
app.get('/', function (req, res) {
|
||||||
|
res.sendFile(__dirname + '/index.html');
|
||||||
|
});
|
||||||
|
|
||||||
|
// configure socket.io
|
||||||
|
// (1) when there is a connection
|
||||||
|
io.on('connection', function(socket) {
|
||||||
|
|
||||||
|
console.log('got a connection');
|
||||||
|
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
||||||
|
|
||||||
|
// (2) configure the connected socket to receive custom messages ('message from human')
|
||||||
|
socket.on('search_twitter', function(msg) {
|
||||||
|
|
||||||
|
console.log('searching twitter with: ' + JSON.stringify(msg));
|
||||||
|
|
||||||
|
//here msg = {username: username, keyword: keyword, nbr_hits: hits}
|
||||||
|
timeline_user(msg.username, msg.nbr_hits);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('disconnet', function() {
|
||||||
|
|
||||||
|
console.log('got a disconnection');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/* -------------------
|
||||||
|
Start the server
|
||||||
|
----------------------*/
|
||||||
|
|
||||||
|
// listen to connection on port 8088 --> http://localhost:8088
|
||||||
|
server.listen(8088, function () {
|
||||||
|
console.log('listening on port: ' + 8088);
|
||||||
|
});
|
||||||
|
|
||||||
6
week6/twitter-search-timeline/twitter_credentials.json
Normal file
6
week6/twitter-search-timeline/twitter_credentials.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"consumer_key": "jKMz31iuQMImQpDZOEKlFelb2",
|
||||||
|
"consumer_secret": "IAfen9GcPSKsmiFZcXv23qVLDdI6PhHAFfJidc8UWbg8qIJnmH",
|
||||||
|
"access_token_key": "801125183360745472-eMpgT1Cscw86Mm31KG8DTq336L5g4RB",
|
||||||
|
"access_token_secret": "xZEuPLawdBwOgPCSWHaWsUAgbYlobAztYmwMMGeJvtsli"
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user