commit be1624265341db49e429f1ba7deb9482a72e2358
parent 7c961b43d6b5c6964922d3b53e12f4eeaae12121
Author: underd0g <underd0g@underd0gs-MacBook-Air.local>
Date: Mon, 27 Apr 2020 17:06:50 -0400
added working socket
Diffstat:
4 files changed, 143 insertions(+), 12 deletions(-)
diff --git a/index.js b/index.js
@@ -31,26 +31,38 @@ res.render('index');
//optional array of terms to track
//var watchList = ['love', 'hate'];
+
+
+//decalre the post route
app.post('/sendit', function(req, res){
console.log(' still gonna send it!');
- var tag = req.body.tag;
- res.render('senditpage');
+ //get the input from the user and log it in the console.
+ var tag = req.body.tag;
+ console.log(tag);
-})
-var T = new twit(creds);
+ //add my credentials to allow access to the api.
+ var T = new twit(creds);
-io.on('connection', function (socket) {
-console.log('Connected');
+ //connect socket to the index page.
+ io.on('connection', function (socket) {
+ console.log('Connected');
+ //use the twit API to get a constant flow of data from twitter about a certain keyword.(s)
+ var stream = T.stream('statuses/filter', { track: '#coding', language: 'en' });
+ //twit fucntion with callback to log the tweets and send them to socket.io
+ stream.on('tweet', function (tweet) {
+ console.log(tweet.text);
+ //socket.io function to send the text of the tweet to the front end page .
+ socket.emit('stream',tweet.text);
-var stream = T.stream('statuses/filter', { track: '#coding', language: 'en' })
+ //render the sendit page
-stream.on('tweet', function (tweet) {
- console.log(tweet.text);
-socket.emit('stream',tweet.text);
+});
+
});
+res.render("senditpage");
});
diff --git a/views/index.ejs b/views/index.ejs
@@ -52,9 +52,9 @@
<p><h4>Check out some live tweets for a certain word or hashtag</h4> </p>
<div align = 'center'>
-<form id = 'input' action = "/sendit" action = "post">
+<form id = 'input' action = "/sendit" method = "post">
<div class="input-group mb-3">
- <span><input type="text"name = 'tag' class="form-control" placeholder="l0bster..." aria-label="Enter a tag..." aria-describedby="basic-addon2"></input>
+ <span><input type="text" name = 'tag' class="form-control" placeholder="l0bster..." aria-label="Enter a tag..." aria-describedby="basic-addon2"></input>
<div class="input-group-append" align = 'center'>
<span> <button id = 'submitbutton' class="btn btn-outline-secondary" type="button" value = "Submit">Submit</button></span>
diff --git a/views/postpage.ejs b/views/postpage.ejs
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+ <title>TweetWebGraph</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel = 'stylesheet' href = '/css/stylesheet.css'>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+ <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
+ <script src="/socket.io/socket.io.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
+
+
+</head>
+<body>
+
+<!-- Navbar -->
+<nav class="navbar navbar-default">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">< TweetWebGraph /> </a>
+ </div>
+ <div class="collapse navbar-collapse" id="myNavbar">
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">WHOIS</a></li>
+ <li><a href="#">./run</a></li>
+ <li><a href="#">HOWTO</a></li>
+ </ul>
+ </div>
+ </div>
+</nav>
+
+<!-- First Container -->
+<div class="container-fluid bg-1 text-center">
+ <h3 class="margin">Whois?</h3>
+ <img src="/images/dead-smiley-face-icon_17015.png" class="img-responsive" style="display:inline" alt="smile" width="350" height="350">
+ <h3>Just Another WebApp To Show Your Twitter Stats...</h3><p></p>
+</div>
+
+<!-- Second Container -->
+<!-- Inject some JS to add the api connection and user functionality -->
+<div class="container-fluid bg-2 text-center">
+
+ <h3 class="margin">./Run</h3>
+ <p><h4>Check out some live tweets for a certain word or hashtag</h4> </p>
+
+ <div align = 'center'>
+ <script>
+ var socket = io.connect('http://localhost:3000');
+ socket.on('stream', function(tweet){
+ $('#tweetd').append(tweet+'<br>');
+ });
+ </script>
+ <div id="tweetd"></div>
+ </div>
+</div>
+</div>
+
+<!-- Third Container (Grid) -->
+<div class="container-fluid bg-3 text-center">
+ <h3 class="margin">HOWTO / TODO</h3><br>
+ <p> style the input better (button on the same line as box)</p>
+ <p> add the server side post action (send it route)</p>
+ <p> configure the client side render and display for send it route</p>
+ <p>do an actual whois section for the project resources and friends</p>
+ <p> add to lobster (feed.domain.com)</p>
+ <p> come up with more api features to display
+ <div class="row">
+ <div class="col-sm-4">
+ <p>Check out the project on Github!</p>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a>
+ </div>
+ <div class="col-sm-4">
+ <p>References</p>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ </div>
+ <div class="col-sm-4">
+ <p>Friends</p>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+ <a href="https://www.github.com/underd0g1/tweetwebgraph">Project</a><br>
+
+ </div>
+ </div>
+</div>
+
+<!-- Footer -->
+<footer class="container-fluid bg-4 text-center">
+ <p>Made with <span class="glyphicon glyphicon-heart"></span><br><a href="http://www.underd0g.co"><span class="glyphicon glyphicon-barcode"></span></a></p>
+</footer>
+
+</body>
+</html>
diff --git a/views/senditpage.ejs b/views/senditpage.ejs
@@ -0,0 +1,12 @@
+
+<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:3000');
+ socket.on('stream', function(tweet){
+ $('#tweetd').append(tweet+'<br>');
+ });
+ </script>
+ <div id="tweetd"></div>
+</div>
