nbogie/CrapJsonWebsocketClient.html

## CrapJsonWebsocketClient.html
<html>
  <!-- for use with equally crap server at https://gist.github.com/821606 -->
  <!-- you'll need jquery and flot -->

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Flot Log presenter with External json file</title>
    <link href="./clientsupport/layout.css" rel="stylesheet" type="text/css">
    <script language="javascript" type="text/javascript" src="./clientsupport/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./clientsupport/jquery.flot.js"></script>
 </head>
<body>
  <h1>Websocket client with flot charting</h1>

  <div id="neilllog" style="width: 600px; height: 100px; position: relative; background: orange">
    clickdata comes here
  </div>

  <div id="flot_placeholder" style="width: 600px; height: 300px; position: relative; ">
    <canvas width="600" height="30" style="position: absolute; left: 0px; top: 0px; "></canvas>
  </div>

  <p>Actions:
    <button id="button1">Button 1</button></p>

<script id="source">

$(function () {
  var socket = new WebSocket('ws://localhost:12345');

  socket.onopen = function(event) {
    socket.send('Hello from flot client.  Gimme json time series data to plot please.');
  };

  socket.onclose = function(event) { alert('websocket closed'); }

  socket.onmessage = function(event) {
    var thejson = JSON.parse(event.data);
    var td = thejson.timedata;
    var plot = $.plot($("#flot_placeholder"), [td], {
        xaxis: {
          mode: "time" ,
        },
        grid: { hoverable: true, clickable: true },
        series: { points: { show: true }}
      });
    var series = plot.getData();
    $("#logseriescount").text(series.length);
    $("#loglinecount").text(series[0].data.length);
    socket.send("more");
  }

  $("#button1").click(function () {
    alert("clicked");
    socket.send("button clicked");
  });

});

</script>

A simple websocket client which expects json for flot visualization in each message.

</body></html>
	<html>
	<!-- for use with equally crap server at https://gist.github.com/821606 -->
	<!-- you'll need jquery and flot -->

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Flot Log presenter with External json file</title>
	<link href="./clientsupport/layout.css" rel="stylesheet" type="text/css">
	<script language="javascript" type="text/javascript" src="./clientsupport/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="./clientsupport/jquery.flot.js"></script>
	</head>
	<body>
	<h1>Websocket client with flot charting</h1>

	<div id="neilllog" style="width: 600px; height: 100px; position: relative; background: orange">
	clickdata comes here
	</div>

	<div id="flot_placeholder" style="width: 600px; height: 300px; position: relative; ">
	<canvas width="600" height="30" style="position: absolute; left: 0px; top: 0px; "></canvas>
	</div>

	<p>Actions:
	<button id="button1">Button 1</button></p>

	<script id="source">

	$(function () {
	var socket = new WebSocket('ws://localhost:12345');

	socket.onopen = function(event) {
	socket.send('Hello from flot client. Gimme json time series data to plot please.');
	};

	socket.onclose = function(event) { alert('websocket closed'); }

	socket.onmessage = function(event) {
	var thejson = JSON.parse(event.data);
	var td = thejson.timedata;
	var plot = $.plot($("#flot_placeholder"), [td], {
	xaxis: {
	mode: "time" ,
	},
	grid: { hoverable: true, clickable: true },
	series: { points: { show: true }}
	});
	var series = plot.getData();
	$("#logseriescount").text(series.length);
	$("#loglinecount").text(series[0].data.length);
	socket.send("more");
	}

	$("#button1").click(function () {
	alert("clicked");
	socket.send("button clicked");
	});

	});

	</script>

	A simple websocket client which expects json for flot visualization in each message.

	</body></html>