Added basic chatting between users

scripts/communications.js

@@ -227,7 +227,7 @@ function connect(profile, connection_id)
   var g = new Object();
 
   // Setup some global varibles
-  g.chats = {};
+  g.chats = [];
   g.users = {};
 
   // RSA child task
@@ -395,6 +395,26 @@ function connect(profile, connection_id)
             profile_switch_to(connection_id);
           }
         }
+
+        // New message
+        if(data.mode == "new_message")
+        {
+          console.log("Recieved new message from "+data.from
+          +" in channel "+data.channel.toString());
+
+          // Push the new messages to the chat
+          g.chats[data.channel].messages.push({
+            message: data.message,
+            from: data.from
+          });
+
+          // Is the chat and server active
+          if(data.channel == active_chat && connection_id == active_profile)
+          {
+            // Refresh the chat
+            chat_switch_to(active_chat);
+          }
+        }
       }
     });
   });

scripts/profiles.js

@@ -3,6 +3,7 @@
 var profiles;
 var connections = [];
 var active_profile;
+var active_chat;
 
 // Load the profiles
 fs.readFile("profiles.json", "utf-8", function(err, data)
@@ -137,8 +138,8 @@ function profile_switch_to(id)
   document.getElementById("chat-main").innerHTML = "\
   <div id='chats-menu' class='menu-vertical'>\
     <ul>\
-      <li><a class='add-chat' href='#' onclick='add_chat_menu()'><b>Add</b></a></li>\
       "+chats_menu+"\
+      <li><a class='add-chat' href='#' onclick='add_chat_menu()'><b>Add</b></a></li>\
     </ul>\
   </div>\
   <div id='chat-area'>\
@@ -154,18 +155,52 @@ function profile_switch_to(id)
 
 function chat_switch_to(id)
 {
+  // Create the chat html
+  var chat_html = "";
+
+  // Loop over the messages
+  for(var i=0;i<connections[active_profile].chats[id].messages.length;i++)
+  {
+    // Add some html data to the chat
+    chat_html += "\
+    <div class='chat-content-message'>\
+      <p>"+connections[active_profile].chats[id].messages[i].message+"</p>\
+    </div>\
+    ";
+  }
+
   // Set the HTML
   document.getElementById("chat-area").innerHTML = "\
-  <div class='chat-content'></div>\
-  <div class='chat-content-send'>\
-    <textarea id='chat-content-send-textbox'></textarea>\
-    <button id='chat-content-send-button'>Send</button>\
+  <div id='chat-content'>"+chat_html+"</div>\
+  <div id='chat-content-send'>\
+    <textarea id='chat-content-send-textarea'></textarea>\
+    <button id='chat-content-send-button' onclick='chat_send()'>Send</button>\
   </div>\
   ";
 
   // Set the title
   document.title = title(active_profile)+" - "
   +connections[active_profile].chats[id].name;
+
+  // Set the active chat
+  active_chat = id;
+}
+
+function chat_send()
+{
+  // Send the message
+  socket_write(
+    connections[active_profile].client,
+    connections[active_profile].encryption,
+    {
+      mode: "send_message",
+      channel: active_chat,
+      message: document.getElementById("chat-content-send-textarea").value
+    }
+  );
+
+  // Clear the textarea
+  document.getElementById("chat-content-send-textarea").value = "";
 }
 
 function add_chat_menu()
@@ -211,10 +246,8 @@ function profiles_reload()
       // Create a list item
       var profile = document.createElement("li");
 
-
-
       // Set the html for the list item
-      profile.innerHTML = "<a href='javascript:void(0)' onclick='profile_switch_to("+
+      profile.innerHTML = "<a href='#' onclick='profile_switch_to("+
       i+")'>"+title(i)+"</a>";
 
       // Add the profile to the menu

scripts/scripts.js

@@ -1,6 +1,14 @@
-function connect_direct()
+
+// Check the height of the chat box and adapt the chat area for it
+setInterval(function()
 {
-  var hostname = document.getElementById("hostname").value;
-  var port = document.getElementById("port").value;
-  connect(hostname, parseInt(port));
-}
+  if(
+    // Do these exist yet
+    document.getElementById("chat-content") &&
+    document.getElementById("chat-content-send")
+  ){
+    document.getElementById("chat-content").style.bottom =
+    document.getElementById("chat-content-send").offsetHeight.toString()+"px";
+  }
+},
+10);

style.css

@@ -8,8 +8,9 @@
   top: 0;
   bottom: 0;
   left: 240px;
-  width: 100px;
+  width: 120px;
   background-color: #BBB;
+  overflow-y: auto;
 }
 
 #users-menu ul {
@@ -18,6 +19,7 @@
   right: 0;
   width: 120px;
   background-color: #BBB;
+  overflow-y: auto;
 }
 
 .menu-vertical ul {
@@ -54,13 +56,19 @@
   background-color: #BBC;
 }*/
 
-#chat-area {
-  padding: 0 100px;
+#chat-content {
+  top: 0;
+  bottom: 0;
+  left: 360px;
+  right: 120px;
+  overflow-y: auto;
+  position: fixed;
+  padding: 10px;
 }
 
-.chat-content-send {
+#chat-content-send {
   position: fixed;
-  left: 340px;
+  left: 360px;
   right: 120px;
   bottom: 0;
   padding: 12px;