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

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.