Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Current Version: v0.10.22
I am posting all node.js video tutorials here please check and subscribe.
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Save and run this command from the terminal:
node test.js
You just ran your first nodeJS application, try it with a Web browser by opening: http://localhost:8124
You should see this in your web browser:
The test.js file contains ultra minimal code for creating and configuring an HTTP web server. This ultra minimal server answers requests by sending string responses on the fly. If we want to serve HTML files, images, JS files, CSS files, we need a more complete web server. This is what the "express" module will bring to NodeJS. And we will also need the socket.io module for using WebSockets.
NodeJS module installation
We will use the "npm" (node package manager) command from the nodeJS installation
Create a directory named "chatWithSocketIO" somewhere
cd in it,
run "npm install express",
run "npm install socket.io".
You should see a subdir named "node_modules" that contains the new modules you just downloaded/installed locally to your project.
Simple chat application that uses express and socket.io
This part is an updated/fixed version of this tutorial , that explains how to write a small chat application with nodeJS, express and socket.io. We cleaned the code and adapted it so it works with the last version of express (v3), and socket.io.
Get this archive : chatSocketIO.rar
Unarchive it in your working dir. You should get this;
Now run this command "node simpleChatServer.js" and open "http://localhost:8080", in your browser.
Open th URL in two different tabs. Enter two different names, try to chat, look at what happens in the different tabs.Open Chrome dev tools, you should find how to trace data exchanged over web sockets.
Now, study the code of simpleChatServer.js, of simpleChat.html, and read : http://psitsmike.com/2011/09/node-js...chat-tutorial/, forget the beginning about the nodeJS installation, just read the code explanations.
socket.io basic principles
socket.on(event_name, callback) : executes the callback when an event with a given name is fired. (event_name = user defined). Some events like 'connection' or 'disconnect' are predefined.
All event processing is performed in the io.sockets.on('connection', function (socket) {...}, call.
socket.emit(event_name, data1, data2): sends only to the connected client the event and two parameters with data
io.sockets.emit(event_name, data1, data2): same but sends to all connected clients
socket.broadcast.emitevent_name, data1, data2): same but sends to all connected clients except the emitter
simpleChatServer.js:
// We need to use the express framework: have a real web server that knows how to send mime types etc.
var express=require('express');
// Init globals variables for each module required
var app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
// Indicate where static files are located
app.configure(function () {
app.use(express.static(__dirname + '/'));
});
// launch the http server on given port
server.listen(8080);
// routing
app.get('/', function (req, res) {
res.sendfile(__dirname + '/simpleChat.html');
});
// usernames which are currently connected to the chat
var usernames = {};
io.sockets.on('connection', function (socket) {
// when the client emits 'sendchat', this listens and executes
socket.on('sendchat', function (data) {
// we tell the client to execute 'updatechat' with 2 parameters
io.sockets.emit('updatechat', socket.username, data);
});
// when the client emits 'adduser', this listens and executes
socket.on('adduser', function(username){
// we store the username in the socket session for this client
socket.username = username;
// add the client's username to the global list
usernames[username] = username;
// echo to client they've connected
socket.emit('updatechat', 'SERVER', 'you have connected');
// echo globally (all clients) that a person has connected
socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected');
// update the list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
});
// when the user disconnects.. perform this
socket.on('disconnect', function(){
// remove the username from global usernames list
delete usernames[socket.username];
// update list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
// echo globally that this client has left
socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
});
});
And simpleChat.html:
Multiroom chat: several groups of clients can chat together This version enable clients to be in groups called "rooms". The Socket.io API has a complete set of functions for joining/leaving a room, sending messages to all people in a room, to all people except the emitter, etc. socket.join(room_name) and socket.leave(room_name) : when joining a non existing room it creates it, socket.broadcast.to(room_name).emit(...): similar to socket.broadcast.emit, sends a message to all clients in the room except the emitter. io.sockets.inroom_name).emit(...) : sends to all clients in the room. Complete documentation of the room API: https://github.com/LearnBoost/socket.io/wiki/Rooms multiRoomChatServer.jsUSERS
// We need to use the express framework: have a real web server that knows how to send mime types etc.
var express=require('express');
// Init globals variables for each module required
var app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
// Indicate where static files are located. Without this, no external js file, no css...
app.configure(function () {
app.use(express.static(__dirname + '/'));
});
// launch the http server on given port
server.listen(8080);
// routing with express, mapping for default page
app.get('/', function (req, res) {
res.sendfile(__dirname + '/multiRoomChat.html');
});
// usernames which are currently connected to the chat
var usernames = {};
// rooms which are currently available in chat
var rooms = ['room1','room2','room3'];
io.sockets.on('connection', function (socket) {
// when the client emits 'adduser', this listens and executes
socket.on('adduser', function(username){
// store the username in the socket session for this client
socket.username = username;
// store the room name in the socket session for this client
socket.room = 'room1';
// add the client's username to the global list
usernames[username] = username;
// send client to room 1
socket.join('room1');
// echo to client they've connected
socket.emit('updatechat', 'SERVER', 'you have connected to room1');
// echo to room 1 that a person has connected to their room
socket.broadcast.to('room1').emit('updatechat', 'SERVER', username + ' has connected to this room');
socket.emit('updaterooms', rooms, 'room1');
});
// when the client emits 'sendchat', this listens and executes
socket.on('sendchat', function (data) {
// we tell the client to execute 'updatechat' with 2 parameters
io.sockets.in(socket.room).emit('updatechat', socket.username, data);
});
socket.on('switchRoom', function(newroom){
socket.leave(socket.room);
socket.join(newroom);
socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
// sent message to OLD room
socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
// update socket session room title
socket.room = newroom;
socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
socket.emit('updaterooms', rooms, newroom);
});
// when the user disconnects.. perform this
socket.on('disconnect', function(){
// remove the username from global usernames list
delete usernames[socket.username];
// update list of users in chat, client-side
io.sockets.emit('updateusers', usernames);
// echo globally that this client has left
socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
socket.leave(socket.room);
});
});
multiRoomChat.html
Code explanations here: http://psitsmike.com/2011/10/node-js-and-socket-io-multiroom-chat-tutorial/ (we made small updates to the code) Node.js Tutorial Videos: Part - 1 Part - 2 Part - 3 Part - 4 Part - 5 Part - 6 Part - 7 Part- 8 Part - 9 Part - 10ROOMS
Description : I am going to explain how to drag an item and drop the item at required position.
In The above image i am going to move all right side boxes to trash i.e to left side dust bin.
CSS Code for above App
Original SourceDrag and drop
Drag the list items over the dustbin, and drop them to have the bin eat the item
HTML5 Semantics Example
HTML5 Semantics Example
What We Provide?
Posted on by Alex Jones
We Provide All Domestic academic admissions for B.Tech,M.tech,Mca,Mba,Bds,Mbbs through out the country.we provide admissions for councilling fee only with out any donations,we look after accomdation along with career guidence.we are developing mobile app for colleges and students to communicate with each others and get admissions online from your mobile only.we provide online tutorials for students who want to learn new technologies with out any fee
Technologies
Posted on by Alex Jones
We Provide online courses for the following :
JAVA
HTML5
JavaScript
Mobile Development
@charset "utf-8";
/* CSS Document
Name: Vivek Kumar
Email: vivekwebmaker@gmail.com
Company:IDS Infotech Ltd.
*/
* {
margin:0px;
padding:0px;
}
body {
overflow-x:hidden;
}
/*
//////////////////////////////////////////////////
CLOUD
//////////////////////////////////////////////////
*/
#clouds {
padding:100px 0px 0px;
background:#c9dbe9;
background:-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background:-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background:-moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width:200px;
height:60px;
background:#fff;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
position:relative;
}
.cloud:before, .cloud:after {
content:'';
position:absolute;
width:100px;
height:80px;
background:#fff;
position:absolute;
top:-15px;
left:10px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
-moz-transform:rotate(30deg);
}
.cloud:after {
width:120px;
height:120px;
top:-55px;
left:auto;
right:15px;
}
/*
//////////////////////////////////////////////////
CLOUD Animation Code
//////////////////////////////////////////////////
*/
.x1 {
-webkit-animation:moveclouds 18s ease-in-out infinite;
-moz-animation:moveclouds 18s ease-in-out infinite;
-o-animation:moveclouds 18s ease-in-out infinite;
top:-10px;
}
.x2 {
left:200px;
top:-50px;
-webkit-transform:scale(0.6);
-mox-transform:scale(0.6);
transform:scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
-webkit-animation:moveclouds 25s ease-in-out infinite;
-moz-animation:moveclouds 25s ease-in-out infinite;
-o-animation:moveclouds 25s ease-in-out infinite;
}
.x3 {
left:0px;
top:-175px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.6; /*opacity proportional to the size*/
-webkit-animation:moveclouds 30s ease-in-out infinite;
-moz-animation:moveclouds 30s ease-in-out infinite;
-o-animation:moveclouds 30s ease-in-out infinite;
}
.x4 {
left:470px;
top:-195px;
-webkit-transform:scale(0.75);
-mox-transform:scale(0.75);
transform:scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation:moveclouds 15s ease-in-out infinite;
-moz-animation:moveclouds 15s ease-in-out infinite;
-o-animation:moveclouds 15s ease-in-out infinite;
}
.x5 {
left:-100px;
top:-150px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation:moveclouds 35s ease-in-out infinite;
-moz-animation:moveclouds 35s ease-in-out infinite;
-o-animation:moveclouds 35s ease-in-out infinite;
}
.x6 {
left:50px;
top:-280px;
opacity: 0.4; /*opacity proportional to the size*/
-webkit-animation:moveclouds 22s ease-in-out infinite;
-moz-animation:moveclouds 22s ease-in-out infinite;
-o-animation:moveclouds 22s ease-in-out infinite;
}
.x7 {
left:-80px;
top:-255px;
-webkit-transform:scale(0.8);
-mox-transform:scale(0.8);
transform:scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation:moveclouds 40s ease-in-out infinite;
-moz-animation:moveclouds 40s ease-in-out infinite;
-o-animation:moveclouds 40s ease-in-out infinite;
}
@-webkit-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
@-moz-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
@-o-keyframes moveclouds {
0% {
margin-left:110%;
}
100% {
margin-left:-110%;
}
}
/*
//////////////////////////////////////////////////
GRASS
//////////////////////////////////////////////////
*/
.grass {
background:url(grass.png) bottom center no-repeat;
height:295px;
width:100%;
bottom:0px;
position:absolute;
}
.cycle {
/*background:url(cycle-2.png) no-repeat;*/
width:279px;
height:260px;
position:absolute;
right:0px;
bottom:-2px;
}
.bycycle {
background:url(cycle-2.png) no-repeat;
width:279px;
height:260px;
position:absolute;
z-index:1;
}
/*
//////////////////////////////////////////////////
Cycle Animation Code
//////////////////////////////////////////////////
*/
.cycle-ride {
-webkit-animation:movecycle 25s ease-in-out infinite;
-moz-animation:movecycle 25s ease-in-out infinite;
-o-animation:movecycle 25s ease-in-out infinite;
}
@-webkit-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
@-moz-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
@-o-keyframes movecycle {
0% {
margin-right:100%;
}
100% {
margin-right:-100%;
}
}
/*
//////////////////////////////////////////////////
BIRD
//////////////////////////////////////////////////
*/
.bird {
background:url(birds.png) no-repeat;
width:376px;
height:191px;
position:absolute;
}
/*
//////////////////////////////////////////////////
BIRD Animation Code
//////////////////////////////////////////////////
*/
.fly {
-webkit-animation:birdfly 20s ease-in-out infinite;
-moz-animation:birdfly 20s ease-in-out infinite;
-o-animation:birdfly 20s ease-in-out infinite;
}
@-webkit-keyframes birdfly {
0% {
margin-left:100%;
top:300px
}
20% {
top:200px;
}
40% {
top:150px;
}
50% {
top:100px;
}
60% {
top:50px;
}
70% {
top:-300px;
}
80% {
top:-50px;
}
100% {
margin-left:-100%;
top:-70px;
opacity:.4;
-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
transform:scale(0.4);
}
}
@-moz-keyframes birdfly {
0% {
margin-left:100%;
top:300px
}
20% {
top:200px;
}
40% {
top:150px;
}
50% {
top:100px;
}
60% {
top:50px;
}
70% {
top:-300px;
}
80% {
top:-50px;
}
100% {
margin-left:-100%;
top:-70px;
opacity:.4;
-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
transform:scale(0.4);
}
}
@-o-keyframes birdfly {
0% {
margin-left:100%;
top:200px
}
20% {
top:150px;
}
40% {
top:100px;
}
50% {
top:500px;
}
60% {
top:0px;
}
70% {
top:-50px;
}
80% {
top:-70px;
}
100% {
margin-left:-100%;
top:-100px;
opacity:.4;
-webkit-transform:scale(0.4);
-mox-transform:scale(0.4);
transform:scale(0.4);
}
}
.name{
font-size:30px;
color: transparent;
right:20px;
position:absolute;
bottom:0px;
-webkit-animation:name 25s ease-in-out infinite;
-moz-animation:name 25s ease-in-out infinite;
-o-animation:name 25s ease-in-out infinite;
}
@-webkit-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
@-moz-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
@-o-keyframes name {
0% {
text-shadow: 0 0 0px rgba(0,0,0,1);
}
100% {
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}
/* Create the animation blocks */
/* Spinning, gradient circle; CSS only! */
.cycle-front, .cycle-back {
width: 108px;
height: 107px;
position:absolute;
bottom:8px;
right:8px;
background:url(wheel-front.png) no-repeat;
-webkit-animation:spin 3s ease-in-out infinite;
-moz-animation:spin 3s ease-in-out infinite;
-o-animation:spin 3s ease-in-out infinite;
}
.cycle-back{
background:url(wheel-back.png) no-repeat;
bottom:8px;
left:8px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
<!doctype html>