Build a simple chat web app with JQuery Mobile and NowJS (a module for NodeJS)

Post to Twitter

I was playing around with NowJS (makes realtime web apps easy and it uses NodeJS). I setup NodeJS along with NPM on Ubuntu 10.10 (see previous my article if you need help with getting NodeJS and NPM installed on Ubuntu) and installed NowJS. I then took JQuery Mobile (alpha version 3) and built a simple chat web app.


Note: Keep in mind this is a minimal chat app and is NOT production quality code, it is simply playing around with NowJS, JQuery Mobile, etc. This most likely would need to be modified to get working on all mobile devices. I only tested this on Chrome and Firefox which it worked fine. I also tried the Android web browser (emulator) and it didn’t work. I didn’t spend much time looking into it but I think it might be related to how the now.js file is loaded/sent from the NowJS server. I have no idea if this works on the iPhone or iPad, etc.

Update March 17, 2011: I have this working on Android now, the code changes have been put into the code below.

Filename: nowjschat.html

<!DOCTYPE html>
<html lang="en">
  <head> 
    <title>nowjs test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>    
    <script src="nowjs/now.js"></script>
    <script>
      $(document).ready(function(){
        
        now.receiveMessage = function(name, message){
          $("#incomingMessages").append("<div class='message'><span class='username'>" + name + ":</span> " + message + "</div>");
          $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight);
        }
        
        $("#chatNameButton").click(function(){
          var chatName = $("#chatNameText").val().trim();
          if(chatName.length <= 0)
            chatName = "unknown";
          now.name = chatName;
          $(location).attr('href',"#chatPage");
        });
        
        $("#chatSendButton").click(function(){
          now.distributeMessage($("#messageText").val());
          $("#messageText").val("");
        });
        
      });
    </script>
    <style>
      .message
      {
        padding: 5px 5px 5px 5px;
      }
      .username
      {
        font-weight: strong;
        color: #0f0;
      }
      .msgContainerDiv
      {
        overflow-y: scroll;
        height: 250px;
      }
    </style>
  </head> 
   
  <body> 

    <div data-role="page" id="loginPage" data-role="page" data-theme="a">
	    <div data-role="header">
		    <h1>NowJS Chat</h1>
	    </div>

	    <div data-role="content">	
        <div data-role="fieldcontain">
            <label for="chatNameText"><strong>Chat Name:</strong></label>
            <input type="text" name="chatNameText" id="chatNameText" value=""  />
            <button id="chatNameButton">Ok</button>
        </div>  
	    </div>

	    <div data-role="footer">
		    <h4>Giant Flying Saucer</h4>
	    </div>
    </div>

    <div data-role="page" id="chatPage" data-role="page" data-theme="a">

	    <div data-role="header">
		    <h1>NowJS Chat</h1>
	    </div>

	    <div data-role="content">	
        <div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div>
        <label for="messageText"><strong>Message:</strong></label>
        <textarea name="messageText" id="messageText"></textarea>

        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#loginPage" id="goBackButton" data-role="button">Go Back</a></div>
            <div class="ui-block-b"><button data-theme="a" id="chatSendButton" name="chatSendButton">Send</input>
        </fieldset>
	    </div>

	    <div data-role="footer">
		    <h4>Giant Flying Saucer</h4>
	    </div>
    </div>

  </body> 
</html>

Filename: nowjschatserver.js

var fs = require('fs');
var server = require('http').createServer(function(req, response){
  fs.readFile('nowjschat.html', function(err, data){
    response.writeHead(200, {'Content-Type':'text/html'});  
    response.write(data);  
    response.end();
  });
});
server.listen(8080);
var everyone = require("now").initialize(server);


everyone.connected(function(){
  console.log("Joined: " + this.now.name);
});


everyone.disconnected(function(){
  console.log("Left: " + this.now.name);
});

everyone.now.distributeMessage = function(message){everyone.now.receiveMessage(this.now.name, message);};

To run it simply do this:

$ node nowjschatserver.js

Results:

Post to Twitter

This entry was posted in HTML5, Mobile, Node.js, Ubuntu. Bookmark the permalink.

5 Responses to Build a simple chat web app with JQuery Mobile and NowJS (a module for NodeJS)

  1. Frank says:

    The Android emulator has a loopback interface for localhost, so you are being routed to the emulator when requesting now.js, you can refer to the localhost of your actual machine at 10.0.2.2.

  2. Chad Lung says:

    @Frank,

    I just tried this now on an actual Droid X device and it’s the same problem. The article shows me using localhost but in reality I was using the actual IP address of my Ubuntu machine. I’ve updated the article to get rid of the localhost confusion. Thanks.

    Chad

  3. m0sad says:

    Hi,

    i get an error “Cannot find module ‘node-proxy'” and npm install node-proxy throws also erros.

  4. Eric Zhang says:

    Hi mosad,

    That sounds like an error with your node.js configuration.

    We can help you debug why npm install node-proxy is throwing errors on our irc channe at #nowjs on freenode.

  5. sara says:

    This is a great demo!

    I’m not sure if you can help though, I’ve been trying to get this to work for me under cygwin for a while and now that it seems like almost everything is working, I’m getting two errors from the browser that look similar:
    nowjschat.html:12 –> now.receiveMessage = function(name, message) …
    Uncaught TypeError: Cannot set property ‘receiveMessage’ of undefined (anonymous function)

    Just wondering if you had run into that message before.

    Cheers!

Comments are closed.