Got chat forge mostly working.

xavi- · Apr 26, 2010 · 5d21da0 · 5d21da0
1 parent 07aa865
commit 5d21da0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 40 deletions.
diff --git a/chatroom.html b/chatroom.html
@@ -1,10 +1,7 @@
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
+<!DOCTYPE html>
 <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <meta name="description" content="This is Xavi Ramirez personal page." />
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
-
-    <style>/*<![CDATA[*/
+<title>(:room-name:)</title>  
+<style>
     .chat {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -16,19 +13,19 @@
         left: 0;
         padding-bottom: 26px;
     }
-    
+
     .line { 
         font-size: 16px; 
         font-family: sans-serif;
     }
-    
+
     .chat-text {
         height: 100%;
         border: 1px solid black;
         padding: 0px 4px;
         overflow: auto;
     }
-    
+
     .enterName {
         cursor: pointer;
         border: thin solid #770077;
@@ -38,71 +35,73 @@
         text-align: center;
         height: 20px;
     }
-    
+
     .reply {
         border: 1px solid black;
     }
-    
+
     .reply input {
         margin: 0px;
         display: block;
         border: 0px solid black;
         width: 100%;
         height: 20px;
         font-size: 15px;
-    }
-    /*]]>*/
-    </style>
+}
+</style>
 </head>
 <body>
-<lift:ChatroomUI>
-    <head><title><chat:title/></title></head>
     <div class="chat">
-    <div class="chat-text"><chat:chat-text /></div>
-    <div class="reply">
-        <chat:reply>
-            <ch:sendLine><input class="sendLine" type="text" /></ch:sendLine>
-            <ch:enterName><div class="enterName">Click to join</div></ch:enterName>
-        </chat:reply>
+        <div class="chat-text">
+            (:chat-text ~ <div class="line">[:name :]: [:text:]</div> :)
+        </div>
+        <div class="reply">
+            (:reply ~
+                [:send-line ~ <input class="sendLine" type="text" />:]
+                [:enter-name ~ <div class="enterName">Click to join</div>:]:)
+        </div>
     </div>
-    </div>
-<lift:comet type="ChatClient" chat:name="default" />
-</lift:ChatroomUI>
-<script type="text/javascript"> //<![CDATA[
-var ch = {};
-
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
+<script src="/json2.js" type="text/javascript"></script>
+<script src="/client.js" type="text/javascript"></script>
+<script type="text/javascript">
 $(function() {
+    var name = "(:user-name:)";
+
+    function addLine(name, line) {
+        $("<div class='line' />")
+            .text(name + ": " + line)
+            .appendTo("div.chat-text");
+        $("div.chat-text").scrollTop($("div.chat-text").height());
+    }
+
     $(".sendLine").live("keydown", function(e) {
         var line = $(this).val();
 
         if(e.which == 13 && line) { 
-            sendLine(line);
-            addLine(user, line);
+            ch.send({ name: name, text: line });
+            addLine(name, line);
             $(this).val(""); 
         } 
     })
     .focus();
 
     $(".enterName").click(function() { 
-        var name = window.prompt("Enter your name");
+        name = window.prompt("Enter your name");
 
         if(name) {
             document.cookie = "name=" + name + "; path=/";
-            enterName(name);
 
             $("<input class='sendLine' type='text' />")
                 .replaceAll(".reply div.enterName")
                 .focus();
         }
     });
+
+    var ch = new Channel("(:room-name:)", (:initial-info-id:));
+    ch.onReceive(function(msg) { addLine(msg.content.name, msg.content.text); });
+    $(window).load(function() { setTimeout(function() { ch.start(); }, 0); });
 });
-function addLine(user, line) {
-    $("<div class='line' />")
-        .text(user + ": " + line)
-        .appendTo("div.chat-text");
-    $("div.chat-text").scrollTop($("div.chat-text").height());
-}
-//]]>
 </script>
 </body>
 </html>
diff --git a/server.js b/server.js
@@ -1,3 +1,54 @@
 var sys = require("sys");
 var url = require("url");
-var fs = require("fs");
+var fs = require("fs");
+
+var bind = require("./libraries/bind-js");
+var srv = require("./libraries/xavlib/simple-router");
+var chn = require("./libraries/xavlib/channel");
+
+function renderRoom(channelId, name, callback) {
+    fs.readFile("./chatroom.html", function(err, data) {
+        if(err) { throw err; };
+
+        var channel = chn.channels[channelId] || chn.create(channelId);
+        var context = { "room-name": channelId, "initial-info-id": channel.lastInfoId };
+        context["user-name"] = name;
+        context["chat-text"] = channel.data.map(function(o) { return o.message.content; });
+        context["reply"] = { "send-line": function(def) { return (name ? def : ""); }, 
+                             "enter-name": function(def) { return (name ? "" : def); } };
+
+        bind.to(data, context, callback);
+    });
+}
+
+var cookie = { parse: function(data) {
+    var parsed = {};
+    (data || "").replace(/(\S*)=(\S*)(;\s*|$)/g, function(_, key, val) { parsed[key] = val; return _; });
+    return parsed;
+} };
+
+srv.urls["/client.js"] = srv.staticFileHandler("./libraries/xavlib/channel/client.js", "application/x-javascript");
+
+srv.urls["/json2.js"] = srv.staticFileHandler("./libraries/json2.js", "application/x-javascript");
+
+srv.urls["/"] = srv.urls["/index.html"] = srv.staticFileHandler("./index.html", "text/html");
+
+(function() {
+    var regChannel = new RegExp("^/([a-zA-Z0-9_-]+)$");
+    srv.patterns.push({
+        test: function(req) { return regChannel.test(url.parse(req.url).pathname); },
+        handler: function(req, res) {
+            var name = cookie.parse(req.headers["cookie"])["name"];
+            var channelId = regChannel.exec(url.parse(req.url).pathname)[1];
+            renderRoom(channelId, name, function(data) {
+                res.sendHeader(200, { "Conent-Length": data.length,
+                                      "Content-Type": "text/html",
+                                      "Set-Cookie": "name=" + name  + "; path=/;" });
+                res.end(data, "utf8");
+            });
+        }
+    });
+})()
+
+srv.server.listen(8002);
+chn.start(srv);