Moninpelin ympäristön luominen Socket.io:lla

Osa 1: Yleiskatsaus

Suositellut esivaatimukset

Tässä oppaassa keskitymme siihen, kuinka asentaa palvelin ja yhdistää peli siihen, jotta voit mahdollistaa moninpelitoiminnot projektillesi Socket.io-käyttäytymisten kautta. Tulemme käsittelemään edistyneitä ominaisuuksia ja käyttäytymisiä hyperPadissa, ja vahvasti suositellaan, että tarkistat ensin joitakin muita oppaita ja saat hyvän käsityksen ohjelmistosta ennen jatkamista.

Tämä opas olettaa, että sinulla on hyvä ymmärrys hyperPadin keskeisestä toiminnallisuudesta sekä vähäinen ymmärrys kirjoitetusta ohjelmoinnista, sillä keskitymme Javascript-skripteihin pelipalvelimen rakentamiseksi. Tämä opas olettaa myös perustason ymmärryksen verkottumisesta ja erosta palvelimen ja sen asiakkaiden välillä.

Tämän oppaan ensisijainen tavoite on opettaa sinulle, mitä sinun on tehtävä lisätäksesi moninpelitoiminto peliisi; ei luoda peliä itsessään. Tutustumme Socket.io-asiakkaiden ja palvelimen väliseen suhteeseen sekä siihen, kuinka ne kommunikoivat toistensa kanssa Socket.io-käyttäytymisten avulla.

Vaatimukset

Luodaksesi ja isännöidäksesi palvelinta tarvitset tietokoneen, joka pystyy ajamaan Node.JS (Mac, Windows jne.). Node.JS:n asennus ja sen määrittäminen tarkoituksiimme käsitellään tässä oppaassa. Jos isännöit palvelinta kotiverkossasi, saatat joutua muuttamaan reitittimesi porttiohjauksen asetuksia, jos haluat saada saapuvia yhteyksiä ulkopuolelta paikallisverkkoasi.

Tässä oppaassa olemme jo luoneet yksinkertaisen demo pelin. Siinä on kaksi pelaajaa pelaamassa tag-peliä pienessä labyrintissä. Tutustumme siihen, kuinka Socket.io-käyttäytymisiä käytetään esimerkkiprojektissa, joten on suositeltavaa, että lataat ja avaat projektin hyperPadissa.

Valmis hyperPad-esimerkkiprojekti voidaan ladata täältä: Multiplayer tag tutorial.tap

Yleiskatsaus

Tässä oppaassa käymme läpi perusteet pelisi palvelimen luomiseksi. Palvelin käsittelee suurimman osan pelin yksityiskohdista, kuten pistelaskennasta, pelilobbysta jne. Tämän jälkeen luomme käyttäytymisiä, jotka lähettävät tietoa pelistämme palvelimelle ja päinvastoin.

Tässä on pelimme yleinen kulku:

1. Päävalikosta yhdistämme palvelimeemme ja annamme käyttäjän päättää luoda vai liittyä peliin.

a. Jos luodaan peli, lataa odotushuone.

b. Jos liitytään peliin, lataa saatavilla olevien pelihuoneiden lista.

c. Kun kaksi pelaajaa on odotushuoneessa, peli käynnistyy.

2. Pelissä palvelin asettaa satunnaisesti pelaajat yhteen neljästä alueesta ja määrää yhden heistä olemaan ”Tagi”.

a. Toisen pelaajan taggaaminen satunnaistaa heidän sijaintinsa, vaihtaa Tagi-statuksen ja lisää pisteen pelaajalle, joka tagasi toisen.

b. Jos taggausta ei tapahdu tietyssä ajassa, palvelin poistaa 1 pisteen pelaajalta, joka on tällä hetkellä Tagi ja vaihtaa Tagi-statuksen ennen kuin se asettaa pelaajat satunnaisesti syntymäalueille uudelleen.

3. Kun pelaaja on saavuttanut tietyn määrän pisteitä, se lataa päällekkäisen ikkunan, joka julistaa voittajan. Sitten pelaajat katkaisevat yhteyden huoneeseen ja palaavat päävalikkoon.

Osa 2: Palvelimen määrittäminen

