Here is a simple Node JS example that I hope will help someone's journey with getting started with Node JS a little easier. First off, I thought I would explain in the simplest form what Node JS is and what it does. I am by no means a Node JS expert, so don't knock me too hard if you disagree with me.
Node JS is a javascript library that allows you to run a javascript file on your server. The way that you would do this is by opening up a terminal command and typing: node file_name.js.
When you load a javascript file on the server this allows you to talk to all your open pages. Basically this allows the server to talk to the client. This will allow you to create some awesome real time apps.
If you are unfamiliar with Node JS you should check out their website at: http://nodejs.org/. You can use a lot of libraries to do a lot of cool things with Node JS. In this example, I want to show you a simple example of using Node JS with Socket I/O.
- You'll want to make sure and download and install NodeJS (http://nodejs.org/#download)
- Create a new directory inside of your sites directory (your localhost)
- Terminal into that directory and type the following command: 'npm install socket.io express'
- Example files,
You can download the sample files here or you can add these files to that folder:
index.html
the index.html file
<html>
<head></head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('hide', function(data){
$(data.div).slideUp();
});
</script>
<body>
<div id="hide_me">Hello</div>
</body>
</html>
admin.html
the admin.html file
<html>
<head></head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8080');
$('document').ready(function(){
$('#hide_button').click(function(){
socket.emit('hide_me', { div: '#hide_me' });
});
});
</script>
<body>
<button id="hide_button">hide the div</button>
</body>
</html>
app.js
the app.js file
var app = require('express').createServer()
, io = require('socket.io').listen(app);
var sockets = [];
app.listen(8080);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
sockets.push(socket);
send_hide_div(socket);
});
function rec_hide_div(div){
broadcast(div);
}
function send_hide_div(socket){
socket.on('hide_me', function(data){
rec_hide_div(data.div, socket);
});
}
function broadcast(div){
for(var i=0; i < sockets.length; i++){
sockets[i].emit('hide', { div: div });
}
}
Now, you'll want to run the following command inside of terminal
View Website
View Website
View Website
$ node app.js
Go to the directory you installed this in 'localhost/simple-node-example/' and you'll see the hello message. Now the cool thing comes when you open up (in a new tab) the admin page 'localhost/simple-node-example/admin.html'. When you click on the button you will see that the div on the index.html page will be hidden.
That's basically it. And what happened was that the admin page talked to the app.js file which then sent a message to all index.html pages and it hid the 'hello' div.
Learning nodeJS may seem kind of complicated at first, but after you start getting the hang of it, you'll really start rolling :)
Comments (0)