[NodeJS] Socket.io tutorial

Hallo,

Hierbij een tutorial over socket.io. Ik neem aan dat je NodeJS al geïnstalleerd hebt, zoniet dan kun je dat hier downloaden. Ook moet je NPM hebben, die kan je hier downloaden. Open je favoriete programma om te programmeren, en let`s go!

Stap 1: Socket.io installeren
Als eerst moeten we de module socket.io downloaden, dit doe je door naar je terminal te gaan. Als je Windows hebt is dit CMD. Typ de volgende commando in:

npm install socket.io

En druk op enter.
Stap 2: Client-side klaarmaken
Nu we socket.io hebben geïnstalleerd gaan we het client-side script aanmaken. Maak een nieuw bestand, bijvoorbeeld index.html, dit kan je maken op je host of op je localhost als je nog aan het testen bent. In het document typen we dit script:

Codeblok (index.html):

1
2
3
4
5
6
7
8
9
10
11
12
13
14




Mijn socket.io pagina









Ik neem aan dat je weet wat deze HTML codes doen. Op regel 5 word de socket.io libary geladen zodat we die in script.js kunnen gebruiken. Script.js word op regel 6 geladen. Maak dus een nieuw document aan genaamd script.js.

Stap 3: Script.js | Verbinding maken
We gaan nu de verbinding klaar maken, dit doen we in script.js.

Codeblok (script.js):

1

var io = io.connect(http://localhost:1337);

Nu kunnen we verbinding maken met de socket.io server. Alleen moeten we eerst die aanmaken, let op: de socket.io server gaan we dus laten draaien op poort 1337!

Stap 4: Socket.io
Maak ergens een mapje aan, niet in je webroot! Maak in dat mapje een nieuw bestand aan, genaamd app.js, hierin gaan we dus de server maken. Eerst moeten we vertellen dat we socket.io gaan gebruiken en dat wie die op poort 1337 gaan gebruiken dus, start met:

Codeblok (voorbeeld.php):

1

var socket = require(socket.io).listen(1337);

Nu willen we dat we dingen naar de client kunnen sturen en andersom, voeg deze code dus toe:

Codeblok (app.js):

1
2
3

socket.sockets.on(connection, function (socket) {
// hier komt de code in
}

Wat dit dus doet is eigenlijks, wanneer er een connectie is voer dit uit. Dus eerst willen we een gebruikersnaam hebben dit sturen we via de client. We maken eerst dit in de server:

Codeblok (app.js):

1
2
3
4
5
6
7

var socket = require(socket.io).listen(1337);

socket.sockets.on(connection, function (socket) {
socket.on(setUsername, function(data) {
socket.set(username, data.value);
});
}

Wanneer er een connectie is, en wanneer die een socket stuurt genaamd setUsername, zet username naar die value. Voor een betere uitleg doen we nog wat extra code erbij, dit hoef je niet bij je bestaande code te plaatsen.

Codeblok (app.js):

1
2
3
4
5
6
7
8
9
10
11

var socket = require(socket.io).listen(1337);

socket.sockets.on(connection, function (socket) {
socket.on(setUsername, function(data) {
socket.set(username, data.value);

socket.get(username, function(error, username) {
console.log(Een nieuwe gebruiker: + username);
});
});
}

Ik ga nu de server opstarten, als je nog niet weet hoe je dit doet lees dan verder, ik leg het zo uit. Nu ga ik weer terug naar de client een stuur een socket genaamd setUsername met een property genaamd value die gelijk staat aan Dylan.

Nu de gebruikersnaam gezet is kunnen we die dus overal ophalen.

Stap 5: gebruikersnaam zetten in de client

Nu is het niet zohandig om via de console de sockets te sturen. We gaan nu maken dat we de gebruikersnaam zetten via de client dus open script.js;
Zoals je al gezien hebt gebruikte ik in de console socket.emit, we versturen dus een socket. We gaan een nieuwe functie aanmaen in script.js:

Codeblok (script.js):

1
2
3

function setUsername(username) {
socket.emit(setUsername, {value: username});
}

Als we dus deze functie aanroepen word er dus een socket verzonden die de username zet. Laten we dit event toepassen, ga naar index.html en voeg een onchange-event toe aan regel 10:

Codeblok (voorbeeld.php):

1

onchange="setUsername(this.value)"

Als de input dus veranderd word de functie setUsername aangeroepen en word this.value mee gestuurd, dat is dan gelijk aan username (in de functie setUsername).

Laten we de server eens opstarten en laten we zien wat we nu hebben.
Stap 6: Test 1
We gaan de nodejs server aanzetten, open je terminal en ga naar het mapje waar je app.js hebt staan (doe dit met cd). Als je in het mapje bent typ je dit in:

node app.js

Als het goed is krijg je dan dit:
Je ziet dat socket.io gestart is, open je browser en ga naar de plek waar je index.html hebt neergezet. Als je nu de server opent zie je dit:
We kunnen nu zien dat er een connection is(regel 3 @ app.js), laten we een gebruikersnaam gaan opgeven:
Goed gedaan! De gebruikersnaam is nu gezet. Maar we zijn er nog niet.

Stap 7: Berichten versturen
We gaan er nu wat sneller door heen, open app.js weer en typ het volgende:
In de comments staat uitleg:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var socket = require(socket.io).listen(1337);

socket.sockets.on(connection, function (socket) {
socket.on(setUsername, function(data) {
socket.set(username, data.value);
/*socket.get(username, function(error, username) { // Als je wilt kan je de comments weghalen, maar dat hoeft niet!
console.log(Een nieuwe gebruiker: + username);
});*/
});

socket.on(sendMessage, function(data) { // wanneer er een socket genaamd sendMessage is
socket.get(username, function(error, username) { // krijg de gebruikersnaam
if(error || username == "undefined") { // wanneer er een error is of als gebruikersnaam niet gevonden is
if(error) { throw error } // als er een error is gooi die dan
} else {
socket.sockets.emit(newMessage, {owner: username, message: data.value}); // vestuur een socket naar IEDEREEN die verbonden is met de io
}
});
});
});

Nu gaan we weer naar script.js en maken we het volgende:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13

var socket = io.connect(http://localhost:1337);

function setUsername(username) {
socket.emit(setUsername, {value: username});
}

function sendMessage(message) { // functie sendMessage
socket.emit(sendMessage, {value: message}); // verstuur een socket genaamd sendMessage met een property value die gelijk is aan message
}

socket.on(newMessage, function(data) { // wanneer de socket newMessage is ontvangen
document.getElementsByTagName("div")[0].innerHTML += data.owner + " zegt: " + data.message + "
"; // voeg [gebruikersnaam] zegt: [bericht]
toe aan de eerste div in het document
});

En voeg in index.html aan regel 12 een onclick event aan

Goed gedaan, Dylan!

Leuke tutorial..
Alleen raad ik toch aan om eens naar Primus te kijken, aangezien veel bugs in socket.io zijn opgelost in Primus, en als je gaat de load gaat testen, snap je ook wel meer waarom.

Ziet er allemaal fijn uit om eens naar te kijken! Knap gedaan!

Maar moet je er eerst een andere codeertaal voor kennen of..?

Sanderc schreef:

Ziet er allemaal fijn uit om eens naar te kijken! Knap gedaan!

Maar moet je er eerst een andere codeertaal voor kennen of..?

Het is javascript.

toevoeging op 12 mei 2014, 22:08:40:
Willwn jullie meer tutorials???

Willen jullie meer tutorials?

Natuurlijk.

Ik krijg dit:
http://prntscr.com/3iwwna

Ik been heel n00b met nodejs hoor
ik loop vast bij stap 6

Jespar schreef:

Ik krijg dit:
http://prntscr.com/3iwwna

Ik been heel n00b met nodejs hoor
ik loop vast bij stap 6

Show je code eens

Spoiler tonen

Codeblok (app.js):

1
2
3
4
5
6
7
8
9
10
11

var socket = require(socket.io).listen(1337);

io.sockets.on(connection, function (socket) {
socket.on(setUsername, function(data) {
socket.set(username, data.value);

socket.get(username, function(error, username) {
console.log(Een nieuwe gebruiker: + username);
});
});
}

Codeblok (index.html):

1
2
3
4
5
6
7
8
9
10
11
12
13
14




Mijn socket.io pagina









Codeblok (script.js):

1
2
3
4
5

var io = io.connect(http://localhost:1337);

function setUsername(username) {
socket.emit(setUsername, {value: username});
}

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11

var socket = require(socket.io).listen(1337);

socket.sockets.on(connection, function (socket) {
socket.on(setUsername, function(data) {
socket.set(username, data.value);

socket.get(username, function(error, username) {
console.log(Een nieuwe gebruiker: + username);
});
});
});