nov 25, 2019 · 7 perc olvasás

Ez a cikk ide került. A cikk legújabb verziójához kérjük, látogasson el a megadott linkre.

fotó: Pankaj Patel az Unsplash oldalon

Ez lehet a leginkább rettegett kérdés az új fejlesztők körében, hogyan lehet egy alkalmazást készíteni aAngularandSocket.io. mivel a legtöbb alkalmazás használja aljzatok valós idejű kommunikáció a Frontend a Backend. Tehát ma arról fogok beszélni, hogyan lehet integrálni socket.io egy szögletes app. Ez a kód az Angular1 feletti összes szögletes változatnál működne.

Frissítve-ez a cikk 2020 decemberében frissült a legújabb verzió kezelésére v3 változások socket.io

először hozzunk létre egynode projektet.

Hozzon létre egy újdirectory majd írja be.

mkdir socketio-node

Ez egy üres mappát hoz létre, amelynek neve socketio-node.

a csomópontot fogjuk használni.JS web framework express. Győződjön meg róla csomópont.A JS telepítve van a rendszerére.

először hozzunk létre egypackage.json manifest fájlt, amely leírja a projektünket.
hozzon létre egy package nevű fájlt.JSON és illessze be az alábbi kódot bele.(Ezt megteheti a npm init)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

most, hogy könnyen feltölthesse a dependencies tulajdonságot, amelyet telepítenünk kell express, írja be ezt a terminálba.

npm install express

telepíti és hozzáadja az express legújabb verzióját a projektünkhöz, és a dependencies most úgy néz ki, mint

"dependencies": {
"express": "^4.17.1"
}

most, hogy az express telepítve van, létrehozhatunk egy index.js fájl, amely beállítja az alkalmazásunkat.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

ezt a kódot a következő lépések ismertetik:

  • Express inicializálja a app FÜGGVÉNYKEZELŐT, amelyet HTTP-kiszolgálónak adhat meg (a 2.sorban látható módon).
  • definiálunk egy útvonalkezelőt/ amelyet akkor hívunk meg, amikor a weboldalunkra lépünk.
  • a http szervert a 3000-es porton hallgatjuk.

Ha fut node index.js a következőket kell látnia:

megnyitás http://localhost:3000 a böngészőben úgy nézne ki, mint:

most integráljuk socket.io a mi csomópont app. Először is telepítenünk kell asocket.io függőséget az alkalmazásunkba. Futtassa ezt a terminálon.

npm install socket.io

Ez telepíti a modult, és hozzáadja a függőséget apackage.json – hez. Most szerkesszük index.js hozzáadásához:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins:
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

vegye figyelembe, hogy a socket.io új példányát inicializálom a 3. sorban a http (A HTTP szerver) objektum és a cors opciók átadásával (frissítve socket.io v3), hogy a szögletes localhost url, akkor tegye az url-t, vagy a frontend kliens, az én esetemben ez volt localhost:4200
akkor hallgatni a connection és disconnection események bejövő foglalatok, és azt jelentkezzen be a konzolra.

a Háttérprogramunk egyelőre jó, visszatérünk a node kódunkhoz, amikor további eseményeket fogunk végrehajtani.

kezdjük egyAngular alkalmazás létrehozásával. Létrehozok egy újAngular alkalmazást a semmiből, míg a legtöbben már létrehoztak veled egyet.
azok, akik már rendelkeznek működő Angular app kihagyhatja a következő kódot:

npm install -g @angular/cli
ng new socketio-angular

Ez telepíti a legújabb verzióját Angular CLI és hozzon létre egy új szögletes app a semmiből.

Most adjuk hozzá socket.io dependency szögletes alkalmazásunkban.

cd socketio-angular
npm install socket.io-client

Ez telepítené a legújabbsocket.io-client könyvtárat a szögletes alkalmazásunkban.

most kezdjük azzal, hogy létrehozunk egy service kezelni socket.io kapcsolat. Létrehoznék egy root szintet singleton szolgáltatás neve socketio.service.ts és belefoglalom ezt a AppModule . A szolgáltatást a projekt struktúrájának megfelelően hozhatja létre.
a szolgáltatást a következő parancs futtatásával hozhatja létre.

ng g s socketio

Ez egy socketio.service.ts nevű szolgáltatást hozna létre . A könyvtárszerkezet valahogy így nézne ki. Ez csak egy egyszerű egyoldalas bemutató, ezért hozzáadtam a szolgáltatást az alapmappához.

