Projekt Hintergrund Einführung
Vor kurzem gibt es ein soziales Modul im Projekt, das ich geschrieben habe, und es ist erforderlich, eine Funktion zu implementieren: Wenn ein Benutzer gemocht, kommentiert, befolgt usw. auftritt, muss eine Nachricht vom Server in Echtzeit an den Benutzer weitergeleitet werden. Die letzte Projektadresse lautet: https://github.com/noiron/socket-message-push. Hier werden wir die Implementierungsideen und einige Codes vorstellen.
Der Projektprozess enthält mehrere Objekte:
Der Prozess der Ereignisverarbeitung ist wie folgt:
Bedenken Sie, dass der Message Push -Server die Informationen des aktuellen Online -Benutzers aufzeichnen muss, damit Nachrichten an bestimmte Benutzer weitergegeben werden können. Wenn sich der Benutzer anmeldet, muss er daher seine eigenen Benutzerinformationen an den Node.js -Server senden. Um dieses bidirektionale Echtzeit-Nachrichten zu erreichen, ist es offensichtlich, dass WebSocket implementiert wird. Da wir Node.js auf dem Message Push -Server verwenden, haben wir eine sehr praktische Option: Socket.io.
Einführung in Socket.io
Socket.io ist eine Bibliothek mit in JavaScript implementiertem Zwei-Wege-Kommunikation mit zwei Wege. Es wird einfach sein, es zu verwenden, um unsere Funktionen zu implementieren.
Socket.io enthält zwei Teile:
Sie können sich den folgenden Beispielcode von Socket.io ansehen, der die grundlegende Verwendung von Socket.io zum Ausgeben und Anhören von Ereignissen gibt:
io.on ('connection', function (socket) {socket.emit ('request', / * * /); // ein Ereignis an den Socket io.emit ('sendest', / * /); // ein Ereignis an alle verbundenen Sockets Socket ('Antwort', function () { / * /});Es gibt noch eine andere Sache über Socket.io: Socke.io ist nicht ganz eine Implementierung von WebSocket.
Hinweis: Socket.io ist keine WebSocket -Implementierung. Obwohl Socket.io, wenn möglich, WebSocket als Transport verwendet, fügt es jedem Paket einige Metadaten hinzu: den Pakettyp, den Namespace und die ACK -ID, wenn eine Nachrichtenbestätigung erforderlich ist.
Als nächstes müssen wir Express.js verwenden, um ein serverseitiges Programm einzurichten und Socket.io vorzustellen.
Node.js Server -Konstruktion
Verwenden Sie Express.js, um einen Basisserver zu erstellen
Wir haben Express.js verwendet, um einen Node.js -Nachrichten -Push -Server zu erstellen und zunächst ein kurzes Beispiel zu verwenden, um seine Funktionen zu durchsuchen:
// server.jsConst Expression = required ('express'); const app = express (); const path = required ('path'); const http = required ('http'). server (app); const port = 4001; app.use (express.static (path.join (__ Dirname, 'public'); Res.SendFile (__ Dirname + '/public/index.html')))) )) App.get('/api', Funktion (req, res) {res.sendfile (__ DirName + '/public/index.html')) {{~ App.get('/api (resec, funct (resq, funct res.send ('.');});Speichern Sie den oben genannten Code als Server.js, erstellen Sie einen neuen öffentlichen Ordner und geben Sie die Datei index.html ein. Führen Sie den folgenden Befehl aus:
node server.js
Sie können jetzt den Effekt bei Localhost: 4001 anzeigen.
Einführung von Socket.io
Nachdem ein grundlegender Express -Server vorhanden ist, muss Socket.io als nächstes hinzugefügt werden.
const io = required ('socket.io') (http); io.on ('connection', function (socket) {console.log ('a user angeschlossen'); socket.broadcast.emit ('new_user', {});}Das IO hier hört auf das Verbindungsereignis. Nachdem der Client eine Verbindung zum Server hergestellt hat, wird die Rückruffunktion hier aufgerufen (der Code im Client wird im nächsten Abschnitt eingeführt).
Die Parameterbuchse der Funktion repräsentiert die Verbindung zwischen dem aktuellen Client und dem Server. Sie können die festgelegte Socket -Verbindung im Client -Programm ausdrucken, wie in der folgenden Abbildung gezeigt:
Das ID -Attribut kann verwendet werden, um diese Verbindung so zu identifizieren, dass der Server Nachrichten an einen bestimmten Benutzer senden kann.
Socket.Broadcast.emit ('new_user', {});Diese Codezeile bedeutet, dass der Socket eine Nachricht mit dem Namen new_user an alle Clients sendet, die derzeit Verbindungen zum Server haben (mit Ausnahme von sich selbst).
Verarbeitungsprozess von Backend -Push -Nachrichten
Verarbeitung von Benutzerinformationen
Ausgehend von einem Array wird nur ein Array zum Speichern von Benutzerinformationen verwendet, die bei Bedarf in der tatsächlichen Arbeit in die Datenbank eingefügt werden können.
global.users = []; // Notieren Sie die Tokenid, Socketid des protokollierten Benutzers
Wenn sich der Benutzer anmeldet, sendet der Client ein user_login -Ereignis an den Server. Nachdem der Server ihn empfangen hat, wird dies Folgendes erfolgen:
socket.on ('user_login', function (info) {const {tokenid, userId, socketId} = info; addSocketid (Benutzer, {Tokenid, SocketID, userId});});AddSocketid () fügt dem Benutzer -Array Benutzerinformationen hinzu. Verschiedene Benutzer können sie durch Tokenid unterscheiden. Jeder Benutzer verfügt über ein SocketIDS -Array, das mehrere existierende Socketis spart. Der spezifische Code dieser Funktion finden Sie in der Datei src/utils.js.
In ähnlicher Weise gibt es auch eine Deletesocketid () -Funktion zum Löschen von Benutzerinformationen, und der Code kann in derselben Datei angezeigt werden.
Nachdem Sie die Tokenid des Benutzers erhalten haben, müssen Sie die entsprechende SocketId finden und dann eine Nachricht an den jeweiligen Benutzer weitergeben.
// Nachrichten nur an diese Verbindung mit ID = SocketID io.sockets.to (SocketId) .Emit ('recis_message', {entityType, data}) senden;Die Idee des Servers ist ungefähr so. Lassen Sie uns als nächstes vorstellen, wie es im Kunden entsprechend verarbeitet werden.
Kunde
Initialisierung von Socket.io
Stellen Sie zunächst die clientseitige Datei von Socket.io in die HTML -Datei ein, beispielsweise über CDN:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
Andere Möglichkeiten zur Einführung:
<script src = "/socket.io/socket.io.js"></script> const io = required ('socket.io-client'); // oder mit syntaximport io von 'socket.io-client';Nach der Einführung von Socket.io wird die IO -Funktion erhalten und wird verwendet, um eine Verbindung mit dem Message Push -Server herzustellen.
// Angenommen, die Adresse nach dem Bereitstellen des Knotenservers lautet: https://www.example.com/ws//. Dann: WS_HOST = 'https: //www.example.com'Const Msgsocket = io (`$ {WS_HOST}`, {Secure: wahr: path: path: /ws/wsWenn Sie lokal zuhören:
const msgsocket = io ('http: // localhost: 4001');Wenn Sie es als IO ('https://www.example.com/ws') schreiben, tritt ein Fehler auf, und/ws muss in den Pfad geschrieben werden.
Um diese Variable in anderen Dateien verwenden zu können, kann MSGSocket als globale Variable verwendet werden:
fenster.msgsocket = msgsocket;
Benutzer stellen eine Verbindung her
// Wenn sich der Benutzer anmeldet, senden Sie Benutzerinformationen an den Server. Der Server erstellt nach Empfang der Nachricht eine Socket -Mapping mit dem Benutzer. msgsocket.emit ('user_login', {userId, socketId: msgsocket.id, tokenid});Verarbeitung nach Empfang der Pushed -Nachricht
// Nachdem die WebSocket -Verbindung hergestellt wurde, hören Sie sich das Ereignis namens recemat_message msgsocket.on ('recess_message', msg => {store.dispatch ({type: 'new_socket_msg', Nutzlast: msg}) an;Wenn der WebSocket -Server eine Nachricht an den Client weitergibt, muss der Client das Ereignis recemat_message anhören, und die empfangenen Parameter enthalten entsprechende ausstehende Informationen.
Da Redux für die Datenverarbeitung verwendet wird, wird hier eine Aktion von New_Socket_msg versandt, und der nachfolgende Routine -Redux -Verarbeitungsfluss wird bereitgestellt.
Nutzung des Projekts
Projektadresse auf GitHub: https://github.com/noiron/socket-message-push
npm run dev
Sie können es in der Entwicklungsumgebung testen, und jetzt haben Sie einen Message -Push -Server auf Port 4001.
Es gibt jedoch keinen Backend -Server hier, um Nachrichten an uns zu senden. Daher werden wir den Postanbieter verwenden, um Sendungsnachrichten zu simulieren.
Um die Funktionen des Programms zu demonstrieren, befindet sich eine Index.html -Datei im Client -Ordner des Projekts. Beachten Sie, dass diese Datei in tatsächlichen Projekten nicht verwendet werden kann, sondern nur zur Anzeige des Effekts des Nachrichtenschubs.
Öffnen Sie nach dem Einschalten des Servers Client/index.html und geben Sie eine Tokenid ein, wie Sie es gemäß den Eingabeaufforderungen mögen.
Verwenden Sie nun den Postboten, um die folgende Nachricht an Localhost: 4001/API zu veröffentlichen:
{// Das Token -Array gibt an, welcher Benutzer die Nachricht "Tokens" drücken möchten: ["1", "2"], "Daten": "Sie sollen nicht bestehen !!!"}Wenn alles gut läuft, sollten Sie in der Lage sein, die empfangene Nachricht in der Konsole des Kunden zu sehen.
Sie können mehrere Client -Seiten öffnen, verschiedene Tokeniden eingeben und dann überprüfen, ob die Nachricht an den richtigen Benutzer gesendet wird.
Zusammenfassen
Das obige ist das, was der Editor Ihnen vorgestellt hat, um Socket.io zu verwenden, um die Echtzeit-Nachrichten-Push-Funktion zu realisieren. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!