garethtdavies · December 2, 2015 19:47
diff --git a/streaming-api-websocket.html b/streaming-api-websocket.html
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>Streaming API Websocket Twitter Example</title>
    <meta name="description" content="Streaming API Websocket Twitter Example">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 </head>
 <body>
 <div class="container">
    <h1>Streaming API Websocket Twitter Example</h1>
    <div class="row">
        <div class="col-md-12">
            <h2>Latest Tweets</h2>
            <table class="table table-bordered table-hover table-striped" id="trade_table">
                <thead>
                <tr>
                    <th>Time</th>
                    <th>User</th>
                    <th>Profile Image</th>
                    <th>Tweet</th>
                    <th>Source</th>
                </tr>
                </thead>
                <tbody>
                <tr id="waiting">
                    <td colspan="6">Waiting for the next tweet to arrive...</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <p>This code is for demonstration purposes and should not be used in a production environment.</p>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
 <!-- Script to utilise the WebSocket -->
 <script type="text/javascript">
    var webSocket;

    function openSocket(){
        // Ensures only one connection is open at a time
        if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
            writeResponse("WebSocket is already opened.");
            return;
        }

        // Create a new instance of the websocket
        webSocket = new WebSocket("wss://socket.triathlon.org/twitter");

        webSocket.onopen = function(event){
            console.log('Websocket connection open');
        };

        webSocket.onmessage = function(event){
            var e = jQuery.parseJSON( event.data );
            $("tr#waiting").hide();
            console.log(e);

            var t = e.created_at,
                n = moment(t).format("h:mm a"),
                p = "<img width='32px' height='32px' src='" + e.user.profile_image_url + "'/>";
                r = "<tr><td>" + n + "</td><td>" + e.user.name + "</td><td>" + p + "</td><td>" + e.tweet + "</td><td>" + e.source + "</td></tr>";

            $("#trade_table tbody").prepend(r);

        };
    }

    //Open the socket
    openSocket();
 </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Streaming API Websocket Twitter Example</title>
	<meta name="description" content="Streaming API Websocket Twitter Example">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<div class="container">
	<h1>Streaming API Websocket Twitter Example</h1>
	<div class="row">
	<div class="col-md-12">
	<h2>Latest Tweets</h2>
	<table class="table table-bordered table-hover table-striped" id="trade_table">
	<thead>
	<tr>
	<th>Time</th>
	<th>User</th>
	<th>Profile Image</th>
	<th>Tweet</th>
	<th>Source</th>
	</tr>
	</thead>
	<tbody>
	<tr id="waiting">
	<td colspan="6">Waiting for the next tweet to arrive...</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<p>This code is for demonstration purposes and should not be used in a production environment.</p>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
	<!-- Script to utilise the WebSocket -->
	<script type="text/javascript">
	var webSocket;

	function openSocket(){
	// Ensures only one connection is open at a time
	if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
	writeResponse("WebSocket is already opened.");
	return;
	}

	// Create a new instance of the websocket
	webSocket = new WebSocket("wss://socket.triathlon.org/twitter");

	webSocket.onopen = function(event){
	console.log('Websocket connection open');
	};

	webSocket.onmessage = function(event){
	var e = jQuery.parseJSON( event.data );
	$("tr#waiting").hide();
	console.log(e);

	var t = e.created_at,
	n = moment(t).format("h:mm a"),
	p = "<img width='32px' height='32px' src='" + e.user.profile_image_url + "'/>";
	r = "<tr><td>" + n + "</td><td>" + e.user.name + "</td><td>" + p + "</td><td>" + e.tweet + "</td><td>" + e.source + "</td></tr>";

	$("#trade_table tbody").prepend(r);

	};
	}

	//Open the socket
	openSocket();
	</script>
	</body>
	</html>