Ga naar inhoud
Log in om dit te volgen  
Dylan

[NodeJS] Socket.io tutorial

Aanbevolen berichten

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:
Codeblok:
1
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
<!DOCTYPE html>
<html>
    <head>
        <title>Mijn socket.io pagina</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
        <script src="./script.js"></script>
    </head>
    
    <body>
        <input type="text" id="username" placeholder="Gebruikersnaam" />
        <div></div>
        <input type="text" id="message" placeholder="Bericht"/><button>Verzend</button>
    </body>
</html>


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.

Plaatje

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:
Codeblok:
1
node app.js


Als het goed is krijg je dan dit:
Plaatje

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:
Plaatje

We kunnen nu zien dat er een connection is(regel 3 @ app.js), laten we een gebruikersnaam gaan opgeven:
Plaatje

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 + "<br />"; // voeg [gebruikersnaam] zegt: [bericht] <br /> toe aan de eerste div in het document
});


En voeg in index.html aan regel 12 een onclick event aan <button> toe:
Codeblok (voorbeeld.php):
1
onclick="sendMessage(document.getElementById(message).value)"


Start je server weer op (Stap 6) en als het goed is moet je eerst een gebruikersnaam intypen (die je altijd kan veranderen) en dan kan je bericht sturen!




Dit was mijn tutorial over socket.io, mocht je nog vragen hebben of iets niet begrijpen stel gerust een vraag hieronder!




EXTRA:

Mocht je het zat zijn van de debug logs, verander regel @ app.js naar:
Codeblok:
1
var socket = require(socket.io).listen(1337, {log: false});

Deel dit bericht


Link naar bericht
Delen op andere sites
Gast
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.

Deel dit bericht


Link naar bericht
Delen op andere sites
Ziet er allemaal fijn uit om eens naar te kijken! Knap gedaan!

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

Deel dit bericht


Link naar bericht
Delen op andere sites
Sanderc (link):
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???smiley

Deel dit bericht


Link naar bericht
Delen op andere sites
Klik om de spoiler te openen

Deel dit bericht


Link naar bericht
Delen op andere sites
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);
        });
    });
});

Deel dit bericht


Link naar bericht
Delen op andere sites

Maak een account aan of log in om te reageren

Je moet lid zijn om een reactie te kunnen achterlaten

Account aanmaken

Maak een account aan in onze gemeenschap. Het is makkelijk!

Registreer een nieuw account

Aanmelden

Ben je al lid? Meld je hier aan.

Nu aanmelden
Log in om dit te volgen  

×