Norite susikurti chat'ą?

Node.js yra įrankis, kurio pagalba galima sukurti serverius įvairiom web aplikacijoms ar žaidimams naudojant JavaScript programavimo kalbą.

Viskas vyksta realiu laiku t.y. atnaujinimus siunčiamus iš serverio vartotojas gauna akimirksniu. Ir čia Ajax'as ne prie ko - Node.js veikia per WebSocket'us. Todėl norint testuoti serverį reikalinga moderni naršyklė palaikanti WebSocket'us. WebSocket'us palaiko ir dauguma mobilių įrenginių, todėl dėl to nereikia jaudintis.

Supažindinsiu jus su Node.js pamokydamas kaip galima sukurti paprastą web chat'ą (tiek iš serverio tiek iš vartotojo pusės) Windows aplinkoje.

Pasiruošimas

Pirmiausia jums reikės iš čia http://nodejs.org/ parsisiųsti ir įsidiegti patį Node.JS įrankį.

Node.js instaliacijos kataloge rasite programą (.bat failą) pavadinimu npm ji skirta papildomų bibliotekų parsiuntimui ir instaliavimui, tačiau ją paleisti galima tik per komandinę eilutę.

Taigi jums reikės papildomos bibliotekos (labai naudingos ir palengvinančios darbą) Socket.IO.

Socket.io instaliavimas:

1. Atsidarius Node.js instaliacijos aplanką į adreso lauką įrašyti "cmd" ir spausti ENTER

2. Atsidariusioje konsolėje įrašykite "npm install socket.io" (be kabučių)

3. Kai instaliacija baigsis galite uždaryti konsolę

http://www.part.lt/img/b9964fdb4cd608ccc83999880a2c2bd3692.jpg

http://www.part.lt/img/2acd782f1dfd0f7c47717dc2dda03761115.jpg

Darbas su Node.js ir Socket.IO

Testas

Dabar, kai jau įdiegėte reikiamus įrankius galite ištestuoti kaip jie veikia.

Tam pačiame kataloge sukurkite betkokį failą su .js galūne pvz. "chat.js". Atidarykite sukurtą failą ir yrašykite pirmąją kodo eilutę:

var io = require('socket.io').listen(8000);

Ši eilutė liepia sukurti serverį 8000 porte.

Ar viskas tvarkoje galite ištestuoti sukurtą .js failą tiesiog "užvilkę" an node programos.

http://www.part.lt/img/d959e80a53a652d583cb1fae2d038d89139.jpg

Atsivers konsolė, jeigu ji iš karto neišsijungs, reiškias viskas gerai. Naršyklės lange suvedę "http://localhost:8000/" galėsite išvysti pasveikinimą:

Welcome to socket.io.

Įvykiai ir prižiūrėtojai

O dabar pradėsime sunkiąją dalį.

Pirmą norėčiau paaiškinti terminologiją. Kas yra socket'ai nepasakosiu (galite pasiskaityti čia http://en.wikipedia.org/wiki/Network_socket).

Papasakosiu apie event'us (įvykius). Na trumpai tariant įvykiai yra įvykiai :D t.y. tai kas įvyksta programoje (pvz. serveris iš vartotojo gauna komandą "labas"). Programa turi ką nors atsakyti į įvykį, todėl jiems (įvykiams) reikia priskirti prižiūrėtoją (event listener/handler).

Įvykio prižiūrėtojas yra paprasčiausia funkcija (o jeigu nežinot kas yra funkcijos, tai ne ten papuolėt). Prižiūrėtoją įvykiui priskirti galima dviem būdais.

socket.on('labas', function(){
console.log("LABAS");
});

arba

function labasFunkcija(){
console.log("LABAS");
}

socket.on('labas', labasFunkcija);

Šis prižiūrėtojas iš vartotojo gavęs komandą "labas" konsolės lange parašys "LABAS". Tačiau šio įvykio mes nenaudosim.

Serveris

Kadangi papasakojau apie įvykius galima judėti toliau. Kol kas kode turime tik vieną eilutę, kurioje aprašytas kintamasis "io". Šis kintamasis laukia kokių nors įvykių (tiksliau ne kintamasis, o jam priskirtas objektas), todėl mes turime jiems priskirti prižiūrėtojus.

Pirmasis įvykis kurį aprašysime tai kai vartotojas bando prisijungti prie serverio. Šio įvykio prižiūrėtoją galime vadinti bosu, nes jis priskirs prižiūrėtojus kitiems įvykiams.

io.sockets.on('connection', function (socket) {
// kitas įvykis

// dar vienas įvykis
});

Šiame pratime naudosime dar du įvykius t.y. "login" ir "message". Beje įvykius galite pavadinti kaip norite, čia pasirinkimo laisvė.

Taigi antrasis prižiūrėtojas atsakys už vartotojo vardo pasirinkimą. Vartotojui sėkmingai prisijungus prie serverio jis turės įrašyti savo vardą. Pasirinkus vardą serveriui siunčiama komanda "login" kartu su pasirinktu vardu.