most lépjen be a socketio.service.ts fájlba, és importálja a következőket:

import { io } from 'socket.io-client';

Most adjuk hozzá azt a socket végpontot, amelyhez az aljzatot csatlakoztatnánkenvironment.ts fájl.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

most próbáljunk csatlakozni a socket-hez, és hozzunk létre egy socket kapcsolatot. Először hozzá kell adnunk a SocketioService – et a AppModule – hez, és be kell fecskendeznünk a szolgáltatást a app.component.ts – be . Először adjuk hozzá a szolgáltatást szolgáltatóinkhoz. In app.module.ts tegye ezt:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

és menjünk asocketio.service.ts és írjunk egy socket init funkciót.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

Ez deklarálja a socketnevű változót, majd a setupSocketConnectionmetódus meghívása után a socket változó tartalmazza a csatlakoztatott socket objektumot.

most hívjuk ezt a módszert app.component.ts belül ngOnInit.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

Ha Angular 6 vagy újabb verziót használ, előfordulhat, hogy ez a hiba lép fel.

Uncaught ReferenceError: global is not defined

Ez azért van, mert az Angular CLI Angular team 6-os verzióján távolítsa el az alátétet aglobal és más csomópont beépített. Ha olyan könyvtárat használunk, amely feltételezi, hogy ezek a globálok jelen vannak(socket.io-client a mi esetünkben), akkor megpróbálhatja manuálisan simítani a polyfills.ts fájl:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

ezt a sort hozzáadva a polyfills.ts a fájl kijavítja a problémát, és az alkalmazás újra működik. Ha többet szeretne megtudni a fenti problémáról, kövesse ezt a link.

az Angular alkalmazás futtatása után láthatja a csatlakoztatott aljzatot és a csomópont alkalmazáskonzolunkat, amely a következőt mutatja:

a user connected mint ez:

amikor leválasztja az aljzatot, vagy bezárja a weboldalt, láthatja a user disconnected üzenetet a konzolon.

ezzel befejeztük az aljzatok inicializálását. Most megtanuljuk, hogyan kell kibocsátani és hallgatni az eseményeket.

regisztráljuk amy message nevű eseményt aindex.js csomópont fájlban, és konzoláljuk az adatokat, és ugyanazt az eseményt bocsátjuk ki aAngular alkalmazásból.

io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('my message', (msg) => { console.log('message: ' + msg); });});

és ugyanazt az eseményt bocsátjuk ki az Angular code-ból

setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}

Ez a kód a my message nevű eseményt bocsátja ki, és a következőket nyomtatja ki a csomópont konzolunkra. Láthatja a ‘Hello there from Angular’ üzenetet. Egyedi rendezvényeink most működnek.

most nézzük emit egy esemény a server side. Az eseményt minden csatlakoztatott felhasználónak közvetítjük. Ugyanazt az üzenetet küldjük, amelyet az ügyféltől kaptunk, és egy szerver karakterláncot teszünk hozzá.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

adjunk hozzá egy hallgatót amy broadcast eseményhez a szögletes alkalmazásunkban.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

ezt követően ellenőrizheti a broswer console, ez lenne print valami ilyesmi. Kinyomtat egy üzenetet a szerverről, amely kibocsátotta az adást.

lefedtük a basic csomópont összekötő részei socket.io alkalmazás egy szögletes alkalmazással.

bónusz tipp: A query parameters A Háttérrendszerre is elküldhető, amikor a socket-hez csatlakozik a options használatával, url-vel a kapcsolatban.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

To fetch ezt az információt a Backend, meg kell csinálni, mint ez:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

Ez visszaadja az értéket cde telt el által frontend.

a fenti írásbeli példakódokat a github-on ellenőrizheti.

ezzel befejeztem a cikkemet a real time application with Angular and Socket.io with NodeJS. Lefedtem abasics az alkalmazások összekapcsolásáról. Sokkal több információ található a feltárható aljzatokról, mint például a szobák, online offline állapot, további adatok küldése, online felhasználók lekérése. Ezt az információt nem lehet egyetlen cikkben lefedni. Will writeezeken a témákon, ha liked my work ezen a blogon.

írja le véleményét.

tetszett a munkám? Hívj meg egy kávéra.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.