Heim Web-Frontend js-Tutorial Beispiel für die Verwendung von Socket.IO in node.js_node.js

Beispiel für die Verwendung von Socket.IO in node.js_node.js

May 16, 2016 pm 04:32 PM
node.js socket.io

1. Einleitung

Zuerst ist die offizielle Website von Socket.IO: http://socket.io

Die offizielle Website ist sehr einfach, es gibt kein API-Dokument, sondern nur eine einfache „Verwendung“ als Referenz. Denn Socket.IO ist genauso einfach, benutzerfreundlich und benutzerfreundlich wie die offizielle Website.

Was genau ist Socket.IO? Socket.IO ist eine WebSocket-Bibliothek, die clientseitige JS und serverseitige NodeJS enthält. Ihr Ziel ist es, Echtzeitanwendungen zu erstellen, die auf verschiedenen Browsern und mobilen Geräten verwendet werden können. Es wählt automatisch die beste Methode entsprechend dem Browser aus verschiedenen Methoden wie WebSocket, AJAX Long Polling, Iframe-Streaming usw. aus, um Echtzeit-Netzwerkanwendungen zu implementieren. Es ist sehr praktisch und benutzerfreundlich, und die unterstützten Browser sind wie folgt niedrig wie IE5.5. Es sollte in der Lage sein, die meisten Anforderungen zu erfüllen.

2. Installation und Bereitstellung

2.1 Installation

Zunächst ist die Installation sehr einfach. In der node.js-Umgebung genügt ein Satz:

Code kopieren Der Code lautet wie folgt:

npm install socket.io

2.2 Kombinieren Sie Express, um einen Server zu erstellen

Express ist ein kleines Node.js-Webanwendungsframework, das häufig beim Erstellen von HTTP-Servern verwendet wird. Daher werde ich es direkt anhand von Socket.IO und Express als Beispiel erläutern.

Code kopieren Der Code lautet wie folgt:

var express = require('express')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
server.listen(3001);

Wenn Sie Express nicht verwenden, lesen Sie bitte socket.io/#how-to-use

3. Grundlegende Verwendung

Es ist hauptsächlich in zwei Codeteile unterteilt, serverseitig und clientseitig, die beide sehr einfach sind.

Server (app.js):

Code kopieren Der Code lautet wie folgt:

//Fahren Sie mit dem obigen Code fort
app.get('/', Funktion (req, res) {
res.sendfile(__dirname '/index.html');});

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('anderes Ereignis', Funktion (Daten) {
console.log(data);
});
});

Zunächst akzeptiert die Funktion io.sockets.on die Zeichenfolge „connection“ als Ereignis für den Client, um eine Verbindung herzustellen. Wenn die Verbindung erfolgreich ist, wird die Callback-Funktion mit dem Socket-Parameter aufgerufen. Wenn wir socket.IO verwenden, verarbeiten wir grundsätzlich Benutzeranfragen in dieser Rückruffunktion.

Die wichtigsten Funktionen von socket sind die Emit- und On-Funktionen. Erstere sendet ein Ereignis (der Ereignisname wird durch eine Zeichenfolge dargestellt). Es gibt auch einige Standardereignisnamen. gefolgt von einem Objekt, das den an den Socket gesendeten Inhalt darstellt; dieser empfängt ein Ereignis (der Ereignisname wird durch eine Zeichenfolge dargestellt), gefolgt von einer Rückruffunktion, die beim Empfang des Ereignisses aufgerufen wird, wobei Daten die empfangenen Daten sind.

Im obigen Beispiel haben wir das Nachrichtenereignis gesendet und das andere Ereignisereignis empfangen, dann sollte der Client über entsprechende Empfangs- und Sendeereignisse verfügen. Ja, Client-Code ist genau das Gegenteil von Server-Code und sehr ähnlich.

Client (client.js)

Code kopieren Der Code lautet wie folgt:


<script><br> var socket = io.connect('http://localhost');<br> socket.on('news', Funktion (Daten) {<br> console.log(data);<br> ​​​​ socket.emit('other event', { my: 'data' });<br> });<br> </script>

Es sind zwei Punkte zu beachten: Der Pfad socket.io.js muss korrekt geschrieben werden. Diese js-Datei wird tatsächlich im Ordner node_modules auf der Serverseite abgelegt, also wird sie umgeleitet Seien Sie nicht überrascht, dass es auf der Serverseite nicht existiert. Warum funktioniert diese Datei immer noch normal? Natürlich können Sie die serverseitige Datei socket.io.js lokal kopieren und daraus eine clientseitige js-Datei machen. Auf diese Weise müssen Sie die js-Datei nicht jedes Mal vom Node-Server anfordern, was die Stabilität erhöht . Der zweite Punkt besteht darin, var socket = io.connect('website address or ip'); zu verwenden, um das Socket-Objekt abzurufen, und dann können Sie den Socket zum Senden und Empfangen von Ereignissen verwenden. In Bezug auf die Ereignisverarbeitung gibt der obige Code an, dass er nach dem Empfang des Ereignisses „Nachrichten“ die empfangenen Daten ausdruckt und das Ereignis „Anderes Ereignis“ an den Server sendet.

Hinweis: Die integrierten Standardereignisnamen wie „Trennen“ bedeuten, dass die Clientverbindung getrennt wird, „Nachricht“ bedeutet, dass eine Nachricht empfangen wird usw. Der benutzerdefinierte Ereignisname sollte nicht denselben Namen haben wie der in Socket.IO integrierte Standardereignisname, um unnötige Probleme zu vermeiden.

4. Andere häufig verwendete APIs

1). Broadcast an alle Clients: socket.broadcast.emit('broadcast message');

2). Betreten Sie einen Raum (sehr einfach zu verwenden! Es entspricht einem Namensraum und kann an einen bestimmten Raum gesendet werden, ohne dass dies Auswirkungen auf Clients in anderen Räumen oder außerhalb des Raums hat): socket.join('your room name' );

3). Senden Sie eine Nachricht an einen Raum (der Absender kann die Nachricht nicht empfangen): socket.broadcast.to('your room name').emit('broadcast room message');

4). Senden Sie eine Nachricht an einen Raum (einschließlich des Senders, der die Nachricht empfangen kann) (diese API gehört zu io.sockets): io.sockets.in('another room name').emit('broadcast room message ' );

5). Erzwingen Sie die Verwendung der WebSocket-Kommunikation: (Client) socket.send('hi'), (Server) verwenden Sie socket.on('message', function(data){}) zum Empfangen.

5. Erstellen Sie einen Chatroom mit Socket.IO

Abschließend beenden wir diesen Artikel mit einem einfachen Beispiel. Für den Aufbau eines Chatrooms mit Socket.IO sind nur etwa 50 Codezeilen erforderlich, und der Echtzeit-Chat-Effekt ist ebenfalls sehr gut. Der Schlüsselcode ist unten angegeben:

Server (socketChat.js)

Code kopieren Der Code lautet wie folgt:

//Ein Wörterbuch der Clientverbindungen, wenn ein Client eine Verbindung zum Server herstellt,
//Eine eindeutige SocketId wird generiert. Das Wörterbuch speichert die Zuordnung von SocketId zu Benutzerinformationen (Spitzname usw.)
var ConnectionList = {};

exports.startChat = function (io) {
​ io.sockets.on('connection', function (socket) {
//Wenn der Client eine Verbindung herstellt, speichern Sie die Socket-ID und den Benutzernamen
        var socketId = socket.id;
ConnectionList[socketId] = {
Sockel: Sockel
        };

//Benutzer betritt das Chatroom-Event und sendet seinen Benutzernamen an andere Online-Benutzer
​​​​ socket.on('join', function (data) {
                socket.broadcast.emit('broadcast_join', data);
ConnectionList[socketId].username = data.username;
});

//Der Benutzer verlässt das Chatroom-Ereignis und sendet sein/ihr Verlassen an andere Online-Benutzer
​​​​ socket.on('disconnect', function () {
If (connectionList[socketId].username) {
                     socket.broadcast.emit('broadcast_quit', {
                            Benutzername: ConnectionList[socketId].username
                });
            }
                delete ConnectionList[socketId];
});

//Benutzer-Rede-Event, den Inhalt seiner Rede an andere Online-Benutzer übertragen
socket.on('say', Funktion (Daten) {
               socket.broadcast.emit('broadcast_say',{
                     Benutzername: ConnectionList[socketId].Benutzername,
                   text: data.text
            });
});
})
};

Client(socketChatClient.js)

Code kopieren Der Code lautet wie folgt:

var socket = io.connect('http://localhost');
// Nachdem Sie eine Verbindung zum Server hergestellt haben, senden Sie sofort ein „Join“-Ereignis und teilen Sie anderen Ihren Benutzernamen mit
socket.emit('join', {
Benutzername: 'Benutzername hehe'
});

//Nachdem Sie die Nachricht über den Beitritt zum Chatroom erhalten haben, zeigen Sie die Nachricht an
socket.on('broadcast_join', Funktion (Daten) {
console.log(data.username 'Dem Chatroom beigetreten');
});

//Nachdem Sie die Übertragung zum Verlassen des Chatrooms erhalten haben, zeigen Sie die Nachricht an
socket.on('broadcast_quit', function(data) {
console.log(data.username 'Chatroom verlassen');
});

//Nachdem Sie eine Nachricht von jemand anderem erhalten haben, zeigen Sie die Nachricht an
socket.on('broadcast_say', function(data) {
console.log(data.username 'say: ' data.text);
});

//Hier gehen wir davon aus, dass es ein Textfeld und einen Senden-Button gibt.btn-send
//Verwenden Sie jQuery, um Ereignisse zu binden
$('.btn-send').click(function(e) {
//Den Text des Textfelds abrufen
var text = $('textarea').val();
//Senden Sie ein Say-Ereignis und der Server sendet es nach dem Empfang
socket.emit('say', {
         Benutzername: 'Benutzername hehe'
         text: text
});
});

