• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 637
  • Last Modified:

Html5 WebSockets

I have Uploaded a project which works only in "Safari" browser though Google Chrome and Firefox supports "WebSockets". The server is running fine only problem is browser compactibility.The "stock ticker" project is as follows....

<!doctype html>
<html>
      <head>
            <title>Web Sockets: Stock Ticker</title>
        <link rel="Stylesheet" href="/global.css" type="text/css" />
        <style>
        .stock span
        {
            margin:6px;
        }
       
        .container
        {
            background: #fff none;
            border: 1px solid #000;
            height: 30px;
            margin: 0 auto;
            width: 655px;
        }

        .container .wrap
        {
            width: 640px;
            left: 10px;
            top: 10px;
            overflow: hidden;
            position: relative;
            line-height: normal;
            font-size-adjust: none;
        }

        div.stockTicker {
            font-family: Verdana, Arial, Helvetica, San-serif;
            font-size: x-small;
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        div.stockTicker span {
            margin: 0 10px 0;
        }

        div.stockTicker span.up {
            color: green;
            padding-left: 2px;
        }

        div.stockTicker span.down {
            color: red;
            margin: 0;
            padding-left: 10px;
        }

        div.stockTicker span.eq {
            margin: 0;
            padding-left: 10px;
        }

        div.stockTicker span.quote {
            margin: 0;
            font-weight: bold;
            padding-left: 10px;
        }
       
        </style>
      </head>
      <body>
        <div id="container">
            <h1>WebSocket Stock Ticker</h1>
            <div id="stocks" class="stockTicker"></div>
            <ul id="log"></ul>
        </div>
      </body>
    <script src="../scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="../scripts/jquery.jstockticker-1.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            function logMsg(message) {
                $("#log").append("<li>" + message + "</li>");
            }

            var stocks = $("#stocks");
            function addStock(stock) {

                var class1 = (stock.IsUp) ? "up" : "down";

                stocks.append('' +
                    '<span class="stock ' + class1 + '">' +
                        '<span class="symbol">' + stock.Symbol.toUpperCase() + '</span>' +
                        '<span class="value">$' + stock.Value + '</span>' +
                        '<span class="percentChange">' + stock.PercentChange + '%</span>' +
                    '</span>');
            }

            logMsg("Attempting to connect to socket server");

            var server = new WebSocket("ws://localhost:8181/stocks");
            server.addEventListener("message", messageHandler, false);
            server.addEventListener("open", openHandler, false);
            server.addEventListener("close", closeHandler, false);
            server.addEventListener("error", errorHandler, false);

            function openHandler(e) {
                logMsg("Connection opened");
            }

            function closeHandler(e) {
                logMsg("Connection closed");
            }

            function messageHandler(e) {
                var stock = JSON.parse(e.data);
                addStock(stock);
            }

            function errorHandler(e) {
                logMsg("Error: " + e);
            }

            $("#stocks").jStockTicker({ interval: 45 });
        });
    </script>
</html>
0
fxcentral
Asked:
fxcentral
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
If it helps any, here's the Mozilla / Firefox page about it: https://developer.mozilla.org/en-US/docs/WebSockets/Writing_WebSocket_client_applications
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now