Html5 WebSockets

Posted on 2012-08-22
Last Modified: 2012-09-26
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>
            <title>Web Sockets: Stock Ticker</title>
        <link rel="Stylesheet" href="/global.css" type="text/css" />
        .stock span
            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;
        <div id="container">
            <h1>WebSocket Stock Ticker</h1>
            <div id="stocks" class="stockTicker"></div>
            <ul id="log"></ul>
    <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>' +

            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(;

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

            $("#stocks").jStockTicker({ interval: 45 });
Question by:fxcentral
    1 Comment
    LVL 82

    Accepted Solution

    If it helps any, here's the Mozilla / Firefox page about it:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Suggested Solutions

    Navigation is an important part of web design from a usability perspective. But it is often a pain when it comes to a developer’s perspective. By navigation, it often means menuing. This is less theory and more practical of how to get a specific gro…
    It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now