asked on

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>

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial