Difference between revisions of "Mean Stack"

From CSE330 Wiki
Jump to navigationJump to search
(Moving API and examples to Pong Game)
(Moving more content to Pong Game)
Line 42: Line 42:
 
Press '''C-x C-c''' to exit emacs.
 
Press '''C-x C-c''' to exit emacs.
  
−
=== Setting Up for the Pong Game ===
 
−
 
−
First thing first: set up a static file server running Node.JS.  We will need it in order to serve up our HTML and JavaScript content.
 
−
 
−
==== Your First File: pong-game.js ====
 
−
 
−
The first file you can save in your ''static'' directory will be ''pong-game.js'', which you can download from here: http://classes.engineering.wustl.edu/cse330/content/pong-game.js
 
−
 
−
We created the ''pong-game.js'' file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module.  This file contains the core Pong engine, but it does ''not'' establish communication between users of any kind.  Note that the file ''does'' depend on Ext JS.
 
−
 
−
If you are curious, we used the [http://www.limejs.com/ LimeJS] framework as the backbone of ''pong-game.js''.  You can find the pre-compiled source code for the Pong game here:
 
−
 
−
* http://classes.engineering.wustl.edu/cse330/content/pong.js
 
−
* http://classes.engineering.wustl.edu/cse330/content/ball.js
 
−
 
−
We then used the [https://developers.google.com/closure/compiler/ Google Closure Compiler] to compile all of the libraries you need into the one modular JavaScript file.
 
−
 
−
Just to be clear, ''for the purposes of Module 7, you do not need to bother with either LimeJS or Google Closure.''
 
−
 
−
==== Your Second File: client.js ====
 
−
 
−
You should create an additional file, ''client.js'', which you include into ''client.html'' and which contains the client-side logic for your Pong game.  It should load after ''pong-game.js''.  Start with the following code in your ''client.js'':
 
−
 
−
<source lang="javascript">
 
−
Ext.onReady(function(){
 
−
Ext.fly("gameContainer").enableDisplayMode().hide(); // hide the game canvas by default
 
−
Ext.fly("controls").hide(); // hide the play/pause button; we will not be using this feature for the purposes of Module 7
 
−
});
 
−
</source>
 
−
 
−
==== Your Third File: client.html ====
 
−
 
−
The third file you can save in your ''static'' directory should be an HTML file created from your favorite [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy Page Layout]].  You need to add the following CSS rules:
 
−
 
−
<source lang="css">
 
−
#gameContainer{
 
−
margin: 0 auto;
 
−
width: 960px;
 
−
height: 500px;
 
−
}
 
−
#controls{
 
−
height: 20px;
 
−
text-align: center;
 
−
}
 
−
#game{
 
−
width: 960px;
 
−
height: 480px;
 
−
border: 1px solid black;
 
−
}
 
−
</source>
 
−
 
−
Add the following HTML inside your ''main'' div; this is what will contain the Pong game canvas:
 
−
 
−
<source lang="html4strict">
 
−
<div id="gameContainer">
 
−
<div id="controls">
 
−
<button id="pauseBtn">
 
−
Pause/Resume
 
−
</button>
 
−
</div>
 
−
<div id="game"></div>
 
−
</div>
 
−
</source>
 
−
 
−
You also need to require the Ext JS core library, ''pong-game.js'', and ''client.js''.
 
−
 
−
<source lang="html4strict">
 
−
<script src="//cdn.sencha.io/ext-4.2.0-gpl/ext.js"></script>
 
−
<script src="pong-game.js"></script>
 
−
<script src="client.js"></script>
 
−
</source>
 
−
 
−
'''Note:''' Although ''pong-game.js'' uses Ext JS, it only uses the low-level functionality, like DOM traversal and event listeners.  It does ''not'' uses anything fancy like Extensible Calendar.
 
−
 
−
=== Connecting to Socket.IO ===
 
−
 
−
Now that you have your static fileserver running that serves up your three files (''pong-game.js'', ''client.html'', and ''client.js''), we need to connect everything with Socket.IO.
 
−
 
−
Follow the instructions in [[Socket.IO|the Socket.IO guide]] for installing Socket.IO.  In your ''app.js'', add the following lines:
 
−
 
−
<source lang="javascript">
 
−
io.listen(app).sockets.on("connection", function(socket){
 
−
// This closure runs when a new Socket.IO connection is established.
 
−
 
−
// Listen for client messaging server:
 
−
socket.on("message", function(content){
 
−
// do stuff
 
−
});
 
−
 
−
// Send a message from the server to the client:
 
−
socket.emit("message", {some:"data"});
 
−
});
 
−
</source>
 
−
 
−
Don't forget to require socket.io at the top of your file!
 
−
 
−
<source lang="javascript">
 
−
io = require("socket.io")
 
−
</source>
 
−
 
−
You also need to make sure to install ''socket.io'' from npm.
 
−
 
−
Inside of the ''io.listen'' callback function is where most of your server-side code will go.
 
−
 
−
On the client side, you need to include the Socket.IO library (put this below Ext JS but above ''pong-game.js'' and ''client.js''):
 
−
 
−
<source lang="html4strict"><script src="/socket.io/socket.io.js"></script></source>
 
−
 
−
And finally, you need to connect your client to the Socket.IO server (put this in ''client.js''):
 
−
 
−
<source lang="javascript">var socket = io.connect(window.location.origin);</source>
 
−
 
−
But enough of us giving you all the code!  It's time for you to start being creative.
 
  
  

Revision as of 04:22, 13 November 2013

Module 7 builds upon the JavaScript skills you learned in Module 6.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

Individual Assignments

Install Node.JS

Install Node.JS from Apt or Yum according to the instructions in the Node.JS guide.

Static File Server in Node.JS

The individual portion of Module 7 is short in order to give you enough time to complete the group portion.

  1. Copy the example code from the Node.JS guide into a file called static_server.js or something of that nature. Save it on your EC2 instance (but not in a place that Apache can serve!).
    Ensure that you understand what the static file server script is doing… this might show up on a quiz!
  2. Make a directory parallel to static_server.js named static.
  3. Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
  4. Save the following files in your static directory: 
    <?php   phpinfo();   ?>
  5. Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.
    Which ones work and which ones don't? Why might this be the case?

Group Project

In the group portion of Module 7, you will be building a multiplayer, networked Pong game using Node.JS and Socket.IO.

If you want to reminisce and play some Pong on the command line before building it in Node.JS, here is the command, assuming you have emacs installed: 

$ emacs -q --no-splash -f pong

Press C-x C-c to exit emacs.


Grading

We will be grading the following aspects of your work. There are 75 points total.

  1. Individual Portion (20 Points):
    • Node.JS is installed on your EC2 instance (5 points)
    • The hello.txt, brookings.jpg, and city.html files all load successfully (3 points each)
    • Visiting a file that does not exist inside the static directory results in a 404 (3 points)
    • You can explain to the TA why phpinfo.php behaves the way it does when loaded through Node.JS (3 points)
  2. Pong Game (45 Points):
    • Matching Pairs of Players (10 Points):
      • Players are able to specify a name for themselves (3 points)
      • Players are able to initiate a game on their own (4 points)
      • When a game is started, both players need to consent (3 points)
    • Gameplay (10 Points):
      • The Pong game works (3 points)
      • There is a pause between a player losing a round and the ball being launched for the next round (3 points)
      • Victory condition is enforced (e.g., the first player to score 10 points wins the game) (4 points)
    • Socket.IO Communications (15 Points):
      • A mapping of players to their opponents exists on the server side (without this, you can't complete any other parts of the Socket.IO section) (3 points)
      • Start Game and End Game is forwarded from one client to the other via Socket.IO (3 points)
      • Paddle Moving is forwarded from one client to the other via Socket.IO (3 points)
      • Ball Hitting and Missing Paddle is forwarded from one client to the other via Socket.IO (3 points)
      • Ball Launching is forwarded from one client to the other via Socket.IO (3 points)
    • Best Practices (5 Points):
      • Code is well formatted and easy to read (2 points)
      • All pages pass the W3C validator (1 point)
      • There are no XSS vulnerabilities (2 points)
      • Extra Credit: Your client.js code passes JSHint, a JavaScript validator (+3 bonus points)
    • Usability (5 Points):
      • Finding friends on the Pong interface is easy and intuitive (4 points)
      • Site is visually appealing (1 point)
  3. Creative Portion (10 Points)
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Mean_Stack&oldid=1667"