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:
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.
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):
//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)
<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)
//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)
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.
