Waiting for Skynet

If anyone has tried out the code, the current chat interface is a bit clunky.

1. The chat text area doesn’t auto scroll so you have to keep scrolling down

2. If anyone uses any other chat functionality, sending a message on the “Enter” key press is manditory

In today’s post I remedy both these issues =)

They both happen in the chat.js file and are fairly simple to implement. The first problem is the scrolling issue. We effectivly want to always scroll to the bottom of the <div/> where the chat text is being appended into. A quick google search and stackoverflow post later:

http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

And we are ready to roll. Here was the code that was modified:

now.receiveMessage = function(name, message){
 $("#messages").append("<br>" + name + ": " + message);

 // scroll the div to the bottom
 $("#messages").scrollTop($("#messages")[0].scrollHeight);
}

The next one is a bit more involved and reqires us to bind a listener to the text input for the pressing of the “enter” key. When that happens, it needs to “click” the send button. Another quick google search and stackoverflow post later:

http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box

And we are in business! Here was the code change that was required to send the message on the “enter” key press:

// add in "enter" key press to trigger "send" click
$("#chat-input").keyup(function(event){
  if(event.keyCode == 13){
    $("#send-button").click();
  }
});

This makes it actually tolerable to use as a chat =) I wanted to get into AI, but as it turns out I would rather have some 3D web GL FIRST so that my AI will do something interesting. I am going to merge in the awesome Voxel code published by mrdoob.com:

http://mrdoob.com/129/Voxels

It uses his awesome WebGL javascript library: three.js

https://github.com/mrdoob/three.js/

-rOcK

p.s. Thanks to Katie Simmons for helping me test this out on her iPhone =)

Now that we can track user movement, people need to communicate. This is fairly easy to do in nowjs using groups. The example code was taken from the now.js examples directory on github:

https://github.com/Flotype/now/tree/master/examples/multiroomchat_example

There were a few places that needed to change:

app.js – We add in a new method “changeRoom()” that removes the user from the previous group and adds them to a new group. We also want to make sure that when a message is recieved, to send it only to the group that we are currently in.

// when a user changes group, lets show it
everyone.now.changeRoom = function(newRoom){
    nowjs.getGroup(this.now.room).removeUser(this.user.clientId);
    nowjs.getGroup(newRoom).addUser(this.user.clientId);
    this.now.room = newRoom;
    this.now.receiveMessage("SERVER", "You're now in " + this.now.room);
}

// make sure to send chat where it's needed
everyone.now.distributeMessage = function(message){
    nowjs.getGroup(this.now.room).now.receiveMessage(this.now.name, message);
};

chat.js – this is the new js file added to the client. It handles recieving the chat message, appending it into the messages section and allows the user to change “rooms”. Lastly, it pulls in a username when the page loads so that chat is shown with the given username.

$(document).ready(function(){
    now.receiveMessage = function(name, message){
        $("#messages").append("<br>" + name + ": " + message);
    }

    $("#send-button").click(function(){
        now.distributeMessage($("#chat-input").val());
        $("#chat-input").val("");
    });

    $(".change").click(function(){
        now.changeRoom($(this).text());
    });

    now.name = prompt("What's your name?", "");
});

index.jade - this is the main view file for our page. We added in a section that shows the 3 rooms, a list of messages, a text input for the message, and a send button.

div#chat-controls
    div#room-list
      a(href='#', class='change selected') room 1
      a(href='#', class='change') room 2
      a(href='#', class='change') room 3
    div#messages You're in room 1
    input#chat-input(type='text')
    input#send-button(type='button', value='Send')

At this point, you should be able to start up the app in node:

>node app.js

Open up a browser window to the following URL:

http://localhost:3000

Open up another browser window to the same url. And as you type in each, it should show what you typed in the other browser. If you switch rooms. Note that the chat no longer sends to the other window until that user switches to it. As always you can get the latest code from my github:

https://github.com/rockhowse/nowjs-multiplayer-map

Next up. Adding sassy bot code that uses the new chat functionality to taunt you as it moves about the map!

-rOck

This is a quick post on how I was able to take the code from:

http://nowjs.com/examples/map

And get it running in node.js using express and jade. Finished code located here:

https://github.com/rockhowse/nowjs-multiplayer-map-tutorial

This post assumes you have downloaded and installed node.js and npm. Check the main site for links to full insructions:

http://nodejs.org/

After node has been installed we first make our directory:

node-multiplayer-map-tutorial

The first thing I am going to do is install “express” node module:

http://expressjs.com/

We can do this using npm:

>npm install -g express

*note* -g is “gobal” so that any node.js project can use it

At this point we can use the “express” command to generate a stub node.js application:

