This is the 4th in a series of posts leading up to Node.js Knockout on how to use Socket.IO. This post was written by socket.io creator Guillermo Rauch.
Ready to rock the Node Knockout 3? Considering making a real-time app or game? Then you’re likely considering Socket.IO
If the web 2.0 was about AJAX requests and responses, the real-time web is about events.
With Socket.IO, you can emit events from the server to the client and vice-versa, at any time.
Consider the following example, in which we push data from the server to the client every 3 seconds. We’re going to get the latest tweets and render them on the client.
On the server side, we create a directory called example/ with the
following package.json inside:
{
"name": "example"
, "version": "0.0.2"
, "dependencies": {
"socket.io": "~0.9.10"
, "request": "~2.11.4"
}
}
Then run npm install. That will get Socket.IO and a library to make
http requests (to Twitter) very simple to write.
Create an app.js with the following:
var sio = require('socket.io')
, http = require('http')
, index = require('fs').readFileSync(__dirname + '/index.html')
, request = require('request')
var app = http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(index);
})
, io = sio.listen(app);
app.listen(3000);
So far, we initialized a HTTP server that serves the index file, and we attach Socket.IO to it. We then make it listen on port 3000.
We’re now gonna search twitter every 2 seconds to send tweets to the client. The clients don’t explicitly request it like in traditional Ajax, but we push it to them:
setInterval(function () {
request({
url: 'http://search.twitter.com/search.json?q=today'
}, function (err, res, data) {
var obj = JSON.parse(data);
io.sockets.emit('tweets', obj.results.map(function (v) { return v.text; }));
});
}, 2000);
Notice that I accessed the io.sockets property. That’s what we call the
Manager of sockets, which also emits a connection event for individual
people that connect:
io.sockets.on('connection', function (socket) {
socket.broadcast.emit('someone connected');
socket.on('some event', function () {
console.log('I got an event');
});
});
In this case, I’m making this socket broadcast to others that it connected.
Broadcasting from the socket object means in this case we’re sending a message to
everyone else, except for that particular socket.
Now that we’re done with the server part, we capture these events on the client
and do some jQuery juggling. Create an index.html with this code:
<!doctype html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var socket = io.connect();
$(function () {
socket.on('tweets', function (tweets) {
$.each(tweets, function (i, tweet) {
$('#tweets').prepend($('<li>').text(tweet));
});
});
socket.on('someone connected', function () {
$('body').prepend('<p>Someone just connected!</p>');
});
socket.emit('some event');
});
</script>
</head>
<body>
<h1>Tweets</h1>
<ul id="tweets"></ul>
</body>
</html>
Many times you need to emit information to certain people and not others.
Use socket.join:
io.sockets.on('connection', function (socket) {
socket.join('fighters');
});
Then you can broadcast and emit to those people:
// to all sockets in a group
io.sockets.in('fighters').emit('something');
// from a socket to the rest of the sockets
socket.broadcast.to('fighters').emit('something else');
Remember the broadcast property that I accessed above? That’s what we call a
flag:
A useful one for game developers is called the volatile flag. If you ever
have data that it’s not absolutely crucial that the client gets if the client
has not finished receiving previous messages, you can make that volatile:
socket.volatile.emit('position', x, y);
If the player changes its x and y coordinates really quickly, and we’re not
done sending a particular position, some packets will be dropped. This will
make things faster in many scenarios.
On both ends (server and client side), you can pass a function to request a explicit data response. Consider an example where the chat client sets a nickname, but you want to validate whether it’s available or not.
On the client:
socket.emit('set nickname', $('#my-input').val(), function (available) {
if (available) {
alert('Nick is available. Congrats!');
} else {
alert('Nick not available');
}
});
On the server:
io.sockets.on('connection', function (socket) {
socket.on('set nickname', function (fn) {
isNickNameAvailable(function (bool) {
fn(bool);
});
});
});
You can check out the example on GitHub. Clone the repo, then run
npm install and node app and point your browser to
http://localhost:3000!
These are all the tools in your toolbox. Go make great realtime apps!
This is the 3rd in a series of posts leading up to Node.js Knockout on how to use Express. This post was written by express author Tj Holowaychuk.
In this short tutorial for Node Knockout we will be creating a small application using the popular Express framework.
Express is a light-weight Sinatra-inspired web development framework. Express provides several great features such as an intuitive view system, robust routing, an executable for generating applications and much more.
To get started with Express we first have to install it. There are several ways to do so, however the easiest is with npm:
$ npm install express@3.x
To create our first application we could use express(1) to generate an
app for us, however an Express app can be a single JavaScript file if we
wish, and in our case of a simple “Hello World” app that is exactly what
we will do.
The first thing we need to do is require express, and create an app.
var express = require('express'),
app = express();
Our next task is to set up one or more routes. A route consists of a
path (string or regexp), callback function, and HTTP method. Our hello
world example calls app.get() which represents the HTTP GET
method, with the path “/”, representing our “root” page, followed by the
callback function.
app.get('/', function(req, res){
res.send('Hello World');
});
Next we need set up a server to listen on a given port. Below we call
listen(3000) which attempts to create a server and bind it to port 3000.
This can be whatever you like, for example listen(80).
var server = app.listen(3000);
console.log('Express server started on port %s', server.address().port);
Note: for Node Knockout, please ensure your production code listens on port 80.
We can execute the app simply by executing node(1) against our
JavaScript file:
$ node app.js
Express server started on port 3000
Finally to confirm everything is working as expected:
$ curl http://localhost:3000
Hello World
Behind the scenes the Connect middleware framework developed by
myself (TJ Holowaychuk) and Tim Caswell is utilized to power the
Express middleware. For example if we wish to add logging support to our
hello world application, we can add the following line below app =
express();:
app.use(express.logger());
For more information on middleware usage view the Middleware section of the Express documentation.
Below is all 12 lines of source we used to create our first Express application:
var express = require('express'),
app = express();
app.use(express.logger());
app.get('/', function(req, res){
res.send('Hello World');
});
var server = app.listen(3000);
console.log('Express server started on port %s', server.address().port);
This is the 2nd in series of posts leading up to Node.js Knockout about how to use npm. This post was written by npm author Isaac Schlueter.
npm is a NodeJS package manager. As its name would imply, you can use it to install node programs. Also, if you use it in development, it makes it easier to specify and link dependencies.
npm now comes with node. So once you install node you’ll generally have npm too.
More advanced ways to get npm can be found in the npm README.
npm helpnpm has a lot of help documentation about all of its commands. The npm
help command is your best friend. You can also tack --help onto any
npm command to get help on that one command.
npm search & npm infoYou probably got npm because you want to install stuff. That’s what package managers do, they install stuff.
The first step in installing something is discovering what to install.
That’s where npm search comes in handy. It’ll search the package
registry for anything that matches the search term you provide and
print out a list matching packages, along with descriptions.
$ npm search memcached
connect-memcached Memcached session store for Connect
kizzy x-browser LocalStorage API with a memcached interface
memcache simple memcache client
memcached A fully featured Memcached API client, supporting both single
nMemcached A fully featured Memcached client, supporting both single and
npm info will get you more details about a package: namely, the
contents of the package.json file. From there, you can usually find
everything you need to evaluate if it’s the right package for you.
npm installnpm install blerg installs the latest version of blerg. You can
also give install a tarball, a folder, or a url to a tarball.
This command can do a lot of stuff. npm help install will tell you
more than you ever wanted to know about it.
package.jsonBecause so many great npm packages are already written and ready for you to use, it’s pretty rare that to write code that doesn’t depend another package.
While you could just manually install all your dependencies by running
npm install blerg, that doesn’t really help you remember what packages
you’re using, and if you share the repository or try to install it
somewhere else, you’ll have to manually install all the packages again.
Instead, you can specify your dependencies in the package.json file.
The package.json file goes in the root of your project. It tells npm
how your package is structured, and what to do to install it, and most
importantly, what dependencies it relies on. Here’s what the
Node.js Knockout package.json file looks like.
For projects without dependencies, you only need the "name",
"version", and "main" fields (even for node-waf compiled addons).
However, it’s likely you’ll also want to specify "dependencies" and
"devDependencies" in your package.json file. "dependencies" lists
the packages that your project relies on in both production and
development. "devDependencies" lists the packages, like test suites
and debugging tools, that are only useful in development.
Some useful shortcuts: you can easily create a valid package.json file
with the npm init command, and npm install blerg --save will install
the blerg package and automatically add it as a dependency.
Now, if you run npm install without any arguments, it will
automatically install your project’s dependencies.
One added bonus: when you add a package.json file to your project,
your project itself becomes a package, and you can easily publish it
to the npm registry (see below for more info).
npm lsThe npm ls command shows what packages you have installed, as a
convenient dependency tree. It will also print out extraneous, missing,
and invalid packages; which is useful for troubleshooting.
npm help ls for more info.
npm linknpm is a development tool, first and foremost. People sometimes say “Yeah, I haven’t gotten time to check out that package manager stuff yet. Maybe I will when my code is more stable.”
That’s like saying that you’re going to start using source control when your code is done. It’s just silly. Source control should make your process easier, and if it doesn’t, then you’re using a broken SCM. Same for package management. It should make it easier, and if it doesn’t, then something is wrong.
The link command symlinks a package folder that you are actively developing into any ohter project that you’re working on, so that changes are automatically reflected.
This is one of the most useful tools for developing programs with node.
Give your thing a name and a version in a package.json file. Specify
a few dependencies and a main module. Then run npm link, and go to
town coding it and testing it out in the node repl. It’s great.
npm isn’t “for” publishing. That’s just something it can do. It’s “for” playing. That’s why I wrote it: to play with your code, without having to remember a dozen different ways to install your stuff, or having to get you all to structure your code the same way.
It’s supposed to make the process funner.
npm publishSo, you created a package, and you can install it. Now you want the everlasting fame and glory that comes with other people using your code. There is no better way to ensure your immortality than eventually being a part of every web app out there, and the best—nay, the ONLY—way to truly accomplish this is to publish nodejs packages.
First, create a user account with npm adduser. Give it a username,
password, and email address, and it’ll create an account on the npm
registry. (You can also use adduser to authorize a user account on a
new machine, or fix the situation if you break your configs.)
Next, go to the root of your package code, and do npm publish.
Now go to the mailing list and tell everyone how much more awesome they’d be if they used your program.
Seriously. It’s incredibly easy. If you disagree, please let me know.
Most systems have a single root namespace. That kind of sucks. If two different things depend on different versions of the same dependency, then you’ve got two options:
Option #2 is Not Fun. So eff that noise.
Option #1 is less than ideal if you want to be able to abstract out parts of your program and benefit from updates to the dependencies.
Thankfully, Node’s module system allows for locally bundled dependencies, so that each package sees the version that it depends on.
I think that’s pretty cool.
npm’s still being actively developed. Especially if you find yourself using some newer features, occasionally npm will have a bug. Or, perhaps equally likely, you’ll need npm to do something that it doesn’t yet do, and want to request a feature.
You can post bugs and feature requests on the issues page. If you want to ask general questions, you can ask on the google group.
Or, if you’re more the instant gratification type, you can come ask questions in IRC on the #node.js channel on freenode.net. If I’m there, I’ll try to help you out, but this community continues to impress me with its helpfulness. Noders rock!
This is the 1st in series of posts leading up to the 3rd annual Node.js Knockout about how to use node.js.
This post covers how to install node and npm on three popular development platforms: Mac, Ubuntu, and Windows.
Instructions for other platforms can be found on the Node Wiki.
We personally use package managers to make it easier to keep our node installation up to date, so that’s the approach we generally describe below.
However if you want to skip the steps and download pre-built binaries, you can do so at Joyent’s site: download a binary.
brew install node.That’s it! Check it worked with a simple Hello, World! example.
On the latest version of Ubuntu, you can simply:
sudo apt-get install nodejs nodejs-dev npm
On earlier versions, you might need to update your repository:
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs nodejs-dev npm
Then, check it worked with a simple Hello, World! example.
Since Windows package managers are less common, we recommend just downloading the Windows binary.
Here’s a quick program to make sure everything is up and running correctly.
// hello_node.js
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Run the command by typing node hello_node.js in your terminal.
Now, if you navigate to http://127.0.0.1:8124/ in your browser, you should see the message.
You’ve installed node.js and npm.
After much delay, we’re happy to announce the Node.js Knockout winners!
Observer allows you to watch your application users in real time, and see in your browser what they are doing, all the events are duplicated and emulated.
If a user clicks on a button that triggers an alert or a other javascript interaction, the same interaction will happen on your page. You can see what the users are typing or what keyboard shortcuts they are using.
If you want to interact with the following user you can press the chat
button at the top of the menu bar to start a anonymous chat with them.
Don’t have time to follow all your users? No problem, all session are stored in our database so they can be re-played at a later point of time.
A collaborative, social beat and melody sequencer.
Driv.in is an YouTube battle party in a virtual drive in. You can create rooms to share with your friends and watch videos together in real time. When your friends enter in the middle of the video, they will be positioning at the point that everybody is viewing, so everybody will be at the same video time. When the current video ends, the next video will be played automatically.
This app is great for being a VJ for a day: create and share a playlist of your favorite artist from YouTube. You and your friends can also suggest new videos, throw tomatoes at the bad ones and chat along!
The game of telephone with drawings!
ACROnode is a wordplay game where players are given a random acronym and are challenged to create “backronyms.” For example, when presented with NBAM you might play Narwhal Bacons At Midnight.
Loosely based on the original Acrophobia IRC game, players score each other’s backronyms and are awarded points based on the number of votes, for being the first to submit your backronym, etc.
Blue Lava is a small demo showing the node-webgl library written during the first half of Node.js Knockout.
The entry is not the visualization itself, but the library that allows it to run on node directly without the help of a browser. The library specifically targets the HP TouchPad, but it runs on other platforms as well.
The visualization is a fairly simple OpenGL scene with fairly complex GLSL shaders that push most the computation on the GPU. The animation is 100% procedural and rendered in real-time.
You can see a demo here: http://creationix.com/minimason.m4v
Using this library, a developer can create very advanced video games for just about any modern platform and use node to write it.
The library can be found at https://github.com/creationix/node-webgl and will be licensed under MIT. It’s published to npm under “webgl”. Patches are welcome after the contest to keep this alive and well.
Let’s break the Guinness world record for largest chess AI !
Do you think you’re good enough to beat the cloud? Give it a try.
Not a Chess GrandMaster? Join the machine uprising! To be a part of the compute grid, just visit Chess@home or any page with a <script> we provide (include it in your blog!). People with a few idle CPUs can also launch a worker with npm.
(We plan to invite an actual GrandMaster along with a Guinness official in a few weeks and coordinate online so that we all break the current 2070-world record and make Node.js a part of history! ;-) Follow @chess_at_home to be kept updated).
Congratulations to all who participated. There were a ton of great entries this year!
We will be following up with winners directly over email shortly.
You can pass CSS to the Vote KO badge using a query parameter. This is particularly useful if you have a dark background:
<iframe src="/iframe/fortnight-labs?css=https://raw.github.com/gist/1176404/e336c0efd7c6d78fa1f49fda2f5e813ab747f580/ko-button.css"></iframe>
In case you haven’t heard of Pusher before, we are a hosted service for adding realtime features quickly and easily to your web and mobile applications. Our main transport mechanism is WebSockets, and we think WebSockets are the bomb.
We have specialised in building a scalable infrastructure that can handle tons of connections, and making it easily accessible to developers. Our aim is to allow people to focus on building awesome stuff, rather than figuring out how to build distributed asynchronous systems.
The traditional mechanism for interacting with our service has been through a REST API. However, we have recently been working on a new interface that allows much deeper integration with the service. The working name for it is the Pusher Pipe, and we are allowing some early access during Node Knockout for people who are interested in giving it a spin.
The Pusher Pipe allows you to create a single bi-directional connection to our service, which relays messages to and from your end users, as well as information about how and when they are connecting. You could think of our Pipe as a cloud-based WebSocket loadbalancer/multiplexer, but with an awesome Node.js library to go with it.
Maybe you like deploying your Node.js code to Heroku, but their lack of WebSocket support makes you cry?
install the npm module:
npm install pusher-wsapi
Make a file called test.js, put in the following code (with your api keys) and run it
var Pusher = require('pusher-wsapi');
var pusher = Pusher.createClient({
key: 'yourkeycbfc8e5c02e22',
secret: 'yoursecretc1d6a1b4b',
app_id: 4,
debug: true
});
create an html page with this in it (substituting your keys)
<html>
<head>
<script type="text/javascript" src="http://js.pusherapp.com/1.10.0-pre/pusher.min.js"></script>
<script type="text/javascript">
Pusher.host = "ws.darling.pusher.com"
Pusher.log = function(message) {
if (window.console && window.console.log) window.console.log(message);
};
var pusher = new Pusher('cbfc8e5c02e22cd6307a')
</script>
</head>
</html>
Open up your html page in a browser and look at the output of your node process. You should see a new client connect!
Add the following to your node script and restart it:
pusher.sockets.on('event:eventFromBrowser', function(socket_id, data){
pusher.socket(socket_id).trigger('acknowledge', {message: 'Rodger'})
})
Refresh your html page, and open up a javascript console. Type in the following and hit return:
pusher.back_channel.trigger('eventFromBrowser', {some: 'data'})
To get involved, you’ll need to be invited by us, so get in touch with support@pusher.com if you want access.
The Pipe is not deployed to our production cluster, and we are actively looking for feedback at this stage. You may find that it works awesomely — some sample apps we built this week went swimmingly. However, it may blow up and kill your kitten. You can decide on the level of risk you prefer.
We are happy to provide the full MongoDB infrastructure for the Node Knockout competition this year. Here are some brief instructions for how to get started with using our service.
Create a MongoHQ account.
Go to https://www.mongohq.com/signup and create a MongoHQ account for you and your team. This will log you into MongoHQ.
Add your Node Knockout Database
Assuming you are still logged into MongoHQ, visit this link: https://mongohq.com/databases/new?promo=nodeko and from there, you will see one of the database options is for a Node Knockout database. Select the database, give it a name, and click the green “Create” button.
Get your Connection Info
Now that your database has been created, MongoHQ will present you with your connection strings. You can also access them from the “Database Info” tab. Now you can add the connection string to your application settings and you are ready to go.
Now that you are good to go, here are some popular drivers that you can use when running your projects. Please note that there is not an officially supported 10gen driver for Node and MongoDB. All these are community-supported.
Here’s a quick overview of how to get your Node.js Knockout app up and running correctly. Please review the overview section of this post, as it contains essential information for the contest.
curl http://nodeknockout.com/id_nko2.pub >> ~/.ssh/authorized_keys to grant NKO organizers access.For these instructions you will need two keys, both available on your team page:
your-team-slugyourteamsecretYou want to make sure you have a folder for everything before you get started.
$ mkdir your-team-slug
$ cd your-team-slug
$ curl http://npmjs.org/install.sh | sh
Then set up your package.json and dependencies:
$ npm init
$ npm install --save nko
server.js// server.js
var http = require('http')
, nko = require('nko')('yourteamsecret');
var app = http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('Hello, World');
});
app.listen(parseInt(process.env.PORT) || 7777);
console.log('Listening on ' + app.address().port);
Make sure you require the nko module or else your site will not be voted on:
require('nko')('yourteamsecret')
We use the nko module to determine where your site has been deployed,
so we can send judges to the right url to evaluate it.
Instruct git to ignore your npm dependencies.
$ echo node_modules > .gitignore
Then create a git repository and add everything to it.
$ git init .
$ git add .
$ git commit -m 'first commit'
Finally, set GitHub as the origin for the repository.
$ git remote add origin git@github.com:nko2/your-team-slug.git
$ git push -u origin master
Joyent, Heroku, and Linode are providing free, private instances for you to deploy your code during the competition.
The choice of service for your submission is up to you (kinda like Pokémon):
You cannot deploy to your own private server no matter how face-meltingly awesome it is.
Detailed instructions for deploying to no.de are available here.
The no.de hosting service has just launched! Please send support inquiries to node@joyent.com.
Create an account at no.de (or login).
Click “Order a Machine” button in the upper right hand corner.
your-team-slug.Click on the smart machine you ordered.
Follow the instructions on the smart machine page to add the host to
your ~/.ssh/config file.
Add joyent as a remote on your git repo:
$ git remote add joyent your-team-slug.no.de:repo
Now you should be able to deploy with a git push:
$ git push joyent master
Load your app in a browser to verify that it works.
http://your-team-slug.no.de/
Check your app is marked as deployed correctly on your team page.
Follow the invitation link in the invitation email you received from Heroku. Create a password in the invitation page.
Install the heroku gem on your development machine.
gem install heroku
Configure your heroku login credentials, using the same email and password you supplied in step 1. Answer yes when prompted to use your existing ssh key.
$ heroku login Enter your Heroku credentials. Email: user@domain.com Password: Found existing public key: /Users/user/.ssh/id_rsa.pub Would you like to associate it with your Heroku account? [Yn] y Uploading ssh public key /Users/user/.ssh/id_rsa.pub
Configure a Procfile, to instruct Heroku how to serve your app.
$ echo 'web: node web.js' > Procfile
Install Foreman and test your app locally (on port 5000 in this example).
$ gem install foreman $ foreman start 13:52:16 web.1 | started with pid 83853 13:52:16 web.1 | Listening on 5000
Configure your remote Heroku repository.
$ git remote add heroku git@heroku.com:nko2-your-team-slug.git
Deploy to Heroku.
$ git push heroku master
Load your app in a browser to verify that it works.
http://nko2-your-team-slug.herokuapp.com/
Check your app is marked as deployed correctly on your team page.
Login to the Linode Manager.
Enter the credentials from your team page.
Follow the Deploying to Linode blog post.
Deploy your app.
./deploy linode
Check your app is marked as deployed correctly on your team page.
Once you deploy, you should visit your node knockout team page and verify that your app is correctly marked as deployed.
If your app is deployed correctly, you should see a nice green checkbox.
All entries will be hosted at least until the competition winners are announced. During judging, we will require remote access to your instance via an SSH key to make sure there is no cheating. We will compare your deployed code with the code in your git repo.
After the 48-hour competition deadline, you will still be allowed to restart processes, free up disk space, and perform other general sysadmin tasks (including playing lots of StarCraft 2).