Deepinder Singh
Deepinder Singh

Sledovat

Nov 25, 2019 · 7 min číst

Tento článek byl přesunut sem. Nejnovější verzi tohoto článku naleznete na uvedeném odkazu.

Foto Pankaj Patel na Unsplash

To může být nejvíce obávané otázky mezi nové vývojáře na to, jak udělat aplikaci s AngularSocket.io. Jako většina aplikací využívat zásuvky pro komunikaci v reálném čase FrontendBackend. Takže dnes budu mluvit o tom, jak se integrovat socket.io s úhlovou aplikací. Tento kód by fungoval pro všechny úhlové verze nad Angular1.

Aktualizováno — Tento článek byl aktualizován v prosinci 2020 zvládnout nejnovější verzi v3 změny zásuvky.io

začněte tím, že vytvoří node projekt první.

vytvořte nový directory a zadejte jej.

mkdir socketio-node

tím se vytvoří prázdná složka s názvem socketio-node.

použijeme uzel.JS web framework express. Ujistěte se, že uzel.JS je nainstalován na vašem systému.

nejprve vytvoříme package.json manifest soubor, který popisuje náš projekt.
Vytvořte soubor s názvem package.json a vložte do něj níže uvedený kód.(Můžete si také udělat to s npm init)

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

Nyní, aby bylo možné snadno naplnit dependencies vlastnost musíme nainstalovat express zadejte v terminálu.

npm install express

To bude instalovat a přidat na nejnovější verzi express do našeho projektu a vaše dependencies bude teď vypadat jako

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

Nyní, že express je nainstalován můžeme vytvořit index.js soubor, který bude nastavení naší aplikace.

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');
});

Tento kód je vysvětlen v následujících krocích:

  • Vyjádřit inicializuje app třeba funkce, obslužné rutiny, které můžete doplnit do HTTP serveru (jak je vidět v řádku 2).
  • definujeme obslužnou rutinu /, která se zavolá, když narazíme na naše webové stránky domů.
  • necháme http server poslouchat na portu 3000.

Pokud spustíte node index.js měli byste vidět následující:

Zahájení http://localhost:3000 v prohlížeči bude vypadat:

Teď pojďme integrovat zásuvky.io do našeho uzlu aplikace. Za prvé, musíme nainstalovat socket.io závislost do naší aplikace. Spusťte to v terminálu.

npm install socket.io

tím se modul nainstaluje a závislost se přidá do package.json. Nyní upravme index.js a přidejte jej:

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');
});

Všimněte si, že jsem inicializovat nové instance socket.io na řádek 3 do absolvování http (HTTP server) objekt a cors možnosti(aktualizováno pro zásuvky.io v3), aby naše úhlové localhost url, můžete dát do url, nebo váš frontend klienta, v mém případě to byl localhost:4200
Pak jsem poslouchat na connectiondisconnection akce pro příchozí zásuvky, a mohu přihlásit do konzole.

náš Backend je prozatím dobrý, vrátíme se k našemu node kód, když budeme implementovat další události dále.

začněme vytvořením Angular aplikace nyní. Budu vytvářet nový Angular aplikace od nuly, zatímco většina z vás by již jednou vytvořené s vámi.
Ti, kteří již mají pracovní Angular aplikace můžete přeskočit následující kód:

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

To by nainstalovat nejnovější verzi Angular CLI a vytvořit nový Úhlové aplikace od nuly.

nyní přidejme socket.io dependency v naší Úhlové aplikaci.

cd socketio-angular
npm install socket.io-client

To by nainstalovat nejnovější socket.io-client knihovna v naší Úhlové aplikace.

nyní začněme vytvořením service pro zpracování socket.io spojení. Chtěl bych vytvořit kořenové úrovni singleton službu s názvem socketio.service.ts a patří, že v AppModule . Službu můžete vytvořit podle struktury projektu.
službu můžete vytvořit spuštěním následujícího příkazu.

ng g s socketio