O tuo tarpu serveryje priskirtas prižiūrėtojas laukia šio įvykio:

	socket.on('login', function(data){	// Kai serveris priima komandą "login" iš vartotojo (kintamasis "data" yra gauti duomenys iš vartotjo)
	var status = 0;	// Kintamasis status bus siunčiamas vartotojui po to kai serveris patikrins jo atsiųstus duomenis
	if(data.name.length == 0){	// Jeigu vartotojas neįvedė prisijungimo vardo
		status = 1;
	} else {
		var clients = io.sockets.clients();	// Gaunamas prisijungusių vartotojų sąrašas
		for(var i = 0; i < clients.length; i++){	// Tikrinami visi prisijungė vartotojai
			if(clients[i].user && clients[i].user.toLowerCase() == data.name.toLowerCase()){	// Tikrinama ar pasirinktas vartotojo vardas yra užimtas
				status = 2;
				break;
			}
		}	
	}
	if(status == 0) socket.user = data.name;	// Jeigu pasirinktas vartotojo vardas yra prieinamas socket'ui priskiriamas "user" kintamasis
	socket.emit('login', {status: status});	// Vartotojui siunčiama komanda "login" su kintamuoju "status"
});

Kaip pastebėjote (tikiuosi) šis prižiūrėtojas turi argumentą "data" t.y. kartu su įvykiu iš vartotojo gauti duomenys, šiuo atveju vartotojo vardas. Duomenys pateikiami json formatu, tai reiškia, kad:

data = {name: <vardas>}

Tikiuosi kad pastebėjot ir šią eilutę:

socket.emit('login', {status: status});

Ši eilutė sukuria įvykį vartotojui. Tai reiškia, kad vartotojo (naršyklės) pusėje taip pat laukiama įvykių. Taigi siunčiama komanda "login", o ją priims vartotojo pusėje esantis prižiūrėtojas, bet apie tai vėliau.

Ir trečiasis, paskutinysis prižiūrėtojas - atsakingas už vartotojo siunčiamų žinučių priėmimą:

socket.on('message', function(data){	// Kai vartotojas parašo žinutę
var clients = io.sockets.clients();
for(var i = 0; i < clients.length; i++){	// Tikrinami visi prisijungė vartotojai
	if(clients[i].user){	// Tikrinama ar vartotojas turi prisijungimo vardą
		clients[i].emit('message', {user: socket.user, message: data.message});	// Siunčiama žinutė vartotojui
	}
}	
});

Jeigu nesupratot ką daro šis prižiūrėtojas pasakysiu trumpai. Jis visas gaunamas žinutes iš vieno vartotojo persiunčia visiems kitiems.

Dabar jūsų kodas turėtų atrodyti taip:

var io = require('socket.io').listen(8000);	// Sukuriamas serveris
console.log(io.version);
io.sockets.on('connection', function (socket) {	// Kai vartotojas prisijungia prie serverio
socket.on('login', function(data){	// Kai serveris priima komandą "login" iš vartotojo (kintamasis "data" yra gauti duomenys iš vartotjo)
	var status = 0;	// Kintamasis status bus siunčiamas vartotojui po to kai serveris patikrins jo atsiųstus duomenis
	if(data.name.length == 0){	// Jeigu vartotojas neįvedė prisijungimo vardo
		status = 1;
	} else {
		var clients = io.sockets.clients();	// Gaunamas prisijungusių vartotojų sąrašas
		for(var i = 0; i < clients.length; i++){	// Tikrinami visi prisijungė vartotojai
			if(clients[i].user && clients[i].user.toLowerCase() == data.name.toLowerCase()){	// Tikrinama ar pasirinktas vartotojo vardas yra užimtas
				status = 2;
				break;
			}
		}	
	}
	if(status == 0) socket.user = data.name;	// Jeigu pasirinktas vartotojo vardas yra prieinamas socket'ui priskiriamas "user" kintamasis
	socket.emit('login', {status: status});	// Vartotojui siunčiama komanda "login" su kintamuoju "status"
});
socket.on('message', function(data){	// Kai vartotojas parašo žinutę
	var clients = io.sockets.clients();
	for(var i = 0; i < clients.length; i++){	// Tikrinami visi prisijungė vartotojai
		if(clients[i].user){	// Tikrinama ar vartotojas turi prisijungimo vardą
			clients[i].emit('message', {user: socket.user, message: data.message});	// Siunčiama žinutė vartotojui
		}
	}	
});
});

Serverio kodas baigtas, todėl jau galite jį paleisti kaip mokiau.

Pabaiga

Pagaliau priėjome vartotojo pusę. Pabaiga labai arti, nes aš tiesiog jums pateiksiu "gatavą" kodą. Jame nieko ko nežinote nėra.

Kaip ir serverio pusėje yra priskirti prižiūrėtojai ir paprastos jQuery funkcijos skirtos gautiems duomenims manipuliuoti. Kad jums būtų lengviau suprasti JavaScript faile pakomentavau beveik kiekvieną eilutę.

Taigi klientą sudaro 3 failai (html, css ir js):

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Įspudingas chatas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
<script src="http://78.62.160.169:8000/socket.io/socket.io.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>

