fryguy1013/realtime.html

## 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>