Dies ist eine einfache Chatroom-DEMO, die Sie je nach Bedarf erweitern können. Socket.IO ist im Grunde die Übermittlungs- und Empfangsverarbeitung verschiedener Ereignisse. Die Idee ist sehr einfach.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Detaillierte grafische Erläuterung des Speichers und des GC der Node V8-Engine Detaillierte grafische Erläuterung des Speichers und des GC der Node V8-Engine Mar 29, 2023 pm 06:02 PM

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Speichers und Garbage Collectors (GC) der NodeJS V8-Engine. Ich hoffe, er wird Ihnen hilfreich sein!

Ein Artikel über Speichersteuerung in Node Ein Artikel über Speichersteuerung in Node Apr 26, 2023 pm 05:37 PM

Der nicht blockierende und ereignisgesteuerte Knotendienst hat den Vorteil eines geringen Speicherverbrauchs und eignet sich sehr gut für die Verarbeitung massiver Netzwerkanforderungen. Unter der Voraussetzung massiver Anfragen müssen Probleme im Zusammenhang mit der „Speicherkontrolle“ berücksichtigt werden. 1. Der Garbage-Collection-Mechanismus und die Speicherbeschränkungen von V8 Js wird von der Garbage-Collection-Maschine gesteuert

Lassen Sie uns darüber sprechen, wie Sie das beste Node.js-Docker-Image auswählen. Lassen Sie uns darüber sprechen, wie Sie das beste Node.js-Docker-Image auswählen. Dec 13, 2022 pm 08:00 PM

Die Auswahl eines Docker-Images für Node mag trivial erscheinen, aber die Größe und potenziellen Schwachstellen des Images können erhebliche Auswirkungen auf Ihren CI/CD-Prozess und Ihre Sicherheit haben. Wie wählen wir also das beste Node.js-Docker-Image aus?

Lassen Sie uns ausführlich über das File-Modul in Node sprechen Lassen Sie uns ausführlich über das File-Modul in Node sprechen Apr 24, 2023 pm 05:49 PM

Das Dateimodul ist eine Kapselung der zugrunde liegenden Dateioperationen, wie z. B. Lesen/Schreiben/Öffnen/Schließen/Löschen von Dateien, Hinzufügen usw. Das größte Merkmal des Dateimoduls besteht darin, dass alle Methoden zwei Versionen von **synchronem** und **bereitstellen. asynchron**, mit Methoden mit dem Suffix sync sind alle Synchronisationsmethoden, und diejenigen ohne sind alle heterogene Methoden.

Node.js 19 ist offiziell veröffentlicht, lassen Sie uns über seine 6 Hauptfunktionen sprechen! Node.js 19 ist offiziell veröffentlicht, lassen Sie uns über seine 6 Hauptfunktionen sprechen! Nov 16, 2022 pm 08:34 PM

Node 19 wurde offiziell veröffentlicht. Dieser Artikel wird Ihnen eine detaillierte Erklärung der 6 Hauptfunktionen von Node.js 19 geben. Ich hoffe, er wird Ihnen hilfreich sein!

Lassen Sie uns über den GC-Mechanismus (Garbage Collection) in Node.js sprechen Lassen Sie uns über den GC-Mechanismus (Garbage Collection) in Node.js sprechen Nov 29, 2022 pm 08:44 PM

Wie führt Node.js GC (Garbage Collection) durch? Der folgende Artikel führt Sie durch.

Lassen Sie uns über die Ereignisschleife in Node sprechen Lassen Sie uns über die Ereignisschleife in Node sprechen Apr 11, 2023 pm 07:08 PM

Die Ereignisschleife ist ein grundlegender Bestandteil von Node.js und ermöglicht die asynchrone Programmierung, indem sie sicherstellt, dass der Hauptthread nicht blockiert wird. Das Verständnis der Ereignisschleife ist für die Erstellung effizienter Anwendungen von entscheidender Bedeutung. Der folgende Artikel wird Ihnen ein detailliertes Verständnis der Ereignisschleife in Node vermitteln. Ich hoffe, er wird Ihnen hilfreich sein!

Was soll ich tun, wenn der Knoten den Befehl npm nicht verwenden kann? Was soll ich tun, wenn der Knoten den Befehl npm nicht verwenden kann? Feb 08, 2023 am 10:09 AM

Der Grund, warum der Knoten den Befehl npm nicht verwenden kann, liegt darin, dass die Umgebungsvariablen nicht richtig konfiguriert sind. Die Lösung ist: 1. Öffnen Sie „Systemeigenschaften“ 2. Suchen Sie nach „Umgebungsvariablen“ -> „Systemvariablen“ und bearbeiten Sie dann die Umgebung Variablen; 3. Suchen Sie den Speicherort des NodeJS-Ordners. 4. Klicken Sie auf „OK“.

See all articles