<body>
<div class="modal">Jungiamasi prie serverio...</div>
<div class="overlay"></div>
<table width="100%" border="1" cellspacing="5" cellpadding="0">
 <tr>
   <td id="output"></td>
 </tr>
 <tr height="20">
   <td><input name="message" type="text" id="input"/></td>
 </tr>
</table>
</body>
</html>

styles.css

@charset "utf-8";
html, body{
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
margin:0;
height: 100%; /* real browsers */
}

table{
display: none;
height:100%;	
}

table td{
vertical-align: top;
}

p{
margin: 0;	
}

#input{
height:20px;	
margin:0;
border:0;
width:100%;
}

#input:focus{
background:#E1F5A9;
outline: none; 
}

#output{
height:100%;
overflow-y:scroll;	
}

.overlay{
width: 100%;
height: 100%;	
display: block;
position:absolute;
top: 0;
background:#ccc;
opacity: 0.5;
z-index: 1;
}

.modal{
text-align: center;
line-height: 100px;
height: 100px;
width: 250px;
display: block;
position: absolute;
background: #fff;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 2;	
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.modal input{
margin-top: 40px;
}

script.js

var socket;
$(document).ready(function(e) {
socket = io.connect("http://78.62.160.169:8000/"); // Jungiasi prie serverio
// Priskiriami įvykių prižiūrėtojai
socket.on("connect", connected); // Įvykis "connect" įvyksta kai vartotojas prisijungia prie serverio
socket.on("login", login);
socket.on("disconnect", disconnect); // Įvykis "connected" įvyksta kai nutrūksta vartotojo ryšys su serveriu
});

//Įvykio "connected" prižiūrėtojas
function connected(){
var text = $("<input>", {type: "text", placeholder: "Vardas"}); // Sukuriamas teksto laukas
var button = $("<input>", {type: "submit", value: "Tęsti"}); // Sukuriamas mygtukas
$(".modal").html([text, button]); // Sukurti elementai priskiriami "modal" klasę turinčiam elementui
button.on("click", function(){	// Priskiariamas mygtuko paspaudimo įvykio prižiūrėtojas
	socket.emit("login", {name: text.val()});	// Nuspaudus mygtuka į serverį siunčiama komanda kurioje nurodytas vartotojo įvestas vardas
});
}

// Įvykio "login" prižiūrėtojas
function login(data){
switch(data.status){	// Tikrinami duomenys iš serverio, kurie gaunami po bandymo prisijungti su pasirinktu vartotojo vardu
	case 0:		// Jeigu data.status = 0
		init();	// Vykdoma "init" funkcija
	break;	
	case 1:		// Jeigu data.status = 1
		alert("Įvesk vardą!"); // Iššoka "alert" lentelė
	break;	
	case 2:		// Jeigu data.status = 2
		alert("Šis vardas yra užimtas");	// Iššoka "alert" lentelė
	break;	
}
}

// Funkcija kuri vykdoma jeigu pavyko prisijungti su pasirinktu vartotojo vardu
function init(){
$(".modal, .overlay").remove();	// Sunaikinami elementai kurie turi "modal" arba "overlay" klasę (prisijungimo lentelė)
$("table").show();	// Atslepiama lentelė (chato template'as)
socket.on("message", message);	// Priskiriamas įvykio prižiūrėtojas apdorojantis duomenis, kurie gaunami iš serverio, kai kas nors parašo žinutę chat'e
$("#input").on("keypress", function(e){		// Priskiriamas klaviatūros klavišo paspaudimo įvykio prižiūrėtojas
	if(e.keyCode == 13 && $(this).val().length != 0){	// Jeigu nuspausto mygtuko kodas yra 13 (kodas 13 yra ENTER mygtukas) bei žinutės įvedimo laukas nėra tuščias
		socket.emit("message", {message: $(this).val()});	// Žinutė išsiunčiama į serverį
		$(this).val("");	// Išvalomas žinutės įvedimo laukas
	}
});
}

// Įvykio "message" prižiūrėtojas
function message(data){
$("#output").append("<p><b>"+data.user+":</b> "+data.message+"</p>");	// Žinutę atspausdina "output" elemente (pirmoje lentelės eilutėje)
}

// Įvykio "disconnect" prižiūrėtojas
function disconnect(){
socket.removeListener("message", message);	// Sunaikina įvykio "message" prižiūrėtoją
$("table").hide();	// Paslepia lentelę
$("#output").empty();	// Išvalo chat'ą;
$("#input").val("");	// Išvalo žinutės įvedimo lauką
var modal = $("<div>", {class: "modal", html: "Jungiamasi prie serverio..."});	// Sukuria "modal" elementą 
var overlay = $("<div>", {class: "overlay"});	// Sukuria "overlay" elementą 
$("body").append([overlay, modal]);	// Sukurtus elementus priskiria "body" elementui 
}

• Šiuos failus sudėkite į vieną katalogą
  
• Paleiskite serverį
  
• Atsidarykite index.html failą
  
• Susitepkit sumuštinį
  
• Atimkit močiutės pensiją
  
• Iškirskit kentą
  

ČIA GALIMA IŠBANDYTI VEIKIANTĮ CHAT'Ą