Phenquestions
A WebSocket protokoll lehetővé teszi a kétirányú kommunikációt az ügyfél és a szerver között. Ez a folyamat hasonlít ahhoz, ahogyan a telefonján hívások zajlanak: először létre kell hoznia a kapcsolatot, majd megkezdheti a kommunikációt egymással. A WebSocket protokollt szinte mindenhol használják - a többjátékos böngészőjátéktól a csevegőalkalmazásokig.
Ez a cikk bemutatja, hogyan hozhat létre WebSocket protokollt, és hogyan használhatja azt több felhasználóval való kommunikációhoz.
Előfeltételek
Mielőtt továbblépne a WebSocket protokoll létrehozásának és használatának folyamatába, először telepítenie kell néhány folyamathoz szükséges dolgot. Az első dolog, amit telepítenie kell, a Node.js, egy szerveroldali platform, amely konvertálja a JavaScript programozási nyelvet gépi kódgá, amely lehetővé teszi a JavaScript futtatását közvetlenül a számítógépen. A Node telepítéséhez.js, a Windows felhasználói egyszerűen át tudnak menni a hivatalos Node-ra.js webhelyen, és kattintson a képernyő közepén található zöld LTS gombra.
Linux és macOS felhasználók esetén kattintson a gombra Letöltések szakasz a weboldal alfejlécében.
Miután kinyitotta a Letöltések szakaszban láthatja a telepítési fájlokat mindhárom nagyobb platformra. Válasszon egy csomagot, amelyet a rendszere támogat.
Futtassa a letöltött fájlokhoz tartozó telepítőt és a Node-ot.js telepítve lesz a számítógépére. Annak ellenőrzéséhez, hogy a program telepítve van-e, nyissa meg a terminált, és adja ki a következő parancsot:
$ csomópont -v
A Node telepítése után.js, most hozzáfér a különböző JavaScript modulokhoz, amelyek hosszú távon hatékonyabbá teszik munkáját. Nyissa meg azt a könyvtárat, amelyben létre kívánja hozni az ügyfél- és kiszolgálóarchitektúrát, majd nyissa meg a terminált a könyvtárban, és futtassa a következő parancsot:
$ npm init -y
Ezt a parancsot használják a csomag létrehozására.json fájl, amely lehetővé teszi különböző Node beállítását és telepítését.js csomagok. Telepítse a WebSocket protokollcsomagot a következő parancs kiadásával a terminálon:
$ npm install ws
Hozzon létre három nevű fájlt index.html, kliens.js és szerver.js. Amint a nevek jelzik, ezek a JavaScript fájlok a WebSocket protokollunk kliens és szerver architektúráját jelentik. Most végre elkezdhetjük írni kliens- és szerveralkalmazásaink kódját.
WebSocket szerver létrehozása
WebSocket szerver létrehozásához először a kiszolgáló kódjának megírásával kezdjük. Nyissa meg a szerver.js az előző szakaszban a szövegszerkesztőben vagy az IDE-ben létrehozott fájlt, és írja be a fájlba a következő.
const WebSocket = igényel ('ws');const ws = új WebSocket.Szerver (port: 8080);
konzol.napló ("Server elindítva");
ws.on ('kapcsolat', (wss) =>
konzol.napló ("Új ügyfél csatlakozik")
wss.send ('Üdvözöljük a szerveren!');
wss.be ('üzenet', (üzenet) =>
konzol.napló ('Szerver beérkezett: $ message');
wss.send ('Megvan az üzeneted:' + üzenet);
);
);
Most részletesebben elmagyarázzuk, hogy az egyes sorok mit csinálnak.
Kód Magyarázat
Amint azt korábban említettük, néhány beépített modul elérhető a Node-ban.js, amelyek sokkal könnyebbé teszik munkáját. Ezeknek a moduloknak az importálásához a megkövetelik kulcsszó.
const WebSocket = igényel ('ws');const ws = új WebSocket.Szerver (port: 8080);
konzol.napló ("A szerver elindítva");
Az első sor a csomópont importálására szolgál.js WebSocket modul. Ennek a modulnak a segítségével a következő sorban létrehozzuk a WebSocket szerverünket, amely a 8080-as porton hallgat. A konzol.napló () sor egyszerűen azért van, hogy tudassa velünk, hogy a szerver elindult. Látni fogja ezt a terminálon belül, amikor a következő parancsot futtatja a terminálon:
$ node szerver
A következő sorban kapcsolatot létesítünk a szerver és az ügyfél között.
ws.on ('kapcsolat', (wss) =>konzol.napló ("Új ügyfél csatlakozik")
);
A kapcsolat létrejötte után a wss.send () sor üzenetet küld az ügyfélnek. Ebben az esetben az üzenet „Üdvözöljük a szerveren.”
wss.send ('Üdvözöljük a szerveren!');Végül a wss.Az on ('üzenet') a kiszolgálónak kell fogadnia az üzenetet az ügyféltől. Megerősítésképpen a szerver ezt az üzenetet visszaküldi az ügyfélnek az utolsó sorban.
wss.be ('üzenet', (üzenet) =>konzol.napló ('Szerver beérkezett: $ message');
wss.send ('Megvan az üzeneted:' + üzenet);
);
WebSocket kliens létrehozása
A kliens oldalon mindkét indexre szükségünk van.html fájl és az ügyfél.js fájl. Természetesen egyszerűen hozzáadhatja a tartalmat az ügyféltől.js fájlt az indexébe.html fájlt, de inkább külön tartom őket. Először nézzük meg az ügyfelet.js kód. Nyissa meg a fájlt, és írja be a következő sorokat a fájl belsejébe:
const socket = new WebSocket ('ws: // localhost: 8080');foglalat.addEventListener ('open', () =>
konzol.napló ('Csatlakozás a kiszolgálóhoz!');
);
foglalat.addEventListener ('üzenet', (msg) =>
konzol.napló ('Ügyfél beérkezett: $ msg.adat');
);
const sendMsg = () =>
foglalat.send ('Hogy megy ez amigo!');
Kód Magyarázat
Mint a szervernél.js, létrehozunk egy új WebSocket-et, amely hallgatja a 8080-as portot, amely a helyi gazda: 8080 szakaszában.
const socket = new WebSocket ('ws: // localhost: 8080');A következő sorban, addEventListener arra készteti az ügyfelet, hogy meghallgassa a jelenleg zajló eseményeket. Ebben az esetben a szerver létrehozása és elindítása lenne. A kapcsolat létrejötte után az ügyfél üzenetet küld a terminálnak.
foglalat.addEventListener ('open', () =>konzol.napló ('Csatlakozás a kiszolgálóhoz!');
);
Ismét az ügyfél meghallgatja a jelenleg zajló eseményeket. Amikor a szerver üzenetet küld, az ügyfél megkapja ezt, majd megjeleníti az üzenetet a terminálon.
foglalat.addEventListener ('üzenet', (msg) =>konzol.napló ('Ügyfél beérkezett: $ msg.adat');
);
Az utolsó néhány sor egyszerűen egy olyan funkció, ahol az ügyfél üzenetet küld a szervernek. Ezt a html fájlunk egyik gombjával összekapcsoljuk, hogy jobban megértsük ennek működését.
const sendMsg = () =>foglalat.send ('Hogy megy ez amigo!');
HTML fájl előkészítése
Végül nyissa meg az indexet.html fájlt, és adjon hozzá egy hivatkozást az ügyfeléhez.js fájl benne. Esetemben egyszerűen hozzáadom a következő kódsorokat:
Amint az alábbi sorokban láthatja, src (a script tag belsejében) az ügyfél javascript fájljára utal. A sendMsg függvény, amelyet az ügyfél létrehozott.js fájlt, a gomb onClick funkciójához is csatlakoztatták.
Mindent összerakva
Most elkezdheti tesztelni kliens és kiszolgáló architektúráját. Először nyissa meg a terminált, és futtassa a következő parancsot a kiszolgáló indításához:
$ node szerver
A szerver indítása után nyissa meg azt a könyvtárat, amelyben az indexe található.html fájl van, és kattintson rá duplán a böngészőben történő megnyitásához. A terminálon a következő üzenet jelenik meg arról, hogy egy ügyfél csatlakozott:
A szerverről az ügyfélnek küldött üzeneteket a jobb egérgombbal megnyomva, majd megnyitva is ellenőrizheti Ellenőrizze ablak. Ebben az ablakban kattintson a gombra Konzol szakaszban, és láthatja a szerverről küldött üzeneteket.
Miután rákattintott a gombra, mind a szerver, mind az ügyfél képes üzeneteket küldeni és fogadni egymásnak és egymástól.
szerver:
Ügyfél:
Voilà, a WebSocket kapcsolatod létrejött!
Következtetés
A WebSocket protokoll kiváló módja a kliens és a szerver közötti kommunikáció megteremtésének. Ezt a protokollt több területen használják, beleértve a többjátékos böngészős játékokat, a különböző közösségi média platformok csevegőrendszereit, sőt a kódolók közötti együttműködési folyamatokat is.
