samples/twitter-live-feed/src/main/webapp/index.html

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="javascript/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="javascript/atmosphere.js"></script>
    <script type="text/javascript" src="javascript/jquery.list.js"></script>
    <script type="text/javascript">
    $(function() {
        var socket = atmosphere;
        var subSocket;

        function getKeyCode(ev) {
            if (window.event) return window.event.keyCode;
            return ev.keyCode;
        }

        function getElementById(id) {
            return document.getElementById(id);
        }

        function getTransport(t) {
            transport = t.options[t.selectedIndex].value;
            if (transport == 'autodetect') {
                transport = 'websocket';
            }

            return false;
        }

        function getElementByIdValue(id) {
            return document.getElementById(id).value;
        }

        function subscribe() {
            var request = { url : document.location.toString() + 'search/' + getElementByIdValue('topic'),
                transport: getElementByIdValue('transport'),
                trackMessageLength : true
            };

            request.onMessage = function (response) {
                detectedTransport = response.transport;
                if (response.status == 200) {
                    var data = response.responseBody;

                    try {
                        var result = JSON.parse(data);

                        var i = 0;
                        for (i = result.statuses.length - 1; i > -1; i--) {
                            $('#result').prepend($('<li>').append($('<a>').append(result.statuses[i].text))).highlight(getElementById('topic').value);
                            $('#result').prepend($('<li>').append($('<h3>').append(result.statuses[i].from_user).append('</h3>')));
                        }
                    } catch (err) {
                        alert("Exception: " + err)
                    }
                }
            };

            subSocket = socket.subscribe(request);
        }

        function connect() {
            subscribe();
            getElementById('connect').value = "Switch transport";
        }

        function stop() {
            var request = { url : document.location.toString() + 'search/' + getElementByIdValue('topic') + "/stop" }
            // REVISIT this is not working
            socket.publish(request);
            // if we can push it this way for websocket but this cannot work either
            // as it won't find the target operation "stop"
            // subSocket.push(JSON.stringify(request));
        }

        getElementById('connect').onclick = function(event) {
            if (getElementById('topic').value == '') {
                alert("Please enter a hashtag");
                return;
            }
            connect();
        }

        getElementById('stop').onclick = function(event) {
            if (getElementById('topic').value == '') {
                alert("Please enter a hashtag");
                return;
            }
            stop();
        }

        getElementById('topic').onkeyup = function(event) {
            var keyc = getKeyCode(event);
            if (keyc == 13 || keyc == 10) {
                connect();
                return false;
            }
        }
        getElementById('topic').focus();
    });
    </script>
    <style type='text/css'>
    body {text-align: center;}
    div {border: 0px solid black;}
    .highlight {background-color: yellow}
    input#topic {width: 20em; height: 3em; font-size: 100%; background-color: #e0f0f0;}
    ul {list-style-type: none; text-align: left;}
    </style>
</head>
<body>
    <h1>Twitter Search using Atmosphere's JQuery Plug In</h1>
    <h2>Enter an hashtag</h2>
    <div id='pubsub'>
        <input id='topic' type='text'/>
    </div>
    <h2>Select transport to use for subscribing</h2>
    <h3>You can change the transport any time.</h3>
    <div id='select_transport'>
        <select id="transport">
            <option id="autodetect" value="websocket">autodetect</option>
            <option id="long-polling" value="long-polling">long-polling</option>
            <option id="streaming" value="streaming">http streaming</option>
            <option id="websocket" value="websocket">websocket</option>
        </select>
        <input id='connect' class='button' type='submit' name='connect' value='Get Real Time Tweet'/>
        <input id='stop' class='button' type='submit' name='stop' value='Stop Real Time Tweet'/>
    </div>
    <h2>Real Time Twitter Search</h2>
    <ul id="result"></ul>
</body>
</html>