Socket.io-palvelimen luominen edellyttää Javascript-sovelluksen suorittamista Socket.io-kirjaston avulla, joka kuuntelee pelaajien yhteyksiä. Socket.io on Javascript-verkottumiskirjasto, joka yksinkertaistaa paljon verkotetun sovelluksen rakentamisen taustatyöskentelyä meille. Lisätietoja seuraa.

Lataa ja asenna Node.JS

Alkuun pääseksi siirry Node.JS -sivustolle ja lataa se tietokoneelle (Mac, Windows jne.), jota haluat käyttää palvelimen isännöimiseen. Kun lataus on valmis, suorita asennusohjelma ja seuraa sen ohjeita. Asennuksessa voit jättää kaikki asetukset oletusarvoiksi. Node.JS antaa meille mahdollisuuden suorittaa Javascript-sovelluksia omillaan ilman verkkoselainta.

Esimerkkipalvelimen lataaminen ja suorittaminen

Seuraavaksi lataa tämän oppaan Multiplayer Server Example GitHubista:

https://github.com/hyperPad/multiplayerServerExample

Klikkaa "Clone or download" -painiketta ja valitse "Download ZIP". Tämä lataa kopiota palvelin esimerkin koodista.

Purkaa ladattu ZIP. Sisällä löydät muutamia pieniä tiedostoja, mutta merkittävin tiedosto on "index.js" tiedosto, joka on koodimme palvelimellemme. Seuraavaksi avaa komentorivi/terminaali palvelin esimerkkikansiossa.

Kirjoita "npm install" ja paina enter, sitten anna sen suoritua. npm on pakettien hallintaohjelma, joka lukee package.json-tiedoston ja lataa palvelimellemme tarvittavat paketit. (Sisältäen Socket.io!)

Kun komento on valmis, meillä on kaikki tarvittava palvelimen suorittamiseen. Terminaalissa kirjoita "node ." ja palvelin käynnistyy.

Siinä se! Palvelimemme kuuntelee nyt porttia 3000 saapuvien Socket.io-yhteyksien osalta.

"node ." käynnistää Node.JS nykyisessä hakemistossa, jossa se etsii hakemiston indeksi tiedostoa ja suorittaa sen. Oletuksena tämä on "index.js" Javascript-tiedosto, jossa suurin osa palvelimen koodistamme sijaitsee ja joka analysoidaan läpi tämän oppaan aikana.

Jätä terminaali auki, sillä sen sulkeminen sulkee myös palvelimen. Näet sen tulostavan viestejä, kun pelaajat yhdistyvät tai katkaisevat yhteyden, ja kun huoneita luodaan tai tuhotaan, sekä muista tapahtumista.

Huomio: Saavuttavien yhteyksien sallimiseksi ulkomaailmasta, saatat joutua avaamaan portin 3000 kotireitittimessäsi. Tämä prosessi vaihtelee verkosta toiseen, mutta oppaan voi yleensä löytää etsimällä portin ohjauksen oppaita kotisi modeemille/reitittimelle. Saatat joutua sulkemaan ja käynnistämään Node.JS-palvelimen uudelleen, kun muutat portin ohjausasetuksia.

Osa 3: Yhendä palvelimeen

Kun sinulla on perustiedot palvelimesta, voimme nyt yhdistää siihen hyperPad-pelissä. Tämä tulisi olla asetettu niin, että se tapahtuu ensimmäisenä asiana projektissasi riippumatta siitä, missä kohtauksessa olet (koska kaikkien on kommunikoitava palvelimen kanssa). On parasta liittää tämä käyttäytyminen objektin Globaali Tasolle, jotta se soveltuu kaikille kohtauksille.

Esimerkkiprojektissa Globaali Tason "Palvelin" -älykkäät sisältävät yllä olevan. (Projektin lataus löytyy tämän oppaan Osa 1 -osasta Vaatimukset osiosta.)

Nämä kaksi käyttäytymistä ovat oikeastaan kaikki, mitä tarvitset yhdistääksesi palvelimeen. Ensinnäkin, mukautetun välilehden alla, ota käyttöösi Socket.io-asiakkaan käyttäytyminen ja pudota se alas. Tässä syötät palvelimesi URL-osoitteen sen ominaisuuksien ikkunan URL-välilehdelle. Yllä olevassa kuvassa palvelimemme URL-osoite oli "http://192.168.0.191:3000", mukaan lukien protokolla ja portti. Haluat muuttaa tämän vastaamaan palvelimesi URL-osoitetta tai sen todennäköisesti ei toimi, kun käynnistät pelin.

Nyt meillä on haluamamme palvelintiedot, mutta meidän on silti yhdistettävä siihen. Joten, tarvitsemme vain Yhdistä Socket -käyttäytymisen. Pudota yksi alas, avaa sen ominaisuudet ja valitse asiakas tyhjään laatikkoon ja aseta Toiminto-ominaisuudeksi "Yhdistä".

Nyt, kun projektimme latautuu, yhdistämme automaattisesti palvelimeemme.

Osa 4: Huoneiden luominen ja liittyminen

Seuraava askel on luoda pelilobbyt, joissa pelaajat voivat liittyä ja pelata yhdessä.

Tässä on yksinkertainen Päävalikkosivumme. Kaikki, mitä tarvitaan, on napata yksi painikkeista aloittaakseen huoneen tai etsiäkseen saatavilla olevia huoneita.

Huoneiden luominen

Tarkastellaanpa, kuinka kommunikoimme palvelimen kanssa luodaksemme huoneemme.

Melko yksinkertaista, eikö? Joten käydään tämä nopeasti läpi, kun kerran painamme painikettamme, meitä pyydetään kirjoittamaan huoneen nimi. Kun se on valmis, tämä nimi lähetetään palvelimelle, jossa huone luodaan ja ladataan odotushuoneeseen.

Tästä eteenpäin käytämme usein Emit to Socket -toimintoa. Tämä johtuu siitä, että se on pääasiallinen tapa lähettää tietoja palvelimelle. Ajattele sitä yksinkertaisesti "verkkoversiona" Lähetä Viesti ja Vastaanota Viesti (Emit to Socket suorittaa molemmat toiminnot kerralla).

Meidän on nyt lisättävä tietoa palvelimellemme, jotta se luodaan huoneen, kun se vastaanottaa viestin Emit-toiminnosta.

socket.on('createRoom', (roomName, callback) => {

Tämä rivi luo socket-tapahtuman (lamba-ilmaisu) palvelimelle, joka kuuntelee Emittejä tapahtumalla 'createRoom'.

Ensimmäinen parametri on arvo, jonka lähetämme Emit to Socket -toiminnossa, tässä tapauksessa huoneen nimi, jonka käyttäjä kirjoitti. Tässä olemme nimenneet sen parametrin 'roomName'.

Toinen parametri on toiminto, jota kutsumme myöhemmin socket-tapahtumassa ilmoittamaan asiakkaalle. Emit to Socket -toiminto jatkaa suorittamista vain, jos palautefunktion kutsuja palvelimella. Tässä olemme nimenneet sen parametrin 'callback'.

const room = {
id: uuid(),
name: roomName,
sockets: []
};

Tämä luo instanssin rakenteelle, joka sisältää olennaiset tiedot huoneesta.

'id' on ainutkertainen tunnus, joka luodaan apufunktiolla 'uuid()'. Tämä auttaa meitä erottamaan tämän huoneen muista luoduista huoneista listalla myöhemmin.

'name' määrätään aikaisemmin käyttäjän kirjoittamaan nimeen.

'sockets' alustetaan tyhjällä taulukolla. Myöhemmin tämä seuraa huoneeseen yhdistettyjä pelaajien soketteja.

rooms[room.id] = room;

'rooms' on globaali lista tällä hetkellä aktiivisista huoneista. Koska luomme uuden huoneen, varastoimme sen listalle sen ID:n mukaan.

joinRoom(socket, room);

Tämä kutsuu globaalia funktiota 'joinRoom' (rivi 29), joka lisää pelaajan soketin huoneen 'sockets' taulukkoon. Koska pelaaja loi huoneen, se myös liittää heidät siihen.

callback();
});

Viimeiseksi kutsumme palautefunktiota, jotta asiakas saa ilmoituksen, että huone on luotu. Tämä mahdollistaa Emit to Socket -toiminnon jatkamisen, mikä lataa Odotushuoneen sitten. Tämä merkitsee myös 'createRoom'-socket-tapahtuman loppua.

Liittyminen huoneisiin

Huoneisiin liittyminen on hieman erilaista, koska meidän on käytettävä tietoja eri kohtauksesta napin toiminnolla.

