my awesome chat

jmg · jmg · commit 3ad8fb110299 · 2012-01-08T00:36:35.000-03:00
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# A Real Time Chat Built on Node-js and Socket.io 
+
+------------------------------------------------------------------
+
+### Setup your Chat Room
+
+------------------------------------------------------------------
+
+Install node-js. Just follow this guide https://github.com/joyent/node/wiki/Installation.
+Install the Node Pacakge Manager (NPM). Read this https://github.com/isaacs/npm. 
+
+------------------------------------------------------------------
+
+Get socket.io via NPM by running:
+
+```bash
+~$ npm install socket.io
+```
+
+------------------------------------------------------------------
+
+Start the node-js server. Just type:
+
+```bash
+~$ node chat.js
+```
+
+------------------------------------------------------------------
+
+Open the chat.html file in your favourite browser and enjoy!
diff --git a/chat.html b/chat.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="styles.css"/>  
+    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
+    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
+    <script type="text/javascript">
+
+        var socket = io.connect('http://localhost:3000');
+
+        socket.on('msg', function(data) {
+            var msg = JSON.parse(data);
+            appendMsg(msg);
+        });
+
+        socket.on('init', function(data) {
+            var messages = JSON.parse(data)
+            for (i in messages)
+                appendMsg(messages[i])
+        });
+
+        function appendMsg(msg) {
+            $('#msgs').append(function() {
+                var div = $('<div>');
+                div.html('<b>' + msg.username + ':</b> ' + msg.message);
+                return div;
+            });
+            $('#msgs')[0].scrollTop = $('#msgs')[0].scrollHeight;
+        }
+
+        function sendMsg() {
+            var msg = {};
+            $.each($('#chat').serializeArray(), function(i,v) {
+                msg[v.name] = v.value;
+            });
+            $("#msg").val("");
+            appendMsg(msg);
+            socket.emit('msg', JSON.stringify(msg));
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <p class="chat-title" onclick="javascript: toggleChat();">Real Time Chat</p>
+        <div id="msgs"></div>
+        <div id="form">
+          <form id="chat" action="javascript:sendMsg()">
+                <label for="username">Username: </label><input name="username" type="text"><br/>
+                <label for="msg"> Message: </label><input id="msg" type="text" name="message"/><br/>
+                <input type="submit"/>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/chat.js b/chat.js
@@ -0,0 +1,45 @@
+var DEBUG = true
+var PORT = 3000
+var INIT_MESSAGES = 5
+
+var http = require('http')
+
+var server = http.createServer()
+server.listen(PORT)
+
+var io = require('socket.io').listen(server)
+
+var messages = new Array()
+
+Array.prototype.inject = function(element) {
+
+    if (this.length >= INIT_MESSAGES) {
+        this.shift()
+    }
+    this.push(element)
+}
+
+io.sockets.on('connection', function(client) {
+
+    if (DEBUG)
+        console.log("New Connection: ", client.id)
+
+    client.emit("init", JSON.stringify(messages))
+
+    client.on('msg', function(msg) {
+
+        if (DEBUG)
+            console.log("Message: " + msg)
+
+        var message = JSON.parse(msg)
+        messages.inject(message)
+
+        client.broadcast.emit('msg', msg)
+    })
+
+    client.on('disconnect', function() {
+
+        if (DEBUG)
+            console.log("Disconnected: ", client.id)
+    })
+})
diff --git a/styles.css b/styles.css
@@ -0,0 +1,15 @@
+#msgs {
+  height: 300px;
+  background: #f3f3ff;
+  font-family: monospace, sans; 
+  overflow:auto;
+}
+
+.chat-title {
+  color: white;
+  background: #a2a2ee;
+  font-weight: bold;
+  font-size: 20px;
+  height: 24px;
+  padding: 2px;
+}
