Ten artykuł został przeniesiony tutaj. Najnowsza wersja tego artykułu znajduje się pod podanym linkiem.
to może być najbardziej przerażające pytanie wśród nowych programistów na temat tworzenia aplikacji zAngularISocket.io.
to może być najbardziej przerażające pytanie wśród nowych programistów na temat tworzenia aplikacji zAngularISocket.io.ponieważ większość aplikacji korzysta z gniazd do komunikacji w czasie rzeczywistymFrontendzBackend. Dzisiaj będę mówił o tym, jak zintegrować socket.io z aplikacją kątową. Kod ten będzie działał dla wszystkich wersji kątowych powyżej Angular1.
Zaktualizowano-ten artykuł został zaktualizowany w grudniu 2020 r., aby obsłużyć najnowsze zmiany w wersji v3 socket.io
Zacznijmy od utworzenia projektunode.
Utwórz nowy directory i wprowadź go.
mkdir socketio-node
spowoduje to utworzenie pustego folderu o nazwiesocketio-node.
użyjemy węzła.Js web framework express. Upewnij się, że węzeł.JS jest zainstalowany w systemie.
najpierw stwórzmy plik manifestupackage.json opisujący nasz projekt.
Utwórz plik o nazwie package.json i wklej do niego poniższy kod.(Można to również zrobić z npm init)
{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
teraz, aby łatwo wypełnić dependencies właściwość musimy zainstalować express, wpisz to w terminalu.
npm install express
zainstaluje i doda najnowszą wersję expressa do naszego projektu, a Twójdependencies będzie wyglądał teraz tak
"dependencies": {
"express": "^4.17.1"
}
teraz, gdy express jest zainstalowany, możemy utworzyćindex.js plik, który skonfiguruje naszą aplikację.
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');
});
ten kod jest wyjaśniony w następujących krokach:
- Express inicjalizuje
appjako funkcję obsługującą, którą można dostarczyć do serwera HTTP (jak widać w linii 2). - definiujemy trasę
/, która zostanie wywołana, gdy trafimy na naszą stronę. - sprawiamy, że serwer http nasłuchuje na porcie 3000.
Po uruchomieniu node index.js powinieneś zobaczyć następujące informacje:
otwarciehttp://localhost:3000w przeglądarce wyglądałoby tak:
teraz zintegrujmy socket.io do naszej aplikacji node. Najpierw musimy zainstalować zależnośćsocket.io w naszej aplikacji. Uruchom to w terminalu.
npm install socket.io
spowoduje to zainstalowanie modułu i dodanie zależności dopackage.json. Teraz edytujmy index.js, aby go dodać:
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');
});
zauważ, że inicjuję nową instancję socket.io w linii 3, przekazując obiekthttp (serwer HTTP) i opcje cors (zaktualizowane dla socket.io v3) aby umożliwić nasz angular localhost url, możesz umieścić w adresie url lub swoim kliencie frontend, w moim przypadku było to localhost:4200następnie słucham na connection I disconnection zdarzenia dla przychodzących gniazd i loguję je do konsoli.
Nasz Backend jest na razie gotowy, wrócimy do naszegonode kodu, kiedy będziemy wdrażać kolejne zdarzenia dalej.
zacznijmy od utworzenia aplikacjiAngular. Będę tworzyć nową aplikację Angular od podstaw, podczas gdy większość z was już by ją stworzyła.
ci, którzy mają już działającą aplikacjęAngular mogą pominąć następujący kod:
npm install -g @angular/cli
ng new socketio-angular
zainstaluje to najnowszą wersjęAngular CLI I utworzy nową aplikację kątową od podstaw.
teraz dodajmy socket.io dependency w naszej aplikacji kątowej.
cd socketio-angular
npm install socket.io-client
to zainstaluje najnowszą bibliotekęsocket.io-client w naszej aplikacji kątowej.
zacznijmy od utworzenia service do obsługi socket.io połączenie. Chciałbym utworzyć poziom głównysingleton usługa o nazwiesocketio.service.ts I dołączyć to doAppModule . Możesz utworzyć usługę zgodnie ze strukturą projektu.
możesz utworzyć usługę, uruchamiając następujące polecenie .
ng g s socketio
spowoduje to utworzenie usługi o nazwiesocketio.service.ts . Struktura katalogów wyglądałaby mniej więcej tak. To jest tylko proste demo jednostronicowe, więc dodałem usługę do folderu bazowego w ten sposób.
teraz przejdź do plikusocketio.service.tsi zaimportuj następujące dane:
import { io } from 'socket.io-client';
teraz dodajmy punkt końcowy gniazda, do którego podłączymy Gniazdo wewnątrz plikuenvironment.ts.
export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};
spróbujmy teraz połączyć się z naszym gniazdem i utworzyć konencję gniazda. Najpierw musimy dodaćSocketioService do naszegoAppModule I wstrzyknąć usługę do naszegoapp.component.ts . Dodajmy najpierw usługę do naszych dostawców. Inapp.module.ts zrób to:
@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }
i przejdźmy dosocketio.service.ts I napisz funkcję init gniazda.
export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}
spowoduje to zadeklarowanie zmiennej o nazwiesocket, a następnie po wywołaniu metodysetupSocketConnectionsocket będzie zawierać obiekt podłączonego gniazda.
teraz, nazwijmy tę metodę z app.component.ts wewnątrz ngOnInit.
export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}
Jeśli używasz Angular 6 i nowszych, możesz napotkać ten błąd.
Uncaught ReferenceError: global is not defined
dzieje się tak dlatego, że w wersji 6 Angular Cli Angular team usuwa podkładkę dlaglobal I innych wbudowanych węzłów. Jeśli korzystamy z biblioteki, która zakłada, że te globale są obecne(socket.io-client w naszym przypadku), możesz spróbować ręcznie ustawić ją wewnątrz swojego polyfills.ts plik:
// Add global to window, assigning the value of window itself.
(window as any).global = window;
dodając tę linię do twojego polyfills.ts Plik by rozwiązać problem i aplikacja będzie działać ponownie. Aby dowiedzieć się więcej o powyższym problemie, postępuj zgodnie z poniższym link.
Po uruchomieniu aplikacji kątowej teraz możesz zobaczyć podłączone gniazdo i konsolę aplikacji węzła pokazującą a user connected w ten sposób:
po odłączeniu gniazda lub zamknięciu strony internetowej można zobaczyć komunikatuser disconnectedw konsoli.
tym zakończyliśmy inicjalizację gniazd. Teraz dowiemy się, jak emitować i słuchać wydarzeń.
zarejestrujmy Zdarzenie o nazwiemy message wewnątrz naszego pliku węzłaindex.js I konsolujmy dane, a my wyemitujemy to samo zdarzenie z aplikacjiAngular.
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); });});
i wygenerujmy to samo zdarzenie z kodu kątowego
setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}
ten kod wyemituje Zdarzenie o nazwiemy message I wydrukuje następujące zdarzenie na naszej konsoli węzła. Możesz zobaczyć wiadomość 'Hello there from Angular’. Nasze niestandardowe wydarzenia już działają.
teraz, Let ’ semitzdarzenie zserver side. Będziemy transmitować wydarzenie do wszystkich podłączonych użytkowników. Będziemy nadawać ten sam komunikat, który otrzymaliśmy od klienta i poprzedzić ciąg serwera do niego.
io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});
dodajmy teraz słuchacz dla my broadcast zdarzenia w naszej aplikacji kątowej.
this.socket.on('my broadcast', (data: string) => {
console.log(data);
});
Po wykonaniu tej czynności możesz sprawdzić swójbroswer console, będzie toprint coś takiego. Wyświetla wiadomość z serwera, który emitował transmisję.
omówiliśmybasicczęści łączenia węzła socket.io aplikacja z aplikacją kątową.
Bonus tip: Możesz również wysłać query parameters do zaplecza podczas łączenia się z gniazdem, używając options z adresem url w połączeniu.
this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});
dofetch te informacje na zapleczu, musimy zrobić to w następujący sposób:
io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});
To zwróci wartośćcde frontend.
Możesz sprawdzić cały powyższy przykładowy kod na moim GitHubie.
kończę mój artykuł o tworzeniu real time application z Angular I Socket.io z NodeJS. Omówiłem basics łączenia aplikacji. Istnieje o wiele więcej informacji na temat gniazd, które można zbadać, takich jak pokoje, status online offline, wysyłanie większej ilości danych, pobieranie użytkowników online. Informacje te nie mogą być ujęte w jednym artykule. Będzie writena te tematy, jeśli liked my work na tym blogu.
Napisz swoje opinie.
podobała mi się Moja praca? Postaw mi kawę.