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.