fryguy1013 · April 30, 2012 22:32
diff --git a/realtime.html b/realtime.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>

 <title>Test</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 	
 <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
 <script type="text/javascript" src="http://jquery-websocket.googlecode.com/files/jquery.websocket-0.0.1.js"></script>

 <script type="text/javascript">
 (function($){
 $.extend({
 	websocketSettings: {
 		open: function(){},
 		close: function(){},
 		message: function(e){},
 		options: {},
 		events: {}
 	},
 	websocket: function(url, s) {
 		var ws = WebSocket ? new WebSocket( url ) : {
 			send: function(m){ return false },
 			close: function(){}
 		};
 		ws._settings = $.extend({}, $.websocketSettings, s);
 		ws._send = ws.send;
 		
 		ws.onopen = ws._settings.open;
 		ws.onclose = ws._settings.close;
 		ws.onmessage = function(e)
 		{
            ws._settings.message(e);
            var m = $.evalJSON(e.data);
            var h = ws._settings.events[m.type];
            if (h) h.call(this, m);		
 		};
 		
 		ws.send = function(type, data) {
 			var m = {type: type};
 			m = $.extend(true, m, $.extend(true, {}, $.websocketSettings.options, m));
 			if (data) m['data'] = data;
 			return this._send($.toJSON(m));
 		}
 		$(window).unload(function(){ ws.close(); ws = null });
 		return ws;
 	}
 });
 })(jQuery);


 var ctx;
 function initCanvas ()
 {
    // Try to access the canvas element and throw an error if it isn't available
    var cv = $("#graph").get(0);
    if (!cv)  
        return;

    // Try to get a 2D context for the canvas and throw an error if unable to
    ctx = cv.getContext('2d');
    if (!ctx)
        return;
 }

 var xOffset = 30;
 var MAX_DATA_POINTS = 81;
 var CHART_WIDTH = 600;
 var CHART_HEIGHT = 300;
 var widthPerSample = CHART_WIDTH / (MAX_DATA_POINTS - 1);
 var chartData = [];
 function updateChart()
 {
    ctx.clearRect(0, 0,CHART_WIDTH, CHART_HEIGHT);

    // draw border
    ctx.lineWidth = 2;
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.strokeRect(0, 0, CHART_WIDTH, CHART_HEIGHT);
    
    // draw the hash lines
    ctx.lineWidth = .5;
    for (var i=10; i<100; i+=10)
    {
        ctx.strokeStyle = "rgb(192, 192, 192)";
        var yPos = CHART_HEIGHT - 3*i;
        ctx.beginPath();
        ctx.moveTo(0, yPos);
        ctx.lineTo(CHART_WIDTH, yPos);
        ctx.stroke();
        
        ctx.strokeStyle = "rgb(64, 64, 64)";
        ctx.textBaseline = "middle";
        ctx.fillText(i + '%', 10, yPos);
    }
    
    // draw the data points
    ctx.lineWidth = 2;
    ctx.strokeStyle = "rgb(200,0,0)";
    
    ctx.beginPath();
    var xPos = (MAX_DATA_POINTS - chartData.length) * widthPerSample;
    ctx.moveTo(xPos, CHART_HEIGHT - chartData[0] * 3);
    for (var i=1; i<chartData.length; i++)
    {
        xPos += widthPerSample;
        ctx.lineTo(xPos, CHART_HEIGHT - chartData[i] * 3);
    }
    ctx.stroke();
    
    //ctx.fillRect(10, 10, 100, 100);
 }

 var socket = null;

 function submitValue()
 {
    socket.send('test', { text: $('#data').val() });
    $('#data').val('');
    $('#data').focus();
 }

 $(document).ready(function () {
    $('#status').html('connecting');
    socket = $.websocket("ws://fryguy.selfip.net:8181/test", {
        open: function() {
            $('#status').html('connected');
        },
        close: function() {
            $('#status').html('disconnected');
        },
        events: {
            chat_message: function(e) {
                $('#messages').append('<li>' + e.value + '</li>');
            },
            periodic_data: function(e) {
                chartData.push(e.value);
                if (chartData.length > MAX_DATA_POINTS)
                    chartData.shift();
                updateChart();
            },
            connected_users: function(e) {
                $('#connected_users').html(e.value);
            }
        }
    });
    
    $('#send_msg').click(submitValue);
    
    $(document).bind("keydown", function (e) {
        var key = e.keyCode || e.which;
        if (key === 13)
            submitValue();
    });
    
    initCanvas();
 });
 </script>
 </head>
 <body>

 <div>Status: <span id="status">n/a</span></div>
 <div>Number of users: <span id="connected_users">n/a</span></div>

 <div>
    <input type="text" id="data" size="10">
    <input type="button" id="send_msg" value="Send Message">
 </div>

 <div>
    <canvas id="graph" width="600" height="300">Your browser does not support canvas. Sorry.</canvas>
 </div>

 <ul id="messages"></ul>
 <ul id="errors"></ul>

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>

	<title>Test</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
	<script type="text/javascript" src="http://jquery-websocket.googlecode.com/files/jquery.websocket-0.0.1.js"></script>

	<script type="text/javascript">
	(function($){
	$.extend({
	websocketSettings: {
	open: function(){},
	close: function(){},
	message: function(e){},
	options: {},
	events: {}
	},
	websocket: function(url, s) {
	var ws = WebSocket ? new WebSocket( url ) : {
	send: function(m){ return false },
	close: function(){}
	};
	ws._settings = $.extend({}, $.websocketSettings, s);
	ws._send = ws.send;

	ws.onopen = ws._settings.open;
	ws.onclose = ws._settings.close;
	ws.onmessage = function(e)
	{
	ws._settings.message(e);
	var m = $.evalJSON(e.data);
	var h = ws._settings.events[m.type];
	if (h) h.call(this, m);
	};

	ws.send = function(type, data) {
	var m = {type: type};
	m = $.extend(true, m, $.extend(true, {}, $.websocketSettings.options, m));
	if (data) m['data'] = data;
	return this._send($.toJSON(m));
	}
	$(window).unload(function(){ ws.close(); ws = null });
	return ws;
	}
	});
	})(jQuery);


	var ctx;
	function initCanvas ()
	{
	// Try to access the canvas element and throw an error if it isn't available
	var cv = $("#graph").get(0);
	if (!cv)
	return;

	// Try to get a 2D context for the canvas and throw an error if unable to
	ctx = cv.getContext('2d');
	if (!ctx)
	return;
	}

	var xOffset = 30;
	var MAX_DATA_POINTS = 81;
	var CHART_WIDTH = 600;
	var CHART_HEIGHT = 300;
	var widthPerSample = CHART_WIDTH / (MAX_DATA_POINTS - 1);
	var chartData = [];
	function updateChart()
	{
	ctx.clearRect(0, 0,CHART_WIDTH, CHART_HEIGHT);

	// draw border
	ctx.lineWidth = 2;
	ctx.strokeStyle = "rgb(0,0,0)";
	ctx.strokeRect(0, 0, CHART_WIDTH, CHART_HEIGHT);

	// draw the hash lines
	ctx.lineWidth = .5;
	for (var i=10; i<100; i+=10)
	{
	ctx.strokeStyle = "rgb(192, 192, 192)";
	var yPos = CHART_HEIGHT - 3*i;
	ctx.beginPath();
	ctx.moveTo(0, yPos);
	ctx.lineTo(CHART_WIDTH, yPos);
	ctx.stroke();

	ctx.strokeStyle = "rgb(64, 64, 64)";
	ctx.textBaseline = "middle";
	ctx.fillText(i + '%', 10, yPos);
	}

	// draw the data points
	ctx.lineWidth = 2;
	ctx.strokeStyle = "rgb(200,0,0)";

	ctx.beginPath();
	var xPos = (MAX_DATA_POINTS - chartData.length) * widthPerSample;
	ctx.moveTo(xPos, CHART_HEIGHT - chartData[0] * 3);
	for (var i=1; i<chartData.length; i++)
	{
	xPos += widthPerSample;
	ctx.lineTo(xPos, CHART_HEIGHT - chartData[i] * 3);
	}
	ctx.stroke();

	//ctx.fillRect(10, 10, 100, 100);
	}

	var socket = null;

	function submitValue()
	{
	socket.send('test', { text: $('#data').val() });
	$('#data').val('');
	$('#data').focus();
	}

	$(document).ready(function () {
	$('#status').html('connecting');
	socket = $.websocket("ws://fryguy.selfip.net:8181/test", {
	open: function() {
	$('#status').html('connected');
	},
	close: function() {
	$('#status').html('disconnected');
	},
	events: {
	chat_message: function(e) {
	$('#messages').append('<li>' + e.value + '</li>');
	},
	periodic_data: function(e) {
	chartData.push(e.value);
	if (chartData.length > MAX_DATA_POINTS)
	chartData.shift();
	updateChart();
	},
	connected_users: function(e) {
	$('#connected_users').html(e.value);
	}
	}
	});

	$('#send_msg').click(submitValue);

	$(document).bind("keydown", function (e) {
	var key = e.keyCode \|\| e.which;
	if (key === 13)
	submitValue();
	});

	initCanvas();
	});
	</script>
	</head>
	<body>

	<div>Status: <span id="status">n/a</span></div>
	<div>Number of users: <span id="connected_users">n/a</span></div>

	<div>
	<input type="text" id="data" size="10">
	<input type="button" id="send_msg" value="Send Message">
	</div>

	<div>
	<canvas id="graph" width="600" height="300">Your browser does not support canvas. Sorry.</canvas>
	</div>

	<ul id="messages"></ul>
	<ul id="errors"></ul>

	</body>
	</html>