Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
This is a simple WebSockets application that hooks up to my River5 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.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment