Difference between revisions of "WebFund 2014W: Tutorial 10"
(Created page with "'''This tutorial is not yet finalized.''' Note that the material for today's tutorial is optional. If you are behind use this time to work on other material related to this ...") |
(→JSON) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
'' | Note that the material for today's tutorial is optional. If you are behind use this time to work on other material related to this class (and ask TAs about it to get attendance credit). | ||
In this tutorial you'll learn about websockets and how they compare to AJAX for client-server communications. | |||
First, go through the WebSockets tutorial by Pedro Teixeira: | |||
* [http://blog.safaribooksonline.com/2013/06/10/node-js-websockets-modular-approach/ The WebSockets tutorial] | |||
* [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T10/websockets-demo.zip A local copy of code with modules] | |||
* [https://github.com/pgte/websockets-modular-approach-article-code code on github] | |||
''Don't forget to open the JavaScript console to see the client side output!'' If you have problems in Firefox be sure to try it in Chrome. | |||
Note that this tutorial makes use of several unfamiliar packages: | |||
* [https://github.com/substack/shoe shoe], a websockets library for node | |||
* [https://github.com/jesusabdullah/node-ecstatic ecstatic], a standalone static file web server for node (that can also be [https://github.com/jesusabdullah/node-ecstatic/blob/master/example/express.js used with express]) | |||
* [http://nodejs.org/api/stream.html node streams] form the base class for shoe and many other core node modules including http.createServer() | |||
You may want to spend some time looking at these to see how they integrate with node. | |||
After you get the ping/pong example working, your main task is to use this code to change [http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T6/adventure-ajax-demo.zip adventure-ajax-demo] from [[WebFund 2014W: Tutorial 6|Tutorial 6]] to use websockets (i.e., shoe) instead of AJAX (getJSON and post on the client) to update room state. | |||
==Hints== | |||
===JSON=== | |||
To turn a JavaScript object x into a JSON string s: | |||
s = JSON.stringify(x); | |||
To turn a JSON string s into a JavaScript object: | |||
x = JSON.parse(s); | |||
For more details, see [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_native_JSON Mozilla's documentation]. | |||
Latest revision as of 09:13, 28 March 2014
Note that the material for today's tutorial is optional. If you are behind use this time to work on other material related to this class (and ask TAs about it to get attendance credit).
In this tutorial you'll learn about websockets and how they compare to AJAX for client-server communications.
First, go through the WebSockets tutorial by Pedro Teixeira:
Don't forget to open the JavaScript console to see the client side output! If you have problems in Firefox be sure to try it in Chrome.
Note that this tutorial makes use of several unfamiliar packages:
- shoe, a websockets library for node
- ecstatic, a standalone static file web server for node (that can also be used with express)
- node streams form the base class for shoe and many other core node modules including http.createServer()
You may want to spend some time looking at these to see how they integrate with node.
After you get the ping/pong example working, your main task is to use this code to change adventure-ajax-demo from Tutorial 6 to use websockets (i.e., shoe) instead of AJAX (getJSON and post on the client) to update room state.
Hints
JSON
To turn a JavaScript object x into a JSON string s:
s = JSON.stringify(x);
To turn a JSON string s into a JavaScript object:
x = JSON.parse(s);
For more details, see Mozilla's documentation.