scripting/river5socketdemo.html

## river5socketdemo.html
<html>
	<head>
		<title>River5 websockets demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- app is live here: http://rss2.io/code/socketdemo/ -->

		<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
		<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
		<script src="http://fargo.io/code/bootstrap.min.js"></script>
		<script src="http://fargo.io/code/node/shared/utils.js"></script>

		<script>
			var urlMySocket = "ws://river5.scripting.com:1338/";
			var mySocket = undefined;

			var myStatus = {
				lastMessageText: "",
				ctMessages: 0
				};

			function startWebSocketClient (s) {
				console.log ("startWebSocketClient: urlMySocket == " + urlMySocket);
				mySocket = new WebSocket (urlMySocket);
				mySocket.onopen = function (evt) {
					console.log ("startWebSocketClient: sending: " + s);
					mySocket.send (s);
					};
				mySocket.onmessage = function (evt) {
					var eventData = evt.data.toString ();
					var words = eventData.split (" ");
					console.log ("startWebSocketClient: received message == " + eventData);
					if (words.length >= 2) {
						switch (words [0]) {
							case "updated":
								var listname = trimWhitespace (words [1]);
								console.log ("updated " + listname);
								break;
							case "readfeed":
								var urlfeed = trimWhitespace (words [1]);
								console.log ("readfeed " + urlfeed);
								break;
							case "item":
								var jsontext = stringDelete (eventData, 1, 5); //pop off "item "
								myStatus.lastMessageText = jsontext;
								myStatus.ctMessages++;
								localStorage.myStatus = jsonStringify (myStatus);
								$("#idJsonText").text (myStatus.lastMessageText);
								break;
							default:
								console.log (words [0] + words [1]);
								break;
							}
						}

					};
				mySocket.onclose = function (evt) {
					console.log ("mySocket was closed.");
					mySocket = undefined;
					};
				mySocket.onerror = function (evt) {
					console.log ("mySocket received an error");
					};
				}
			function everySecond () {
				if (mySocket === undefined) { //try to open the connection
					startWebSocketClient ("hello world");
					}
				}
			function startup () {
				console.log ("startup");
				if (localStorage.myStatus !== undefined) {
					myStatus = JSON.parse (localStorage.myStatus);
					$("#idJsonText").text (myStatus.lastMessageText);
					}
				else {
					$("#idJsonText").text ("Waiting for a new story...");
					}
				self.setInterval (everySecond, 1000);
				}
			</script>
		<style>
			body {
				font-family: "Arial";
				font-size: 18px;
				background-color: white;
				}
			.divPageBody {
				width: 70%;
				margin-top: 70px;
				margin-left: auto;
				margin-right: auto;
				}
			p {
				font-family: "Georgia";
				font-size: 18px;
				line-height: 140%;
				margin-bottom: .5em;
				}
			pre {
				font-size: 13px;
				margin-top: 30px;
				}
			</style>
		</head>
	<body>
		<div class="divPageBody">
			<div class="divExplanation">
				<h2>River5 websockets demo</h2>
				<p>This is a simple WebSockets application that hooks up to my <a href="https://github.com/scripting/river5">River5</a> server, which is constantly scanning for new items in the feeds it follows. When a new story comes in, a JSON representation of the story goes out instantaneously over the socket. It's displayed below. Source <a href="https://gist.github.com/scripting/4d56250e2c5235663cb2136b1f0b2516">available</a> on GitHub. </p>
				</div>
			<pre id="idJsonText">
				</pre>
			</div>
		<script>
			$(document).ready (function () {
				startup ();
				});
			</script>
		</body>
	</html>
	<html>
	<head>
	<title>River5 websockets demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- app is live here: http://rss2.io/code/socketdemo/ -->

	<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
	<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
	<script src="http://fargo.io/code/bootstrap.min.js"></script>
	<script src="http://fargo.io/code/node/shared/utils.js"></script>

	<script>
	var urlMySocket = "ws://river5.scripting.com:1338/";
	var mySocket = undefined;

	var myStatus = {
	lastMessageText: "",
	ctMessages: 0
	};

	function startWebSocketClient (s) {
	console.log ("startWebSocketClient: urlMySocket == " + urlMySocket);
	mySocket = new WebSocket (urlMySocket);
	mySocket.onopen = function (evt) {
	console.log ("startWebSocketClient: sending: " + s);
	mySocket.send (s);
	};
	mySocket.onmessage = function (evt) {
	var eventData = evt.data.toString ();
	var words = eventData.split (" ");
	console.log ("startWebSocketClient: received message == " + eventData);
	if (words.length >= 2) {
	switch (words [0]) {
	case "updated":
	var listname = trimWhitespace (words [1]);
	console.log ("updated " + listname);
	break;
	case "readfeed":
	var urlfeed = trimWhitespace (words [1]);
	console.log ("readfeed " + urlfeed);
	break;
	case "item":
	var jsontext = stringDelete (eventData, 1, 5); //pop off "item "
	myStatus.lastMessageText = jsontext;
	myStatus.ctMessages++;
	localStorage.myStatus = jsonStringify (myStatus);
	$("#idJsonText").text (myStatus.lastMessageText);
	break;
	default:
	console.log (words [0] + words [1]);
	break;
	}
	}

	};
	mySocket.onclose = function (evt) {
	console.log ("mySocket was closed.");
	mySocket = undefined;
	};
	mySocket.onerror = function (evt) {
	console.log ("mySocket received an error");
	};
	}
	function everySecond () {
	if (mySocket === undefined) { //try to open the connection
	startWebSocketClient ("hello world");
	}
	}
	function startup () {
	console.log ("startup");
	if (localStorage.myStatus !== undefined) {
	myStatus = JSON.parse (localStorage.myStatus);
	$("#idJsonText").text (myStatus.lastMessageText);
	}
	else {
	$("#idJsonText").text ("Waiting for a new story...");
	}
	self.setInterval (everySecond, 1000);
	}
	</script>
	<style>
	body {
	font-family: "Arial";
	font-size: 18px;
	background-color: white;
	}
	.divPageBody {
	width: 70%;
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	}
	p {
	font-family: "Georgia";
	font-size: 18px;
	line-height: 140%;
	margin-bottom: .5em;
	}
	pre {
	font-size: 13px;
	margin-top: 30px;
	}
	</style>
	</head>
	<body>
	<div class="divPageBody">
	<div class="divExplanation">
	<h2>River5 websockets demo</h2>
	<p>This is a simple WebSockets application that hooks up to my <a href="https://github.com/scripting/river5">River5</a> server, which is constantly scanning for new items in the feeds it follows. When a new story comes in, a JSON representation of the story goes out instantaneously over the socket. It's displayed below. Source <a href="https://gist.github.com/scripting/4d56250e2c5235663cb2136b1f0b2516">available</a> on GitHub. </p>
	</div>
	<pre id="idJsonText">
	</pre>
	</div>
	<script>
	$(document).ready (function () {
	startup ();
	});
	</script>
	</body>
	</html>