C:\<%path_to_project%>\nowjs-multiplayer-map-tutorial>npm install -g express
npm http GET https://registry.npmjs.org/express
npm http 200 https://registry.npmjs.org/express
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/mkdirp/0.0.7
npm http GET https://registry.npmjs.org/connect
npm http 200 https://registry.npmjs.org/mime
npm http 200 https://registry.npmjs.org/mkdirp/0.0.7
npm http GET https://registry.npmjs.org/mkdirp/-/mkdirp-0.0.7.tgz
npm http 200 https://registry.npmjs.org/qs
npm http 200 https://registry.npmjs.org/connect
npm http 200 https://registry.npmjs.org/mkdirp/-/mkdirp-0.0.7.tgz
npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/formidable
C:\<%path_to_npm%>\npm\express -> C:\<%path_to_npm%>\npm\node_modules\express\bin\express
mime@1.2.4 C:\<%path_to_npm%>\npm\node_modules\express\node_modules\mime
mkdirp@0.0.7 C:\<%path_to_npm%>\npm\node_modules\express\node_modules\mkdirp
qs@0.4.0 C:\<%path_to_npm%>\npm\node_modules\express\node_modules\qs
formidable@1.0.8 C:\<%path_to_npm%>\npm\node_modules\express\node_modules\connect\node_modules\formidable
connect@1.8.5 C:\<%path_to_npm%>\npm\node_modules\express\node_modules\connect
express@2.5.2 C:\<%path_to_npm%>\npm\node_modules\express

 At this point we can now run the “express” command to create our node.js stub code:

C:\<%path_to_project%>\nowjs-multiplayer-map-tutorial>express

create : .
create : ./package.json
create : ./app.js
create : ./public
create : ./views
create : ./views/layout.jade
create : ./views/index.jade
create : ./public/stylesheets
create : ./public/stylesheets/style.css
create : ./public/javascripts
create : ./public/images
create : ./routes
create : ./routes/index.js

dont forget to install dependencies:
$ cd . && npm install

 As stated in the output, we need to install the dependencies for this express web project:

C:\Users\Sexbox\Desktop\nodejs\nowjs-multiplayer-map-tutorial>npm install
npm http GET https://registry.npmjs.org/jade
npm http GET https://registry.npmjs.org/express/2.5.2
npm http 200 https://registry.npmjs.org/express/2.5.2
npm http GET https://registry.npmjs.org/express/-/express-2.5.2.tgz
npm http 200 https://registry.npmjs.org/jade
npm http GET https://registry.npmjs.org/jade/-/jade-0.20.0.tgz
npm http 200 https://registry.npmjs.org/express/-/express-2.5.2.tgz
npm http 200 https://registry.npmjs.org/jade/-/jade-0.20.0.tgz
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/mkdirp/0.0.7
npm http GET https://registry.npmjs.org/connect
npm http GET https://registry.npmjs.org/commander
npm http GET https://registry.npmjs.org/mkdirp
npm http 304 https://registry.npmjs.org/mkdirp/0.0.7
npm http 304 https://registry.npmjs.org/qs
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/connect
npm http 200 https://registry.npmjs.org/commander
npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/mkdirp
npm http 304 https://registry.npmjs.org/formidable
jade@0.20.0 ./node_modules/jade
├── commander@0.2.1
└── mkdirp@0.2.1
express@2.5.2 ./node_modules/express
├── mkdirp@0.0.7
├── mime@1.2.4
├── qs@0.4.0
└── connect@1.8.5

At the time of this writing, it installs the “jade” plugin.

Nowe we can test this out by running the project using the standard node command:

C:\<%path_to_project%>\nowjs-multiplayer-map-tutorial>node app.js
Express server listening on port 3000 in development mode

 You can then open up the web browser and navigate to the url below to check it out:

Here is the file breakdown at this point:

The files we will be primarily concerned with in this tutorial are as follows:

1. package.json – node.js application metadata and package requirements
2. app.js – main node.js application
3. index.jade – main HTML page that will be rendered for the root URL (‘/’)

Why all this complexity? “express” makes it very easy to serve html and javascript dynamically using routes. Doing this by hand can get tedious.

 First modification: package.json

We will add the module “now” to the package.json since this is the module that we will use for real time communication.

“dependencies”: {
“express”: “2.5.2″
, “jade”: “>= 0.0.1″

,”now”: “>=”0.7.4″

}

Once the file has been saved, lets re-run the command:

>npm install

If you are NOT on windows, it should download and install the now package under your node_modules directory. However… if you are on windows it’s a bit more complicated.

If you do the command:

C:\<path-to-project>\nowjs-multiplayer-map\npm i

You will most likely get an error with node-proxy as shown below:

npm WARN node-proxy@0.5.2 package.json: bugs['web'] should probably be bugs['url']
> node-proxy@0.5.2 install C:\<path-to-project>\nowjs-multiplayer-map\node_modules\now\node_modules\node-proxy
> make
‘make’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! error installing node-proxy@0.5.2
npm ERR! error installing now@0.7.6
npm ERR! error rolling back now@0.7.6 Error: UNKNOWN, unknown error ‘C:\<path-to-project>\nowjs-multiplayer-map\node_modules\now\node_modules\___socket.io.npm\package\lib\transports\websocket’
npm ERR! node-proxy@0.5.2 install: `make`
npm ERR! `cmd “/c” “make”` failed with 1
npm ERR!
npm ERR! Failed at the node-proxy@0.5.2 install script.
npm ERR! This is most likely a problem with the node-proxy package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! make
npm ERR! You can get their info via:
npm ERR! npm owner ls node-proxy
npm ERR! There is likely additional logging output above.

