End of the first part

jeromeguiard · Apr 4, 2013 · cd76333 · cd76333
1 parent 9d6ddde
commit cd76333
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 chat_node.js
 ============
 
-Little chat in node js done that students will have to do in exercise
+Little chat in node js done that students will have to do in exercise
+
+1 - First commit is the chat who will retrieve informations thanks to javascript
diff --git a/chat.js b/chat.js
@@ -0,0 +1,84 @@
+//include node.js required modules
+var server_http = require("http");
+var querystring = require("querystring");
+var url = require("url");
+var fs = require('fs');
+
+var messages = new Array();
+
+//Create a message object
+function messageObject(id, content, author){
+    this.id = id;
+    this.content = content;
+    this.author = author;
+    this.toString = function(){
+        return JSON.stringify(this);
+    }
+}
+
+function writeMessageFromId(id){
+    var messagesToReturn = new Array()
+    for (var key in messages){
+         if (key >= id){
+             messagesToReturn.push(messages[key])
+         }
+    }    
+    return messagesToReturn;
+}
+
+function writeMessages(response, message){
+    if (message === undefined) message = 0 ; 
+    response.writeHead(201,{'Content-Type':'text/json'});
+    response.write(JSON.stringify(writeMessageFromId(message)));
+    response.end();
+}
+
+function postMessage(request, response){
+    var fullbody = '';
+    request.on('data',function(chunk){
+        fullbody = chunk.toString();
+    });
+    request.on('end',function(){
+        var jsonWithPost = querystring.parse(fullbody);
+        var tempMessage = new messageObject(messages.length, 
+                                            jsonWithPost.message, 
+                                            jsonWithPost.author); 
+        messages[messages.length] = tempMessage;
+        writeMessages(response); 
+    });
+}
+
+function getIndex(response){
+    response.writeHead(201,{'Content-Type':'text/html'});
+    response.write(fs.readFileSync("index.html"));
+    response.end();
+}
+
+function getMainJs(response){
+    response.writeHead(201,{'Content-Type':'text/javascript'});
+    response.write(fs.readFileSync("main.js"));
+    response.end();
+}
+
+server_http.createServer( function(request, response){
+    var urlInfo = url.parse(request.url, true)
+    var page = urlInfo.pathname
+
+    if (page == "/message"){
+        if(request.method == 'GET'){
+            var fromMessage = urlInfo.query.from
+            writeMessages(response, urlInfo.query.from); 
+         }
+         else if(request.method == 'POST'){
+            postMessage(request, response);
+        }else{
+           console.log("request Error");    
+        }
+    }
+    if (page === "/"){
+        getIndex(response);        
+    }
+    if (page === "/main.js"){
+        getMainJs(response);
+    }
+}).listen(8080);
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTRINE html>
+<html>
+   <head>
+      <title>Mini chat</title>
+   </head>
+   <body onload="main();">
+       <h1>Mini Chat in node.js</h1>
+       <div id="chat"></div>
+       <form>
+          <label for="username">Username : </label>
+          <input type="text" id="username"/><br/>
+          <label for="message">Message</label>
+          <input type="text" name="message" id="message" />
+          <input type="button" value="submit" onclick="submitMessage();"/>
+       </form>
+       <script type="text/javascript" src="main.js"></script>
+   </body>
+</html>
+
diff --git a/main.js b/main.js
@@ -0,0 +1,59 @@
+//lastMessage Id used to know the last message received
+var lastMessageId = 0;
+/*
+* when there is a new message create a new element and insert it.
+*/
+function insertNewMessage(message){
+    var messageAsJson = JSON.parse(message);
+    for(var key in messageAsJson){
+	if(parseInt(messageAsJson[key].id) >= lastMessageId){
+            var elementMessage = document.createElement("div");
+            var elementContent = document.createElement("div");
+            var elementAuthor = document.createElement("div");
+            var mainElement = document.getElementById("chat");
+            elementContent.innerText = messageAsJson[key].content;
+            elementAuthor.innerText = messageAsJson[key].author;
+            elementMessage.appendChild(elementContent);
+            elementMessage.appendChild(elementAuthor);
+            mainElement.appendChild(elementMessage);
+            lastMessageId++; 
+        }
+    }
+}
+
+/*
+* Retrieving message from the server
+*/
+function getMessage(){
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.open("GET", "/message?from="+lastMessageId);
+    xmlhttp.addEventListener("load", function(){
+        insertNewMessage(this.response);
+    });
+    xmlhttp.send(null);
+}
+
+/*
+* Function set to retrieve a message every 5 seconds
+*/
+function main(){
+    window.setInterval(getMessage, 5000);
+}
+
+/*
+* Submit message by sending it to the server thanks to a post method
+*/
+function submitMessage(){
+    var messageValue = document.getElementById("message").value;
+    var usernameValue = document.getElementById("username").value;
+    var dataToSend = "message="+messageValue+"&author="+usernameValue;
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.addEventListener("load", function(){
+        insertNewMessage(this.response);
+    });
+    xmlhttp.open("POST", "/message", true);
+    xmlhttp.setRequestHeader("Content-Type",
+                             "application/x-www-form-urlencoded");
+    xmlhttp.send(dataToSend);
+    document.getElementById("message").value = "";
+}