Huoneiden liittymiselle olemme sijoittaneet käyttäytymisen alun globaaliin tasoon samalle, jossa yhdistämme palvelimeen. Tällä tavoin pääsemme käsityölöinnin tietoihin mistä tahansa kohtauksestamme, tässä tapauksessa huoneen listasta. Napin napautus vie pelaajan vain huoneen listan kohtaukseen.

Tässä meillä on toinen käyttäytyminen palvelimen viestintää varten. Socket Event voidaan ajatella kuin Vastaanota Viesti, koska se aktivoituu vain, kun palvelimelta on lähetetty asetettu viesti.

Parasta on ajatella Socket Event ja Emit to Socket -käyttäytymiset siten, että Socket Event reagoi vain palvelimelta saapuvaan tietoon, kun taas Emit to Socket kutsutaan reaktiona paikallisesti tehtyihin asioihin.

Kun liitymme palvelimeen, Emitamme 'getRoomNames' -kyselyn saadaksemme kaikki saatavilla olevat huoneen nimet.

Sitten asetetaan etiketti, jota pelaaja voi napauttaa liittyäkseen.

Tämä on meidän Huoneen Listan kohtaus. Tässä kaikkien saatavilla olevien pelihuoneiden täytyy ladata ja näyttää. Yksinkertainen napautus huoneen nimeä lataa pelaajan sisään. Kiitos aikaisemmista käyttäytymisistä, lista lataa automaattisesti kaikki avoimet huoneet ja tuottaa huoneen nimeen etikettejä näytössä. Jos mitään ei näy, meillä on Refresh List -painike, joka toistaa käyttäytymiset ladatakseen ne uudelleen.

Tässä on logiikka, jolla asetamme listan. Emme mene liian syvälle tähän, koska haluamme vain tietää, kuinka tämä yhdistyy palvelimeemme.

Aloitetaan Emit to Socket -toiminnalla. Tämä kutsuu palvelinta lähettämään tietoa saatavillaan olevista huoneista. Siitä eteenpäin meillä on Get Array Value -toiminto. Kaikki palvelimelta tuleva tieto lähetetään taulukkona ja tarvitsemme tiedot ensimmäisissä arvoissa. Niinpä asetamme Get Array Value -toiminnan hakemaan arvon indeksissä 0. Tämän jälkeen käyttäytymiset etsivät tiedot ja luovat etikettejä jokaiselle huoneelle, tuottaen ne näytölle.

Seuraavaksi tarkistamme objektin, jota meidän on napautettava, kohtauksessamme se on etiketti nimeltä Huoneen Nimi.

Tämä teksti toimii painikkeenamme, kun se syntyy, mutta meidän on edelleen liitettävä haluamamme huone ID, johon haluamme liittyä. Tehdään se ensin tarttumalla huoneen ID:hen, ja teemme sen Get Attribute -toiminnalla ja asetamme sen dynaamiseksi. Sitten emitamme palvelimelle, että haluamme liittyä tähän huoneeseen ja ladata odotushuoneeseen.

socket.on('joinRoom', (roomId, callback) => {

Tämä on socket-tapahtuman 'joinRoom' aloituspiste. Ensimmäisen parametrin arvo olisi huoneen ID, johon haluamme liittyä, joka on lähetetty palvelimelle. Tässä nimittäin kuinka olemme nimenneet parametri 'roomId'.

const room = rooms[roomId];
joinRoom(socket, room);

Käyttämällä clientiltä annettua roomId:tä voimme löytää oikean huoneinstanssin palvelimelta. Tämän jälkeen kutsumme globaalia funktiota 'joinRoom' (rivi 29), joka ottaa sisään pelaajan soketin ja huoneinstanssin itselleen. Katsomme 'joinRoom' -funktiota hetken kuluttua.

callback();
});

Viimeiseksi kutsumme palautefunktiota ilmoittaaksemme asiakkaalle, että se voi jatkaa Odotushuoneen kohtauksen lataamista, merkitsemällä 'joinRoom' socket-tapahtuman lopun.

Mitäs oikein tapahtuu 'joinRoom'-funktiossa? Katsotaanpa.

room.socket.push(socket);

Kuten aiemmin mainittiin, 'room.socket' - jäsenistön taulukko pitää kirjaa huoneeseen kytkettyjen sokettien lukumäärästä. Tämä rivi tekee juuri tämän työntämällä soketin taulukon sisään.