This has something to do with running node-proxy in native mode on windows instead of through cygwin.

now.js has a post detailing how to remedy this

http://blog.nowjs.com/running-nowjs-natively-on-windows

Basically you do the following:

1. Install node.exe and NPM for Windows and make sure all your paths are correct
2. Install Microsoft Visual C++ Runtime (4.8 MB)
3. Download the NowJS Windows branch zip
4. Rename `Flotype-now-XXXXXX` to `now` and put that in your node_modules folder

* note * at this point you should already have an existing “now” folder inside node_modules.
Overwrite it completely with the files from the .zip

* note * the original instructions include the following

or `git clone git://github.com/Flotype/now.git` and `git checkout windows`

This works fine but if you are new to git and using different branches, the .zip method is probably the easiest.

At this point, now.js should be available to our application =) We will confirm this a bit later on down. In order to get this app working, we will need to modify the code a bit.

I am working off the code located here:

http://nowjs.com/examples/map

Server Side Code:

We are going to configure the Server first so that it can accept connections from the client.

1. Open up the app.js file inside our project. This is the main application file for node.js.
2. Navigate to the URL listed above and copy all of the code from the Server section
3. At the very BOTTOM of the file, paste in the server side code and save it.

Client Side Code:

Next step is to import the client code and make it available inside our project. First we are going to get the client code imported.

1.  Create the following file inside our project
1. C:\<path>\nowjs-mutiplayer-map-tutorial\public\javascriptsfolder\map.js
2. Open up the newly created Map.js file and  navigate to the nowjs URL listed above and copy ALL the code inside the “Client” block and paste into the map.js file. Save
3. So we have our client, but we don’t have the <canvas/> tag to hold our map, nor do we have any references to the javascript needed to run the client. This can be fixed easily by modifying the following:
1. C:\<path>\nowjs-mutiplayer-map-tutorial\routes\index.js
1. exports.index = function(req, res){
   res.render(‘index’, { title: ‘Multiplayer Map’ })
   };
   
2. C:\<path>\nowjs-mutiplayer-map-tutorial\views\index.jade
1. h1= title
   canvas#map(width=500, height=400)
3. C:\<path>\nowjs-mutiplayer-map-tutorial\views\layout.jade
1. !!!
   html
   head
   title= title
   link(rel=’stylesheet’, href=’/stylesheets/style.css’)
   script(src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’)
   script(src=’/nowjs/now.js’)
   script(src=’/javascripts/map.js’)
   body!= body

At this point, you should be able to fire up the Server and navigate to our client URL and actually see the map!

http://localhost:3000

However! you will note that you might not be able to move around. I was unable to fully figure out why, but it has something to do with the binding of the jquery key events to the “map” canvas (?) But for now we can do one small code change and fix it for this example.

Open up the file:

C:\<path>\nowjs-mutiplayer-map-tutorial\public\javascriptsfolder\map.js

And modify the following line of code:

$(‘#map’).keydown(function(e) {

to be:

$(document).keydown(function(e) {

Refresh the client and you should see the grid scroll as you move around. Open up a second tab or browser and navigate to the same URL and you should see each dot move around independently.

I hope you learned some things from this post. If there are any errors/questions feel free to post them.

-rOck

In my previous post: http://www.rockhowse.com/?p=16

I detailed my attempts at getting a real time webgl based project to work using dnode. Due to my lack of understanding node.js and compatibility issues I was unable to get it to work using the latest dnode. While researching, I came upon another API that offers real time data called now.js.

If you check out one of the examples:

http://nowjs.com/examples/map

It shows a 2d map that syncronizes each player’s (represented by a dot) position on a 2d plane. Pretty cool =)

I put the code for the project on github.com so if people wanted to play around with it they can get up to speed quickly by using npm instead of having to cobble together an example based off the source code posted on the nodejs site.

Here is the link:

https://github.com/rockhowse/nowjs-multiplayer-map

Here is a screenshot of it running in Chrome and Firefox. Each dot represents a player:

While their demo code is pretty straight forward, for someone new to using node.js there is a lot going on behind the scenes that you need to know to get it to work >.< A few things to note are

• What is the surrounding HTML of the page used to contain the  example?
• How do you load an external javascript file inside the html using node.js?

As it turns out, these things can both be accomplished fairly easily I am sure, but I took it as a learning opportunity and implemented a version of it using express, jade and stylus node modules. These basically make it easier for you to serve out web pages using HTML and CSS based templating.

If you have any questions feel free to post them here or on github.  Next up, I am going to create a step-by-step walkthrough on how I created the project from scratch so if people are wondering how to get express/jade/stylus up and going they have a place to start.

-rOcK