{"__v":8,"_id":"564ba1cf5cc43717009bcfe9","category":{"__v":6,"_id":"563a4fcaa19edf0d00972321","pages":["563a50051846790d0089535e","564ba1cf5cc43717009bcfe9","565a60d433140c0d0033930c","5673222e47f7010d005bfd7c","56afd2f5d21e9c0d00b62962","56be2bff6cae110d00190c05"],"project":"55773a5ba042551900b002cb","version":"55773a5ba042551900b002ce","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-04T18:34:50.832Z","from_sync":false,"order":1,"slug":"guides","title":"Guides"},"parentDoc":null,"project":"55773a5ba042551900b002cb","user":"546d17e2eb9cfd1400dd4529","version":{"__v":17,"_id":"55773a5ba042551900b002ce","project":"55773a5ba042551900b002cb","createdAt":"2015-06-09T19:11:23.764Z","releaseDate":"2015-06-09T19:11:23.764Z","categories":["55773a5ca042551900b002cf","55773a6ce6063e0d00481380","55773ab007e7110d001043ec","55773abaa042551900b002d5","55773ac207e7110d001043ed","55773acb07e7110d001043ee","55773ad3a042551900b002d6","55773adce6063e0d00481383","55773ae4a042551900b002d7","55773af307e7110d001043ef","55773af907e7110d001043f0","55773b0407e7110d001043f1","563a4f7ad25e8919005f3f39","563a4fcaa19edf0d00972321","564a70dc4cd0521700523edf","564b797bcc472d0d00da9435","564b855b766d4923004e1fd1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"Motherboard","version_clean":"1.0.0","version":"1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-11-17T21:53:19.639Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The **Streaming API** allows developers to integrate real-time streaming data into their applications. Live results and twitter commentary are delivered via a websocket connection for all supported live events.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Sample Twitter Stream\"\n}\n[/block]\nA simple example of using the Twitter Stream is available[ here](https://world-triathlon.github.io/twitter-sample.html).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!doctype html>\\n<html lang=\\\"en\\\">\\n<head>\\n    <meta charset=\\\"utf-8\\\">\\n    <title>Streaming API Websocket Twitter Example</title>\\n    <meta name=\\\"description\\\" content=\\\"Streaming API Websocket Twitter Example\\\">\\n    <link rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\\\">\\n    <link rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css\\\">\\n    <!--[if lt IE 9]>\\n    <script src=\\\"//html5shiv.googlecode.com/svn/trunk/html5.js\\\"></script>\\n    <![endif]-->\\n</head>\\n<body>\\n<div class=\\\"container\\\">\\n    <h1>Streaming API Websocket Twitter Example</h1>\\n    <div class=\\\"row\\\">\\n        <div class=\\\"col-md-12\\\">\\n            <h2>Latest Tweets</h2>\\n            <table class=\\\"table table-bordered table-hover table-striped\\\" id=\\\"timing_table\\\">\\n                <thead>\\n                <tr>\\n                    <th>Time</th>\\n                    <th>User</th>\\n                    <th>Profile Image</th>\\n                    <th>Tweet</th>\\n                    <th>Source</th>\\n                </tr>\\n                </thead>\\n                <tbody>\\n                <tr id=\\\"waiting\\\">\\n                    <td colspan=\\\"6\\\">Waiting for the next tweet to arrive...</td>\\n                </tr>\\n                </tbody>\\n            </table>\\n        </div>\\n    </div>\\n    <p>This code is for demonstration purposes and should not be used in a production environment.</p>\\n</div>\\n<script src=\\\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\\\"></script>\\n<script src=\\\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js\\\"></script>\\n<!-- Script to utilise the WebSocket -->\\n<script type=\\\"text/javascript\\\">\\n    var webSocket;\\n\\n    function openSocket(){\\n        // Ensures only one connection is open at a time\\n        if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){\\n            writeResponse(\\\"WebSocket is already opened.\\\");\\n            return;\\n        }\\n\\n        // Create a new instance of the websocket\\n        webSocket = new WebSocket(\\\"wss://socket.triathlon.org/twitter\\\");\\n\\n        webSocket.onopen = function(event){\\n            console.log('Websocket connection open');\\n        };\\n\\n        webSocket.onmessage = function(event){\\n            var e = jQuery.parseJSON( event.data );\\n            $(\\\"tr#waiting\\\").hide();\\n            console.log(e);\\n\\n            var t = e.created_at,\\n                n = moment(t).format(\\\"h:mm a\\\"),\\n                p = \\\"<img width='32px' height='32px' src='\\\" + e.user.profile_image_url + \\\"'/>\\\";\\n                r = \\\"<tr><td>\\\" + n + \\\"</td><td>\\\" + e.user.name + \\\"</td><td>\\\" + p + \\\"</td><td>\\\" + e.tweet + \\\"</td><td>\\\" + e.source + \\\"</td></tr>\\\";\\n\\n            $(\\\"#timing_table tbody\\\").prepend(r);\\n\\n        };\\n    }\\n\\n    //Open the socket\\n    openSocket();\\n</script>\\n</body>\\n</html>\",\n      \"language\": \"html\",\n      \"gist\": \"bf1bb21642bc3c4d984b\"\n    }\n  ]\n}\n[/block]\nA simple example of using the Live Timing websocket feed is available[ here](https://github.com/World-Triathlon/World-Triathlon.github.io/blob/master/leaderboard-sample.html).","excerpt":"","slug":"using-the-websocket-api","type":"basic","title":"Using the Streaming API"}

Using the Streaming API


The **Streaming API** allows developers to integrate real-time streaming data into their applications. Live results and twitter commentary are delivered via a websocket connection for all supported live events. [block:api-header] { "type": "basic", "title": "Sample Twitter Stream" } [/block] A simple example of using the Twitter Stream is available[ here](https://world-triathlon.github.io/twitter-sample.html). [block:code] { "codes": [ { "code": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Streaming API Websocket Twitter Example</title>\n <meta name=\"description\" content=\"Streaming API Websocket Twitter Example\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css\">\n <!--[if lt IE 9]>\n <script src=\"//html5shiv.googlecode.com/svn/trunk/html5.js\"></script>\n <![endif]-->\n</head>\n<body>\n<div class=\"container\">\n <h1>Streaming API Websocket Twitter Example</h1>\n <div class=\"row\">\n <div class=\"col-md-12\">\n <h2>Latest Tweets</h2>\n <table class=\"table table-bordered table-hover table-striped\" id=\"timing_table\">\n <thead>\n <tr>\n <th>Time</th>\n <th>User</th>\n <th>Profile Image</th>\n <th>Tweet</th>\n <th>Source</th>\n </tr>\n </thead>\n <tbody>\n <tr id=\"waiting\">\n <td colspan=\"6\">Waiting for the next tweet to arrive...</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <p>This code is for demonstration purposes and should not be used in a production environment.</p>\n</div>\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js\"></script>\n<!-- Script to utilise the WebSocket -->\n<script type=\"text/javascript\">\n var webSocket;\n\n function openSocket(){\n // Ensures only one connection is open at a time\n if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){\n writeResponse(\"WebSocket is already opened.\");\n return;\n }\n\n // Create a new instance of the websocket\n webSocket = new WebSocket(\"wss://socket.triathlon.org/twitter\");\n\n webSocket.onopen = function(event){\n console.log('Websocket connection open');\n };\n\n webSocket.onmessage = function(event){\n var e = jQuery.parseJSON( event.data );\n $(\"tr#waiting\").hide();\n console.log(e);\n\n var t = e.created_at,\n n = moment(t).format(\"h:mm a\"),\n p = \"<img width='32px' height='32px' src='\" + e.user.profile_image_url + \"'/>\";\n r = \"<tr><td>\" + n + \"</td><td>\" + e.user.name + \"</td><td>\" + p + \"</td><td>\" + e.tweet + \"</td><td>\" + e.source + \"</td></tr>\";\n\n $(\"#timing_table tbody\").prepend(r);\n\n };\n }\n\n //Open the socket\n openSocket();\n</script>\n</body>\n</html>", "language": "html", "gist": "bf1bb21642bc3c4d984b" } ] } [/block] A simple example of using the Live Timing websocket feed is available[ here](https://github.com/World-Triathlon/World-Triathlon.github.io/blob/master/leaderboard-sample.html).