From 2d823c8f8557f0a49e4307717e99a90b24052e9c Mon Sep 17 00:00:00 2001
From: lassulus <lassulus@googlemail.com>
Date: Fri, 8 Nov 2013 13:15:52 +0100
Subject: webchat: refactored code

---
 webchat/index.js            |  69 +++++++++++++++++++-------
 webchat/public/client.js    |  58 +++-------------------
 webchat/public/commands.js  |  25 ++++++++++
 webchat/public/functions.js | 117 ++++++++++++++++++++++++++++++++++++++++++++
 webchat/public/krebs.png    | Bin 956 -> 2583 bytes
 webchat/public/reset.css    |   6 +--
 6 files changed, 203 insertions(+), 72 deletions(-)
 create mode 100644 webchat/public/commands.js
 create mode 100644 webchat/public/functions.js

(limited to 'webchat')

diff --git a/webchat/index.js b/webchat/index.js
index 8ef737fc..d3bd0a71 100644
--- a/webchat/index.js
+++ b/webchat/index.js
@@ -11,6 +11,26 @@ Clients.broadcast = function(object) { //broadcast to all clients
   });
 }
 
+var serverCommands = {};
+
+serverCommands.say = function (settings, params) {
+  var nick = settings.nick || settings.conn.remoteAddress
+  var message = params.message
+  irc_client.say("#krebs", nick + ' → ' + message);
+  return Clients.broadcast({ type: 'message', nick: nick, message: message })
+}
+
+serverCommands.nick = function (settings, params) {
+  var oldnick = settings.nick || settings.conn.remoteAddress
+  var newnick = params.nick
+  settings.nick = newnick
+  return Clients.broadcast({ type: 'nickchange', nick: oldnick, newnick: newnick })
+}
+
+serverCommands.badcommand = function (settings, params) {
+  settings.conn.write(JSON.stringify({ type: 'usererror', message: 'bad command' }))
+}
+
 var irc_reconnect = function() { //reconnt to irc
   console.log("reconnecting due to pingtimeout");
   irc_client.disconnect();
@@ -45,10 +65,24 @@ irc_client.on('ping', function(server) { //restart timer on server ping
 
 irc_client.on('message#krebs', function(from, message) {
   console.log({ from: from, message: message });
-  Clients.broadcast({ from: from, message: message }); //broadcast irc messages to all connected clients
+  Clients.broadcast({ type: 'message', from: from, message: message }); //broadcast irc messages to all connected clients
   clearTimeout(lastping);
 });
 
+irc_client.on('names#krebs', function(nicks) {
+  Clients.broadcast({type: 'nicklist', message: nicks});
+});
+
+irc_client.on('join#krebs', function(nick, msg) {
+  if (nick !== 'kweb'){
+    Clients.broadcast({type: 'join', from: nick});
+  }
+});
+
+irc_client.on('part#krebs', function(nick, rs, msg) {
+  Clients.broadcast({type: 'quit', from: nick});
+});
+
 var web_serv_options = { //certificates for https
   key: fs.readFileSync(__dirname+'/local_config/server_npw.key'),
   cert: fs.readFileSync(__dirname+'/local_config/server.crt'),
@@ -57,26 +91,22 @@ var web_serv_options = { //certificates for https
 var echo = sockjs.createServer();
 echo.on('connection', function(conn) {
   var origin = conn.remoteAddress;
+  var settings = {
+    conn: conn
+  }
   Clients.push(conn);
-  Clients.broadcast({from: 'system', message: origin + ' has joined'})
+  Clients.broadcast({type: 'join', from: origin})
 //  irc_client.say("#krebs", origin + ' has joined');
-  conn.write(JSON.stringify({from: 'system', message: 'hello'})) //welcome message
+  if (typeof irc_client.chans['#krebs'] === 'object') {
+    conn.write(JSON.stringify({type: 'nicklist', message: irc_client.chans['#krebs'].users})); //send current nicklist
+  };
+  conn.write(JSON.stringify({type: 'message', from: 'system', message: 'hello' })) //welcome message
+  console.log(irc_client.chans['#krebs'])
   conn.on('data', function(data) {
     console.log('data:',data);
     try {
-      var object = JSON.parse(data);
-      if (object.message.length > 0) { //if message is not empty
-        if (/^\/nick\s+(.+)$/.test(object.message)) { //if nick is send use nick instead of ip
-          object.from = origin;
-        } else if (typeof object.nick === 'string') {
-          object.from = object.nick;
-        } else {
-          object.from = origin;
-        };
-        console.log(object.message);
-        irc_client.say("#krebs", object.from + ' → ' + object.message);
-        Clients.broadcast(object);
-      }
+      var command = JSON.parse(data);
+      return (serverCommands[command.method] || serverCommands.badcommand)(settings, command.params)
 
     } catch (error) {
       console.log(error);
@@ -84,7 +114,7 @@ echo.on('connection', function(conn) {
   });
   conn.on('close', function() { //propagate if client quits the page
   Clients.splice(Clients.indexOf(conn));
-  Clients.broadcast({from: 'system', message: origin + ' has quit'})
+  Clients.broadcast({type: 'quit', from: origin})
 //  irc_client.say("#krebs", origin + ' has quit');
 });
 });
@@ -99,6 +129,8 @@ var app = connect()
     page_template+='<link rel="stylesheet" type="text/css" href="reset.css">\n';
     page_template+='<script src="sockjs-0.3.min.js"></script>\n';
     page_template+='<script src="jquery-2.0.3.min.js"></script>\n';
+    page_template+='<script src="commands.js"></script>\n';
+    page_template+='<script src="functions.js"></script>\n';
     page_template+='<script src="client.js"></script>\n';
     page_template+='<div id="bg">';
     page_template+='<div id="chatter">';
@@ -106,7 +138,8 @@ var app = connect()
     page_template+='hello, this is the official krebs support:<br>\n';
     page_template+='<table id="chatbox"><tr id="foot"><td id="time"></td><td id="nick" class="chat_from"></td><td><input type="text" id="input"></td></tr></table>\n';
     page_template+='</div>';
-    page_template+='<div id="sideboard"><div id="links">';
+    page_template+='<div id="sideboard"><div id=nicklist></div>';
+    page_template+='<div id="links">';
     page_template+='<a href="http://gold.krebsco.de/">krebsgold browser plugin</a><br>';
     page_template+='<a href="http://ire:1027/dashboard/">ire: Retiolum Dashboard</a><br>';
     page_template+='<a href="http://pigstarter/">pigstarter: network graphs</a><br>';
diff --git a/webchat/public/client.js b/webchat/public/client.js
index ca71b537..4842d9c2 100644
--- a/webchat/public/client.js
+++ b/webchat/public/client.js
@@ -1,34 +1,4 @@
-function replaceURLWithHTMLLinks (text) {
-  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-  return text.replace(exp,"<a href='$1'>$1</a>");
-}
-function setMaybeNick (input) {
-  var match = /^\/nick\s+(.+)$/.exec(input);
-  if (match) {
-    nick = match[1];
-    $('#nick').html(nick);
-  }
-}
-
-function getCurTime () {
-  date = new Date;
-  h = date.getHours();
-  if(h<10)
-  {
-    h = "0"+h;
-  }
-  m = date.getMinutes();
-  if(m<10)
-  {
-    m = "0"+m;
-  }
-  s = date.getSeconds();
-  if(s<10)
-  {
-    s = "0"+s;
-  }
-  return ''+h+':'+m+':'+s;
-};
+var settings = {}
 
 $(function updateTime () {
   $('#time').html(getCurTime());
@@ -36,8 +6,6 @@ $(function updateTime () {
   return true;
 });
 
-var nick;
-
 $(function connect() {
   sock = new SockJS('/echo');
 
@@ -50,16 +18,11 @@ $(function connect() {
     try {
       var object = JSON.parse(e.data);
       console.log(object.message);
-      var safe_message = $('<div/>').text(object.message).html();
-      safe_message = replaceURLWithHTMLLinks(safe_message);
-      var safe_from = $('<div/>').text(object.from).html();
-      $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>').insertBefore('#foot');
-
-      var elem = document.getElementById('chatter');
-      elem.scrollTop = elem.scrollHeight;
+      clientParser(object);
 
     } catch (error) {
       console.log(error);
+      throw error;
     }
   };
   sock.onclose = function(event) {
@@ -77,18 +40,11 @@ $(function() {
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
-      setMaybeNick($('#input').val());
-      var sendObj = {
-        message: $('#input').val(),
-      };
-
-      if (typeof nick === 'string') {
-        sendObj.nick = nick;
-      };
-
-      sock.send(JSON.stringify(sendObj));
+      var input = ($('#input').val());
       $('#input').val('');
-      return;
+
+      var command = inputParser(input)
+      return (commands[command.method] || commands.badcommand)(settings, command.params)
     }
   });
 
diff --git a/webchat/public/commands.js b/webchat/public/commands.js
new file mode 100644
index 00000000..8cd3bba1
--- /dev/null
+++ b/webchat/public/commands.js
@@ -0,0 +1,25 @@
+var commands = {}
+
+commands.say = function (settings, params) {
+  var sendObj = {
+    method: 'say',
+    params: { message: params },
+  };
+  sock.send(JSON.stringify(sendObj))
+}
+
+commands.nick = function (settings, params) {
+  settings.nick = params
+  var sendObj = {
+    method: 'nick',
+    params: { nick: params },
+  }
+  sock.send(JSON.stringify(sendObj))
+}
+
+commands.badcommand = function (settings, params) {
+  console.log("error");
+  chatboxAppend( '<span class="from_system">error</span>', 'command not found' )
+
+  
+}
diff --git a/webchat/public/functions.js b/webchat/public/functions.js
new file mode 100644
index 00000000..ddd3aad6
--- /dev/null
+++ b/webchat/public/functions.js
@@ -0,0 +1,117 @@
+function inputParser (str) {
+  var match = /^\/([a-z]+)(?:\s+(.*\S))?\s*$/.exec(str)
+  if (match) {
+    return { method: match[1], params: match[2] }
+  } else {
+    return { method: 'say', params: str }
+  }
+}
+
+
+function clientParser(object) {
+  console.log(object)
+  switch (object.type) {
+    case 'message':
+      return printMessage(object);
+    case 'join':
+      return handleJoin(object);
+    case 'quit':
+      return handleQuit(object);
+    case 'nicklist': 
+      return handleNicklist(object);
+    case 'nickchange':
+      return handleNickchange(object);
+  }
+};
+
+function handleJoin(object) {
+  var safe_from = $('<div/>').text(object.from).html();
+  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg" style="color:#00FF00">joined</td></tr>').insertBefore('#foot');
+  $('#nicklist').append('<div class="name">' + safe_from + '</div>') ;
+};
+
+function handleQuit(object) {
+  var safe_from = $('<div/>').text(object.from).html();
+  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg" style="color:#FF0000">quit</td></tr>').insertBefore('#foot');
+  console.log('removing', safe_from);
+  $(getNicklistElement(safe_from)).remove();
+};
+
+function handleNicklist(object) {
+  Object.keys(object.message).forEach(function (nick) {
+//  console.log('nick',nick);
+    var hash_from = btoa(nick).replace(/=/g,'_');
+//    $('.name').each(function (i,e) { console.log(i,e); if (e.innerHTML === 'kweb') { $(e).attr("style", "color:green") } })
+    $('#nicklist').append('<div class="name">' + nick + '</div>') ;
+  });
+};
+
+function handleNickchange(object) {
+  var safe_from = $('<div/>').text(object.nick).html();
+  var safe_newnick = $('<div/>').text(object.newnick).html();
+  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">is now known as '+object.newnick+'</td></tr>').insertBefore('#foot');
+  $(getNicklistElement(safe_from)).remove();
+  $('#nicklist').append('<div class="name">' + safe_from + '</div>') ;
+};
+
+function replaceURLWithHTMLLinks (text) {
+  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+  return text.replace(exp,"<a class=chat_link href='$1'>$1</a>");
+}
+
+function setMaybeNick (input) {
+  if (match) {
+    nick = match[1];
+    $('#nick').html(nick);
+  }
+}
+function sortNicklist () {
+};
+
+function getNicklistElement(name) { 
+  var el;
+  $('.name').each(function (i,e) {
+    if (e.innerHTML === name) {
+      if (typeof el !== 'undefined') {
+        throw new Error('duplicate name: ' + name);
+      };
+      el = e;
+    };
+  });
+  return el;
+}
+
+function chatboxAppend (chat_from, chat_msg, type) {
+  type = type||'chat'
+  $('<tr><td class="'+type+'_date">'+getCurTime()+'</td><td class="'+type+'_from">'+chat_from+'</td><td class="'+type+'_msg">'+chat_msg+'</td></tr>').insertBefore('#foot');
+
+  var elem = document.getElementById('chatter');
+  elem.scrollTop = elem.scrollHeight;
+};
+
+function printMessage(object) {
+  var safe_message = $('<div/>').text(object.message).html();
+  safe_message = replaceURLWithHTMLLinks(safe_message);
+  var safe_from = $('<div/>').text(object.nick).html();
+  return chatboxAppend(safe_from, safe_message)
+};
+
+function getCurTime () {
+  date = new Date;
+  h = date.getHours();
+  if(h<10)
+  {
+    h = "0"+h;
+  }
+  m = date.getMinutes();
+  if(m<10)
+  {
+    m = "0"+m;
+  }
+  s = date.getSeconds();
+  if(s<10)
+  {
+    s = "0"+s;
+  }
+  return ''+h+':'+m+':'+s;
+};
diff --git a/webchat/public/krebs.png b/webchat/public/krebs.png
index 263d5b1c..5762e7f4 100644
Binary files a/webchat/public/krebs.png and b/webchat/public/krebs.png differ
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index 65f68058..4139aca5 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -21,7 +21,6 @@ time, mark, audio, video {
   border: 0;
   font-size: 100%;
   font: inherit;
-  font-family: monospace;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
@@ -33,6 +32,7 @@ body {
   line-height: 1;
   background-color: black;
   color: white;
+  font-family: monospace;
 }
 ol, ul {
   list-style: none;
@@ -54,7 +54,7 @@ q:before, q:after {
 }
 #input{
   width: 100%;
-  background-color: #555555;
+  background-color: #221111;
   border: 1px solid black;
   color: white;
 }
@@ -116,4 +116,4 @@ a {
   font-size: 14px;
   position: absolute;
   bottom: 5px;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3