socket.join(room.id, () => {
socket.roomId = room.id;
console.log(socket.id, "Joined", room.id);
});

Tämä on virallinen kutsu yhdistää asiakas huoneeseen sen ID:n perusteella. Ensin kerromme soketille liittyä huoneeseen sen ID:n mukaan. Kun se on valmis, seuraava palautefunktio aktivoituu, jossa liitämme huoneen ID:n sokettiin. Viimeiseksi kirjaamme konsoliin, että pelaaja on liittynyt huoneeseen!

Odotushuone

Odotushuone on vain kohtaus, johon lataamme pelaajat, kun he odottavat toisten pelaajien liittymistä tai pelin alkamista.

Menemme, kun astumme huoneeseen, lähetämme 'ready'-viestin palvelimelle. Kun palvelin on vastaanottanut kaksi tällaista viestiä, se lähettää viestin, että peli alkaa ('initGame'). Poimimme tämän viestin Socket Eventillä, ja näin lataamme pelitason. Käyttäytymisillemme on noin sitä. Voit lisätä painikkeen, joka katkaisee yhteyden huoneesta ja palauttaa takaisin päävalikkoon, jos haluat.

Palvelimen puolella tutkitaan koodia nähdäksesi, mitä siellä tapahtuu.

Tämä on 'ready' -tapahtuma, joka kutsutaan, kun asiakas on liittynyt huoneeseen ja on valmis liittymään.

const room = rooms[socket.roomId];

Koska olemme liittäneet huoneen ID:n sokettiin, voimme saada huoneen tarkistaaksemme, onko peli valmiina aloittamaan.

