updated webapp.html + ajax

10 years ago · 54c2c0e754
2 changed files with 191 additions and 3 deletions
--- a/meshenger_clientserve.py
+++ b/meshenger_clientserve.py
@ -12,16 +12,23 @@ import unicodedata

 class ClientServeHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):

-  messageDir = "msg"
+  messageDir = "/msg"

  """
  Serve index and messages
  """
  def do_GET(self):
+
    if self.path == '/':
-      self.path = "/index"
+      self.send_response(200)
+      self.send_header('Content-type', 'text/html')
+      self.end_headers()
+
+      f = os.path.join( "webapp.html")
+      with open( f, 'r') as the_file:
+        self.wfile.write(the_file.read())

-    if self.path == '/index' or self.path.startswith( self.messageDir ):
+    elif self.path == '/index' or self.path.startswith( self.messageDir ):
      return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)

    else:
--- a/webapp.html
+++ b/webapp.html
@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="cache-control" content="max-age=0" />
+		<meta http-equiv="cache-control" content="no-cache" />
+		<meta http-equiv="expires" content="0" />
+		<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+		<meta http-equiv="pragma" content="no-cache" />
+		<meta name="viewport" content="width=device-width, user-scalable=no">
+		<title>meshed up</title>
+	</head>
+
+	<body>
+		<h2>message</h2>
+		<textarea id="message" rows="3" style="width:100%"></textarea>
+		<button style="width:100%" id="send">Send</button>
+		<h2>outbox</h2>
+		<ul id="outbox"></ul>
+		<h2>inbox</h2>
+		<ul id="inbox"></ul>
+
+<script type="text/javascript">
+
+/*
+ * OUTBOX STUFF
+ */
+document.getElementById( 'send' ).onclick = function() {
+
+	var outStr = localStorage.getItem( 'outbox' ) || '';
+	outStr += new Date().getTime() + ' ' + document.getElementById('message').value + '\n';
+	localStorage.setItem( 'outbox', outStr );
+	updateOutboxView();
+	checkOutbox();
+	document.getElementById('message').value = '';
+	//localStorage.setItem(
+	//	new Date().getTime(),
+	//	document.getElementById('message').value );
+	//updateList();
+};
+function checkOutbox() {
+	var outStr = localStorage.getItem( 'outbox' );
+	if ( ! outStr ) {
+		return;
+	}
+	var lines = outStr.split( /\n/ );
+	for ( var i in lines ) {
+		if ( lines[i].length === 0 ) {
+			continue;
+		}
+		var ts = lines[ i ].substr( 0, lines[ i ].indexOf( ' ' ));
+		var msg = lines[ i ].substr( lines[ i ].indexOf( ' ' ));
+		sendMessage( ts, msg );
+	}
+}
+function sendMessage( timestamp, message ) {
+	var xhr = new XMLHttpRequest();
+	var data = 'time=' + encodeURIComponent( timestamp ) +
+		'&message=' + encodeURIComponent( message );
+
+	xhr.onreadystatechange = function(){
+	 	if ( xhr.readyState == 4){
+	  		if ( xhr.status == 200 ) {
+	   			removeOutboxItem( timestamp );
+	  		}
+ 		}
+	};
+
+	xhr.open('POST', 'send', true);
+	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+	xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT');
+	xhr.send(data);
+}
+function removeOutboxItem( timestamp ) {
+	var outStr = localStorage.getItem( 'outbox' ) || '';
+	var lines = outStr.split( /\n/ );
+	for ( var i in lines ) {
+		var ts = lines[ i ].substr( 0, lines[ i ].indexOf( ' ' ));
+		if ( ts === timestamp ) {
+			lines.splice( i, 1 );
+			break;
+		}
+	}
+	var newOutStr = lines.join('\n');
+	localStorage.setItem('outbox', newOutStr);
+	updateOutboxView();
+}
+function updateOutboxView() {
+	var contentString = '';
+	var outStr = localStorage.getItem( 'outbox' ) || '';
+	var lines = outStr.split( /\n/ );
+	for ( var i in lines ) {
+		if ( lines[ i ].length === 0 ) {
+			continue;
+		}
+		var ts = lines[ i ].substr( 0, lines[ i ].indexOf( ' ' ));
+		var msg = lines[ i ].substr( lines[ i ].indexOf( ' ' ));
+		contentString += '<li><b>' + ts + ' </b>' + msg + '</li>';
+	}
+	document.getElementById( 'outbox' ).innerHTML = contentString;
+}
+
+function doStuffForEach( entriesString, stuffFunction ) {
+	if ( ! entriesString ) {
+		return;
+	}
+	var lines = entriesString.split( /\n/ );
+	for ( var i in lines ) {
+		var ts = lines[ i ].substr( 0, lines[ i ].indexOf( ' ' ));
+		var msg = lines[ i ].substr( lines[ i ].indexOf( ' ' ) + 1 );
+		stuffFunction( ts, msg );
+	}
+}
+/*
+ * INBOX STUFF
+ */
+function updateInboxView() {
+
+	var contentString = '';
+	for(var i in localStorage)
+	{
+		if ( i.length === 0 || i === 'outbox' ) {
+			continue;
+		}
+		contentString += '<li><b>' + i + ' </b>' + localStorage[i] + '</li>';
+	}
+	document.getElementById( 'inbox' ).innerHTML = contentString;
+}
+
+function onMessageDownload( msg, filename ) {
+	if ( localStorage.getItem( filename ) === null ) {
+		localStorage.setItem( filename, msg );
+	}
+	updateInboxView();
+}
+function onIndex( index ) {
+	var lines = index.split( /\n/ );
+	for ( var i in lines ) {
+		var fname = lines[i];
+		if ( localStorage.getItem( fname ) === null ) {
+			//localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
+			downloadMessage( fname );
+		}
+	}
+}
+function downloadMessage(filename) {
+	var xhr = new XMLHttpRequest();
+	xhr.onreadystatechange = function(){
+			if (xhr.readyState == 4 && xhr.status == 200){
+					onMessageDownload( xhr.responseText, filename );
+			}
+	}
+	xhr.open( "GET", 'msg/'+filename, true);
+	xhr.send();
+
+}
+function checkInbox() {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function(){
+        if (xhr.readyState == 4 && xhr.status == 200){
+            onIndex( xhr.responseText );
+        }
+    }
+    xhr.open( "GET", 'index', true);
+    xhr.send();
+}
+
+/*
+ * INIT
+ */
+
+updateInboxView();
+updateOutboxView();
+window.setInterval( function(){
+	checkInbox();
+	checkOutbox();
+}, 10000 );
+
+</script>
+
+	</body>
+</html>