tím se vytvoří služba s názvem socketio.service.ts . Adresářová struktura by vypadala asi takto. Toto je jen jednoduché demo na jedné stránce, takže jsem přidal službu do základní složky, jako je tato.

Nyní, jít do socketio.service.ts soubor a importovat následující:

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

Teď pojďme přidat zásuvky endpoint, že bychom se spojit zásuvky, aby se uvnitř environment.ts soubor.

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

nyní se pokusíme připojit k naší zásuvce a vytvořit zásuvku. Nejprve musíme přidat SocketioService do AppModule a aplikujte služby do app.component.ts . Pojďme nejprve přidat službu do našich poskytovatelů. V app.module.ts udělej to:

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

a pojďme na socketio.service.ts a napište funkci socket init.

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

Tento bude deklarovat proměnné s názvem socket a pak po zavolání setupSocketConnection způsob, socket proměnné by bylo obsahující připojené socket objektu.

nyní zavoláme tuto metodu z app.component.ts uvnitř ngoninitu.

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

Pokud používáte Angular 6 a vyšší, můžete narazit na tuto chybu.

Uncaught ReferenceError: global is not defined

je To proto, že na verzi 6 Úhlové CLI Úhlové tým removind podložku pro global a další uzel postavena-in. Pokud jsme pomocí knihovny, který předpokládá, že tyto globals jsou přítomny(socket.io-client v našem případě), můžete se pokusit ručně musíte to uvnitř polyfills.ts souboru:

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

Přidat tento řádek do polyfills.ts soubor by vyřešit problém, a vaše aplikace bude pracovat znovu. Chcete-li si přečíst více o výše uvedeném problému, postupujte takto link.

Po spuštění Úhlové aplikaci nyní, můžete vidět zásuvky připojeno a naše uzlu aplikace konzoly zobrazující a user connected jako je tento:

Při odpojení zásuvky nebo zavřete webovou stránku, můžete vidět, user disconnected zprávy na konzoli.

tímto jsme dokončili naši inicializaci soketů. Nyní se dozvíme, jak vysílat a poslouchat události.

Pojďme se zaregistrovat událost se nazývá my message uvnitř index.js uzel souboru a konzole dat a budeme vydávat stejné události z Angular aplikace.

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); });});

A nechte je vyzařovat stejnou událost z Úhlové kód,

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

Tento kód by se vydávají na akci s názvem my message a to by tisk v návaznosti na náš uzel konzoly. Můžete vidět zprávu „Ahoj z Úhlové“. Naše vlastní akce nyní fungují.

Nyní, emit událost server side. Událost budeme vysílat všem připojeným uživatelům. Vysíláme stejnou zprávu, jakou jsme obdrželi od klienta, a předepíšeme k ní řetězec serveru.

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

přidejte posluchače pro my broadcast událost v naší Úhlové aplikaci nyní.

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

Po tom, můžete zkontrolovat své broswer consoleprint něco jako tohle. Vytiskne zprávu ze serveru, který vysílal vysílání.

Jsme se zabývali basic části připojení uzlu zásuvky.io aplikace s Úhlovou aplikace.

bonusový tip: Můžete také odeslat query parameters do backendu při připojení k soketu pomocí options s adresou url ve spojení.

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

fetch tato informace na Backend, musíme to udělat takhle:

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

Tento by vrátit hodnotu cde prošel Frontend.

všechny výše napsané ukázkové kódy můžete zkontrolovat na mém GitHubu.

tím končí můj článek o vytváření real time applicationAngularSocket.ioNodeJS. Pokryl jsem basics připojení aplikací. Existuje mnohem více informací o zásuvkách, které lze prozkoumat jako pokoje, Online offline stav, odesílání více dat, načítání online uživatelů. Tyto informace nelze zahrnout do jediného článku. Bude write o těchto tématech, pokud liked my work na tomto blogu.

zapište si své recenze.

Líbilo se mi moje práce? Kup mi Kafe.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.