Now that we have a cocos2D app being served from NodeJS and being hosted in the cloud we now need to get down to the application itself.
One of the biggest parts of this app is actually the plumbing behind the scenes. Essentially I need to be able to upload images to a server and retrieve them on demand. For each image I need to be able to add a description. So that is what we are going to create here.
If you were ever wondering how to create a full web application using just JavaScript on the client and server, the end result of this exercise is going to show you exactly that.
There are a few warnings before hand!
1- Heroku doesn’t persist files. So anything you upload to this example application, it will eventually be lost. In my actual application I am going to be hosting the actual images to my Dropbox account or using a private Redis database, but in either case, it’s not information I want to share publically. If you have questions about how I do either, I will gladly answer them.
2- THIS ONE IS IMPORTANT!!! I have shared full access to this application to everyone. That means anyone at any time can upload any picture they want! So, be aware before you click any links, who knows what you might see! Also, anyone can delete all the existing images too, so again, don’t expect your uploads to survive long. It is live for demonstration purposes only, if you want to run something similar, fork it and host your own privately. Use at your own risk! GameFromScratch.com takes no responsibility for any content that might be updated.
Finally, please be civilized about it.
Alright, the warnings and disclaimers out of the way, let’s continue.
We are going to take our existing cocos2D audio sample application and add a settings button to the top right corner, like so:
In order to do so, we are going to make the following changes to Index.html, the file that is served if people request the root of our application:
index.html
<html> <body style="padding:0; margin: 0; background: #fff;"> <div stype="width:100%;height:50px"> <form> <div align=right> <input align=right type=button value=settings id=settings onclick="document.location.href='/settings';" /> </div> </form> </div> <div style="text-align: center; font-size: 0"> <canvas id="gameCanvas" width="600" height="600"> Your browser does not support the canvas tag </canvas> </div> </body> </html> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script src="classes/cocos2d.js"></script>
Really, the only major changes here is the addition of a form, with a button inside with a crude JavaScript redirect to /settings.
In our node server application, we now need to handle this new route:
Add the following to server.js
server.get('/settings',function(req,res){ res.sendfile('settings.html'); console.log('Send settings.html'); });
This will now cause any requests to /settings to return settings.html. This document is the webpage where most of the new functionality occurs. It allows you to select multiple images ( at once using CTRL or SHIFT click ), apply a description to each, and upload it to the server. It also allows you to review the existing images, as well as clear them all.
Let’s take a look at the code.
settings.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>First This Settings</title> <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> <script> YUI().use('uploader', function(Y){ var uploader = new Y.Uploader( {type:"HTML5", uploadURL:"/upload/", multipleFiles:true } ); uploader.render("#selectFiles"); uploader.after("fileselect", function(event){ var files = event.fileList; var table = Y.one("#filenames tbody"); if(files.length > 0) { Y.one("#buttonUpload").set("disabled",false); } Y.each(files,function(file){ table.append("<tr>" + "<td>" + file.get("name") + "</td>" + "<td>" + file.get("size") + "</td>" + "<td><input type=text id=" + file.get("name") + "></td></tr>"); }); }); uploader.on("alluploadscomplete", function(event) { // Hackish page reload alert("Files added successfully"); document.location.href="/settings"; }); Y.one("#buttonUpload").on("click", function(){ if(uploader.get("fileList").length > 0){ var perFileVars = {}; Y.each(uploader.get("fileList"),function(curFile){ perFileVars[curFile.get("id")] = {description:Y.DOM.byId(curFile.get("name")).value}; }); uploader.set("postVarsPerFile", Y.merge(uploader.get("postVarsPerFile"),perFileVars)); uploader.uploadAll(); } }); }); YUI().use('io-base','node',function(Y){ Y.io('/getPhotos',{ on: { complete:function(id,response){ var files = JSON.parse(response.responseText); Y.log(files); var table = Y.one("#existingFiles tbody"); for(var key in files) { table.append("<tr>" + "<td><a href=/image/" + files[key].name + ">" + files[key].name + "</a></td>" + "<td>" + files[key].size + "</td>" + "<td>" + files[key].description + "</td></tr>"); } } } }); Y.one("#buttonClear").on("click", function(){ Y.io('/clearAll',{ on:{ complete:function(id,response){ document.location.href="/settings"; } } }); }); }); </script> </head> <body> <form> <div style="border:50px"> <div id=selectFiles> </div> <div> <table id="filenames"> <thead><tr> <th width=350px align=left>File Name</th> <th align=left>File Size</th> <th align=left>Description</th> </tr></thead> <tbody></tbody> </table> </div> <div align=right> <br /><br /> <hr /> <button disabled="true" type="button" id="buttonUpload"class="yui3-button" style="width:250px;height:40px;align:right;">Upload Files</button> </div> <div> <br /><hr /> <table id="existingFiles"> <thead><tr> <th width=150px align=left>File Name</th> <th align=left width=60px>File Size</th> <th align=left>Description</th></tr></thead> <tbody></tbody> </table> </div> <div align=right> <br /><br /> <hr /> <button type="button" id="buttonHome"class="yui3-button" onclick="document.location.href='/'" style="width:250px;height:40px;align:right;">Done</button> <button type="button" id="buttonClear"class="yui3-button" style="width:250px;height:40px;align:right;">Clear All Files</button> </div> </div> </form> </body> </html>
Please ignore the wonky formatting, it was done to fit it to this blog width.
As you can see right off the hop, this code makes use of the YUI libraries, a handy set of utilities to perform many common tasks. In this case I am using them for the Uploader control, as well as for making networked requests back to the server with Y.io. The YUI libraries are beyond the scope of this document, but fortunately their documentation is extremely good. If you would prefer to use jQuery instead, feel free.
In a nutshell, here is what we are doing ( from the top ):
- create a YUI closure Y, with the uploader module functionality supported
- create a new uploader, HTML5 style (instead of Flash), set its upload path ( the url it will submit to ) to /upload and finally tell it to support multiple files at once. This is a big part of why I chose it in the first place, as otherwise with the standard HTML controls, you need to upload files one by one.
- we then set the uploader to render to the selectFiles div we will define shortly. This simply tells the control where to draw itself.
- We then wire up an event handler for after the user has selected files. If the user has selected at least one file, we enable the upload button, we then loop through the selected files and dynamically populate the table named filenames. Perhaps most importantly, for each table row, we create a text field for entering the description, with the filename as it’s id.
- Next we wire up an event handler for the “alluploadscomplete” event, which is fired predictably enough, when all uploads are complete. In this case we just display a message and redirect to the settings page.
- We then wire up a click handler for the upload button. This loops through all of the files select, and grabs the description value we specified in the text field and merges in to the data that is going to be posted back to the server. Essentially this means the data you enter is each description field is going to be posted along with your files back to the server. Finally we actually perform the upload by calling uploadAll().
- Next I create a different YUI closure with different dependencies ( io-base and node ). I do this simply as personal preference, as I find it makes code easier to move around. If you preferred, you could have made a single call to YUI().use.
- This code is basically going to be executed on page load or there abouts ( we don’t really care when ), which makes a network request to /getPhotos, which is a web service that returns a JSON structure of all the photos on the server. We then loop through the results and display them to another table, existingFiles.
- next we wire-up another button handler, this one is if the user clicks the Clear All button, which calls the clear all web service, which predictably enough, clears all the photos. Finally it reloads the page, so the tables will be redrawn.
- Everything else is just standard HTML.
There is actually quite a bit of functionality packed in to a fairly small amount of code. As we saw, we added a number of new functions to the server, lets take a look at them.
server.js
var express = require('express'), server = express.createServer(), files = {}; server.use('/cocos2d', express.static(__dirname + '/cocos2d') ); server.use('/cocosDenshion', express.static(__dirname + '/cocosDenshion') ); server.use('/classes', express.static(__dirname + '/classes') ); server.use('/resources', express.static(__dirname + '/resources') ); server.use(express.bodyParser()); server.get('/', function(req,res){ res.sendfile('index.html'); console.log('Sent index.html'); }); server.get('/settings',function(req,res){ res.sendfile('settings.html'); console.log('Send settings.html'); }); // API calls server.get('/image/:name', function(req,res){ if(files[req.params.name]) { res.contentType(files[req.params.name].contentType); res.sendfile(files[req.params.name].path); console.log("Returning file" + req.params.name); } }); server.get('/getPhotos', function(req,res){ res.json(files); }); server.get('/clearAll', function(req,res){ files = {}; res.statusCode = 200; res.send(""); }) server.post('/upload',function(req,res){ files[req.files.Filedata.name] = { "name":req.files.Filedata.name, "path":req.files.Filedata.path, "size":req.files.Filedata.size, "contentType":req.files.Filedata.type, "description":req.body.description }; console.log(req.files.Filedata); console.log(Object.keys(files).length); res.statusCode = 200; res.send(""); }); server.listen(process.env.PORT || 3000);
First off, we have added the files var, which is going to hold our file data in memory. The server.post() handler for upload is probably the most significant change. This code takes the uploaded form information and populations our files data. One key addition though was:
server.use(express.bodyParser());
This tells express to install a piece of middleware, that actually processes the form data, and is what makes the /upload method actually have data.
/clearAll is handled by simply erasing our files data, while /getPhotos simply returns that data in JSON format.
At this point if you are following along at home, you may be wondering how to submit your changes up to heroku. The process is fairly simple, from a command prompt in your app folder:
heroku login ( give username and password )
git add .
git commit –m “description of changes”
git push master heroku
In a nutshell these commands a) log you in to heroku b) adds all the new files to your local git repository c) commits the changes you have made into your git repository d) pushes that repository up to heroku. Heroku will automatically restart your app.
Here then is our application running on heroku. Click the settings link in the top right corner to bring up the new settings page we just created.
In the next part, now that we have a server, a client and some data to work with, we will get down to the actual task of creating our simple game.
Here ( assuming it is running ), is our application. Again, I warn you about whatever content might be live!
General Programming