Guten Tag, Freunde!Web-Sockets und Socket.IO sind wahrscheinlich die beiden häufigsten Mittel zur Echtzeitkommunikation (im Folgenden als Live-Kommunikation bezeichnet). Aber wie unterscheiden sie sich?Wenn Sie eine Anwendung für die Live-Kommunikation erstellen, müssen Sie manchmal ein Tool für den Datenaustausch zwischen Client und Server auswählen. Web Sockets und Socket.IO sind die beliebtesten Mittel zur Live-Kommunikation im modernen Web. Welches soll ich wählen? Was ist der Unterschied zwischen diesen Technologien? Lass es uns herausfinden.Web-Sockets
Unter Web-Sockets verstehen wir das Web-Kommunikationsprotokoll, das einen Vollduplex-Kommunikationskanal über eine einfache TCP-Verbindung darstellt. Kurz gesagt, mit dieser Technologie können Sie die Kommunikation zwischen Client und Server mit minimalen Kosten herstellen und Anwendungen erstellen, die alle Vorteile der Live-Kommunikation nutzen.Stellen Sie sich zum Beispiel vor, Sie erstellen einen Chat: Sie müssen Daten so schnell wie möglich empfangen und senden, oder? Web-Sockets machen das ganz gut! Sie können eine TCP-Verbindung öffnen und so lange wie nötig geöffnet lassen.Web-Sockets wurden 2010 in Google Chrome 4 angezeigt. Der erste RFC ( 6455 ) wurde 2011 veröffentlicht.Web-Sockets werden in folgenden Fällen verwendet:- Chats
- Multiplayer Spiele
- Kollaborative Bearbeitung
- Soziale (Nachrichten-) Feeds
- Standortbezogene Anwendungen
usw.Socket.io
Socket.IO ist eine JavaScript-Bibliothek, die auf Web-Sockets und anderen Technologien basiert (oben geschrieben). Es verwendet Web-Sockets, sofern verfügbar, oder Technologien wie Flash Socket, AJAX Long Polling und AJAX Multipart Stream, wenn Web-Sockets nicht verfügbar sind. Eine einfache Analogie ist der Vergleich von Fetch API und Axios.Unterschied zwischen Web Sockets und Socket.IO
Die Hauptvorteile von Socket.IO sind folgende:- -, Socket.IO . , . . -, .
- - . Socket.IO .
- , Socket.IO () .
- Socket.IO .
- Socket.IO .
Es scheint, dass Socket.IO das beste Tool für die Live-Kommunikation ist. Es gibt jedoch mehrere Situationen, in denen es besser ist, Web-Sockets zu verwenden.Erstens werden Web-Sockets von allen modernen Browsern unterstützt. Daher benötigen Sie selten die Unterstützung anderer von Socket.IO bereitgestellter Technologien.Wenn wir über Netzwerkverkehr sprechen, senden Web-Sockets nur zwei Anforderungen:- GET, um eine HTML-Seite zu erhalten
- UPGRADE zum Verbinden mit Web-Sockets
Auf diese Weise können Sie eine Verbindung zum Server herstellen. Was ist mit Socket.IO?- GET, um eine HTML-Seite zu erhalten
- Socket.IO-Clientbibliothek ( 207 KB )
- Drei lange Ajax-Anfragen
- UPGRADE zum Verbinden mit Web-Sockets
In der Welt von JS sind 207 KB viel. Was für eine irrationale Nutzung des Netzwerkverkehrs!In npm gibt es ein Paket "websocket-vs-socket.io" , mit dem Sie den Netzwerkverkehr dieser Technologien vergleichen können:Web Socket-Netzwerkverkehr:
Socket.IO-Netzwerkverkehr:
Der Unterschied ist offensichtlich!Einen Code schreiben
Einfacher Web-Socket-Server
In unserem Programm auf Node.js erstellen wir einen Server, der auf Port 3001 ausgeführt wird. Jedes Mal, wenn der Client eine Verbindung herstellt, weisen wir ihm eine eindeutige ID zu. Wenn Sie eine Nachricht an den Kunden senden, werden wir ihn über den Erfolg informieren: [<Client-ID>]: <Nachricht>const WebSocket = require('ws')
const UUID = require('uuid')
const wss = new WebSocket.Server({ port: 3001 })
wss.on('connection', ws => {
ws.id = UUID()
ws.on('message', message => {
ws.send(`[${ws.id}]: ${message}`)
})
})
Fein! Aber was ist, wenn wir jedem verbundenen Client eine Nachricht senden möchten? Web-Sockets unterstützen standardmäßig kein Mailing. Dies kann wie folgt implementiert werden:const WebSocket = require("ws")
const UUID = require("uuid")
const wss = new WebSocket.Server({ port: 3001 })
function broadcast(clientId, message) {
wss.clients.forEach(client => {
if(client.readyState === WebSocket.OPEN) {
client.send(`[${clientId}]: ${message}`)
}
})
}
wss.on('conection', ws => {
ws.id = UUID()
ws.on('message', message => broadcast(ws.id, message))
})
Einfach und leicht! Wie Sie sehen können, führt WebSocket.Server Aufzeichnungen über jeden verbundenen Client, sodass wir iterieren und eine Nachricht an alle senden können. Sie können den Code auf einem Computer (MacOS) oder in einem Browser (Chrome) testen .Einfacher Server auf Socket.IO
Es war nicht schwer. Kann Socket.IO es noch einfacher machen? Wie schreiben wir denselben Server auf Socket.IO?const io = require('socket.io')
const server = io.listen(3002)
server.on('connection', socket => {
socket.on('message', message => {
socket.emit(`[${socket.id}]: ${message}`)
socket.broadcast.emit(`[${socket.id}]: ${message}`)
})
})
Der Code ist fast halb kürzer! Wie Sie sehen können, sendet die Broadcast-Methode keine Benachrichtigung an den Absender, daher müssen wir dies manuell tun.Es gibt ein Problem: Der Code kann nicht auf einem normalen Web-Socket-Client getestet werden. Dies liegt an der Tatsache, dass Socket.IO, wie bereits erwähnt, keine reinen Web-Sockets verwendet, sondern viele Technologien, um alle möglichen Clients zu unterstützen. Wie testen wir die Leistung?
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2.3.0/dist/socket.io.slim.js"></script>
<script>
ioClient = io.connect('http://localhost:3002')
ioClient.on('connect', socket => {
ioClient.send('hello world')
ioClient.on('message', msg => console.log(msg))
})
</script>
Sie müssen einen speziellen Client verwenden. Im obigen Beispiel laden wir es aus dem CDN. Mit diesem Client können wir schnelle (schmutzige) Tests im Browser durchführen.Wie Sie sehen können, unterscheiden sich unsere Beispiele nicht wesentlich. Wenn wir jedoch über Kompatibilität sprechen, sollte beachtet werden, dass Socket.IO mit einer eigenen Bibliothek arbeitet und nicht für Zwecke verwendet werden kann, die nicht mit der Webentwicklung zusammenhängen. Gleichzeitig können Web-Sockets verwendet werden, um eine Vielzahl von Aufgaben zu lösen, z. B. P2P-Kommunikation, Echtzeit-Datenaustausch zwischen Servern usw.Auf eine Notiz
Horizontale Skalierung. Angenommen, Ihr Chat hat an Popularität gewonnen und Sie müssen einen weiteren Server und einen Load Balancer hinzufügen, um Anforderungen zu verarbeiten. Wenn Sie die Verbindung zu "Server 1" öffnen und der Balancer Sie zu "Server 2" wechselt, wird der Fehler "Fehler beim WebSocket-Handshake: Unerwarteter Antwortcode: 400" angezeigt. Socket.IO löst dieses Problem durch die Verwendung von Cookies (oder durch das Weiterleiten von Verbindungen basierend auf Quelladressen), und Web-Sockets verfügen nicht über einen solchen Mechanismus.Performance. Wie bereits erwähnt, bietet Socket.IO mehrere abstrakte Schichten über der Transportschicht von Web-Sockets. Außerdem wird hier das Packen von Daten in das JSON-Format verwendet, sodass keine Möglichkeit besteht, Binärdaten an den Server zu senden (und umgekehrt). Wenn Sie eine solche Funktionalität benötigen, müssen Sie den Bibliothekscode „heraufbeschwören“, um das gewünschte Verhalten sicherzustellen. Bei Web-Sockets treten solche Probleme nicht auf.Also, was soll ich wählen?
Du entscheidest.Socket.IO erleichtert das Leben, Sie müssen sich keine Gedanken über Probleme im Zusammenhang mit dem Lastausgleich, dem Trennen oder dem Senden von Nachrichten machen. Benötigen Sie jedoch solche Funktionen? Die Socket.IO-Clientbibliothek wiegt mehr als die Pakete React, Redux und React-Redux zusammen. Sind Sie sicher, dass Sie sich nicht auf Web-Sockets beschränken können?Ein weiterer wichtiger Punkt ist, dass bei Verwendung von Socket.IO auf der Serverseite der größte Teil des Codes auf die von dieser Bibliothek bereitgestellten Abstraktionen geschrieben wird. Wenn Sie Node.js Microservices in Go, Elixir, Java oder einer anderen Programmiersprache neu schreiben müssen, müssen Sie fast die gesamte Logik neu schreiben. Zum Senden von Nachrichten an Socket.IO wird beispielsweise die Broadcast-Methode verwendet (die manuell in Web-Sockets implementiert wird). Wenn Sie also ein Refactoring durchführen, müssen Sie wissen, wie diese Methode funktioniert. In diesem Fall sollten Web-Sockets bevorzugt werden, da sie einfacher anzupassen sind.Vielen Dank für Ihre Aufmerksamkeit.