TaiiNet/test.html at master · gitforbash/TaiiNet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>TaiiNet</title>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
        <script src="taiinet.js"></script>
    </head>
    <body>
        <div id="tweets"></div>
        <script>
            // connect to signaller
            var tn = new TaiiNet();
            // tell the network what data we want
            var sub = tn.subscribe({type: "tweet"}, true);// true means get logs, too
            // when we get a message
            sub.on("data", function(message){
                console.log(message);
                // show the tweet
                add_tweet(JSON.parse(message.data).tweet)
            });
            // when we get a backlog message
            sub.on("backlog", function(backlog){
              console.log(backlog);
              // show the tweet
              add_tweet(JSON.parse(backlog.data).backlog.tweet)
            })

            // super fancy GUI nonesense
            function send_tweet(tweet) {
                sub.send({type: "tweet", tweet: tweet});
                add_tweet(tweet);
            }

            function add_tweet(tweet) {
                var tweets = document.querySelector("#tweets");
                tweets.innerHTML = tweets.innerHTML + tweet + "<br />"
            }
            function tweetbutton(){
                send_tweet(document.querySelector("#tweet").value);
            }
        </script>
        <input id="tweet" /><button onclick="tweetbutton()">Tweet!</button>
    </body>
</html>