Html5 WebSockets

Posted on 2012-08-22
Medium Priority
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(e.data);

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

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

Accepted Solution

Dave Baldwin earned 1500 total points
ID: 38323634
If it helps any, here's the Mozilla / Firefox page about it: https://developer.mozilla.org/en-US/docs/WebSockets/Writing_WebSocket_client_applications

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Suggested Courses
Course of the Month17 days, 8 hours left to enroll

831 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