if (room.sockets.length == 2) {

Tässä tarkistamme, onko huoneessa nyt kaksi pelaajaa vertaa. Jos tämä on nyt totta, jatkamme pelin aloittamista.

for (const client of room.sockets) {
client.emit('initGame');
}

Kun pelaajia on kaksi, iteroimme jokaisen soketin läpi ja emitamme 'initGame' -tapahtuman, jotta jokainen asiakas lataa Taso- kohtauksen, kuten aiemmin mainittiin.

Osa 5: Pelattavuus

Nyt pääsemme asioiden ytimeen. Tämä on paikka, jossa 90 % työstä jää. Alla on peli taso, jonka suunnittelimme tätä opasta varten.

Ennen kuin pääsemme siihen, meillä on etiketti nimeltä "Pelin logiikka", tutkitaanpa sitä.

Vau, siellä on paljon käyttäytymisiä! Älä huoli, tämä on vain se, kuinka syntetisoimme pelaajat peliin. Tarkastellaanpa tarkemmin;

Aloitamme Emit to Socket -käyttäytymisellä, joka ilmoittaa palvelimelle, että pelimme on alkanut, tapahtumalla 'startGame'. Tämän jälkeen haemme taulukko, jonka palvelin palauttaa, otamme ensimmäisen arvon ja Get Dictionary Value -toiminnolla saamme eri attribuutit, joita objektimme tarvitsee. Erillinen puu tekee samoin, mutta vastustajapelaajalle. Lopuksi lähetämme viestin 'init' pelaaja objektillamme saadaksemme asiat liikkeelle.

Katso, mitä tapahtuu palvelimen puolella, kun emitamme 'startGame' -tapahtuman.

Soket-tapahtuman ensimmäisessä osassa asetetaan jokaiselle asiakkaalle alkuarvot, sitten lisätään minkä tahansa asiakkaan, joka ei ole emitoinut asiakas, paikalliseen 'others' -taulukkoon.

Sitten luodaan paikallinen sanakirja, johon merkitään "ack". Siinä meillä on tietoa itsestämme ja muista asiakasta. Lähetämme tämän tiedon takaisin asiakkaalle siirtämällä sanakirjamme 'ack' palautefunktiolle, joka muuttuu Emit to Socket käyttäytymisen kutsuvaan työn tulokseen.

Sen jälkeen aikakatkaisu viidelle sekunnille tekee pelin alkamisen, nyt kaikki pelaaja on saanut kaikki tarvittavat tiedot pelin pelaamiseksi. 'beginRound' -funktio ohjaa pelikohtaisia logiikoita tälle projektille. Emme mene tässä liikaa yksityiskohtiin, mutta käytännössä se hallitsee, missä pelaajat syntetisoidaan, pistetarkastelut, ja kertoo asiakkaille, kuka on Tagi.

Kuten aiemmin mainittiin, 'init' -viesti kutsutaan "Pelin logiikka" -etiketille, kun kaikki on valmista. Pelaaja objektissa tarkastellaan nyt käyttäytymistä, kun se vastaanottaa 'init' -viestin.

Täältä näet meillä on useita käyttäytymispuun rakenne pelaajallamme. Aloitetaan ylävasemmalta puusta.

Tämä on käyttäytyminen, joka käytännössä käynnistää kaikki muut pelissämme.

Ensinnäkin vastaanotamme 'init'-viestin, joka lähetettiin "Pelin logiikka" -etiketiltä. Tästä keräämme objektimme palvelimen ID:n ja käynnistämme Socket Eventin sekä asetamme pelin näytön, jotta voimme tarkasti seurata hahmoamme.

Liikkumisen synkronointi

Tässä on yksi tärkeimmistä käyttäytymisistämme. Tämä pieni puu on suunniteltu päivittämään pelaajamme sijainti palvelimella aina, kun siirrämme joystickia. Olet todennäköisesti huomannut, että se viittaa myös joihinkin sanakirjatietoihin. Haluamme saada nämä tiedot erillisestä sanakirjatoiminnosta, joka sisältää pelaajan X- ja Y-koordinaatit.

Tarkastellaanpa palvelimen 'moved'-tapahtumaa.

data = JSON.parse(data);

Sanakirjat, kun niitä lähetetään asiakkaalta palvelimelle, on ensin käsiteltävä, jotta tietoa voidaan lukea helpommin. Tämä johtuu siitä, että sanakirjat hyperPadissa koodataan JSON-rakenteeseen lähetettäessä palvelimelle. Tämä rivi jäsentää JSON-merkkijonorakenteen ja tallentaa sanakirjalistan takaisin samaan paikalliseen 'data'-muuttujaan.

socket.x = data.x;
socket.y = data.y;

Tässä päivitetään X- ja Y-koordinaatit, jotka on tallennettu sokettiin, uusilla asiakas saaman arvojen mukaisilla.

for (const client of room.sockets) {
if (client == socket) {
continue;
}
client.emit(socket.id, {
x: socket.x,
y: socket.y,
score: socket.score,
isIt: socket.isIt
});
}

Seuraavaksi iteroimme kaikkien asiakkaiden yli ja päivitämme heidät uudesta sijainnistamme ja muista tiedoista, lukuun ottamatta itseämme (eli Emittoivan asiakkaan ei tarvitse tietää omaa sijaintiaan).

Tämä puu hallitsee suureksi osaksi peliämme. Käytämme Socket Eventia, kun palvelin tarkistaa, mikä pelaaja on Tagi, joka emitattiin 'beginRound' (rivi 99) palvelimella.

Sitten otamme objektin palvelimen ID:n taulukosta ja hankimme sen eri sanakirja- tiedot, ja näin saamme pelaajan pisteet, onko pelaaja Tagi, sekä objektin X- ja Y-koordinaatit, joiden kautta voimme asettaa ne obiectin attribuuteille. Muut käyttäytymiset ohjaavat ja hallitsevat käyttöliittymää pelissämme.

Yhteenveto

Täällä oli paljon käsiteltävää, mutta toivottavasti, jos pääsit tähän asti, sinulla on käsitys siitä, kuinka voit käyttää Socket.io-käyttäytymisiä luodaksesi moninpelikokemuksia pelaajillesi.

Kokeile itse! Ota jokin olemassa olevista peleistäsi ja yritä lisätä sille verkkotoiminnallisuutta, kuten huipputulostaulun kohtaus, joka yhdistää palvelimeen ja pyytää listasot 10 parasta pistettä pelaajanimillä näytettäväksi.

On vaikeaa opettaa skriptikieltä, kuten Javascriptia, yhdessä artikkelissa. Onneksi, jos sinulla on ongelmia, on runsaasti muita resursseja, jotka voivat auttaa sinua kirjoittamaan Javascript-sovelluksia Node.JS:lle ja Socket.io:lle;

Opettele Javascript - https://developer.mozilla.org/bm/docs/Web/JavaScript

Opettele Socket.io - https://socket.io/docs/

Opettele Node.JS - https://nodejs.org/en/docs/