Heim Web-Frontend js-Tutorial nodejs kombiniert socket.io, um die WebSocket-Kommunikationsfunktion zu implementieren

nodejs kombiniert socket.io, um die WebSocket-Kommunikationsfunktion zu implementieren

Jan 15, 2018 am 09:17 AM
javascript socket.io websocket

In diesem Artikel wird hauptsächlich die Methode von nodejs in Kombination mit socket.io zur Realisierung der WebSocket-Kommunikationsfunktion vorgestellt. Er analysiert die spezifischen Schritte und zugehörigen Betriebsfähigkeiten von nodejs in Kombination mit socket.io in Form von Beispielen Ich muss darauf verweisen und hoffe, dass es jedem helfen kann.

Da es im Projekt Szenarien gibt, die eine Echtzeiterfassung von Hintergrunddaten erfordern, wurde zuvor die HTTP-Heartbeat-Anforderungsmethode verwendet. Da Websocket im Vergleich zu diesem Modus eine große Leistungssteigerung aufweist und die Echtzeitleistung verbessern kann, wurden einige Untersuchungen zu Websocket durchgeführt. Dies wird mit nodejs+socket.io implementiert.

Ziel erreichen

Ändern Sie die ursprüngliche Hintergrunddatenmethode für Heartbeat-Anfragen durch eine Socket-Verbindung mit dem Hintergrund in eine einheitliche Push-Methode. Die Hintergrunddaten werden von anderen Prozessen in Dateien oder Redis geschrieben. Hier wird die Möglichkeit zum Lesen von Dateien implementiert.

Vorbereitung

NodeJS installieren (weggelassen)

Serverseitig

Erstellen Sie ein neues Projektverzeichnis, hier ist sockettest
Geben Sie das Sockettest-Verzeichnis ein, installieren Sie das Express-Modul und das Socketio-Modul


npm install --save express@4.10.2
npm install --save socket.io
Nach dem Login kopieren

Neu erstellen package.json-Datei, schreiben Sie den folgenden Inhalt hinein:


{
 "name": "socket-test",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {
  "express": "^4.10.2",
  "socket.io": "^1.7.2"
 }
}
Nach dem Login kopieren

Erstellen Sie eine neue index.html, die als Standardzugriffsanzeigeseite verwendet wird, da dies der Fall ist Der Inhalt darf hier nicht verwendet werden.
Erstellen Sie eine neue Trends.js-Datei und schreiben Sie den Inhalt hinein:


var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');
#默认打开文件
app.get('/', function(req, res){
  res.sendfile('index.html');
});
#用于存储所有socket以广播数据
var iolist = [];
#定义socket on connection(连入)事件行为
io.on('connection', function(socket){
  #将连入socket加入列表
  iolist.push(socket); 
  #记录index,在disconnect(断开连接)发生时将对应的socket删除
  var sockex = iolist.indexOf(socket); 
  #定义on disconnect事件行为
  socket.on('disconnect', function(){
    #将断开连接的socket从广播列表里删除
    iolist.splice(sockex, 1);
  });
});
# 数据广播进程:每1秒钟广播一次
setInterval(function() {
  # 如果没有正在连接的socket,直接返回;
  if (iolist.length <= 0) return;
  var trends = fs.readFileSync(&#39;./data/trends.json&#39;,&#39;utf-8&#39;);#trends数据
  var coins = fs.readFileSync(&#39;./data/coins.json&#39;,&#39;utf-8&#39;);#coins数据
  #向所有socket连接发送数据
  for (i in iolist) {
    # 向客户端发送trends数据
    iolist[i].emit(&#39;trends&#39;, trends);
    # 向客户端发送coins数据
    iolist[i].emit(&#39;coins&#39;, coins);
  }
}, 1000);
# 服务器侦听在sockettest.com的3000端口上
http.listen(3000, function(){
  # 输出到标准输出
  console.log(&#39;listening on sockettest.com:3000&#39;);
});
Nach dem Login kopieren

Erstellen Sie ein neues Datenverzeichnis , und erstellen Sie unten zwei neue Dateien, Trends und Münzen. Dient zum Speichern von Daten, die vom Socket-Server gelesen werden sollen.
Erstellen Sie ein neues öffentliches Verzeichnis und erstellen Sie darin eine Datei index.html. Der Inhalt der Datei lautet wie folgt:


<!--引入必要的js文件-->
<script type="text/javascript" src="http://sockettest:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
    //新建socket
    var socket = io(&#39;http://sockettest.com:3000&#39;);
    socketdata(socket);
    function socketdata() {
      #定义接收到coins类型数据时的行为
      socket.on(&#39;coins&#39;, function(msg){
        console.log(msg);
      }
      #定义接收到trends类型数据时的行为
      socket.on(&#39;trends&#39;, function(msg){
        console.log(msg);
      }
    }
</script>
Nach dem Login kopieren

Codebereitstellung

Der Grund, warum wir gerade zwei index.html-Dateien erstellt haben, besteht darin, den von nodejs bereitgestellten Socket-Dienst problemlos in vorhandenen Webprojekten verwenden zu können. Auf diese Weise können wir public/index.html auf anderen Servern wie Nginx oder Tomcat bereitstellen und dann den Socket-Server im Stammverzeichnis starten, um Socket-Dienste bereitzustellen.
Führen Sie zuerst


node ./trends.js
Nach dem Login kopieren

im Stammverzeichnis des Projekts aus und lassen Sie das Terminal laufen. Stellen Sie dann das Projekt in Nginx bereit und greifen Sie über den Chrome-Webdienst auf Nginx zu:

http://hostname/public/index.html

Öffnen Sie den Entwicklermodus, Sie können jede Sekunde in der Konsole sehen, dass Sie Socket-Push-Nachrichten vom Knoten erhalten Server. Durch Ändern der beiden Dateien im Datenverzeichnis können Sie sehen, dass die in die Dateien geschriebenen Daten auch in Echtzeit an den Client übertragen werden.

Verwandte Empfehlungen:

WebSocket-Kommunikation in Html5

Client-Kommunikationsfunktionscode, implementiert von ThinkPHP in Kombination mit Ajax und MySQL-Beispiel

Einführung in das Speicherereignis der Kommunikationsmethode zwischen js-Seiten

Das obige ist der detaillierte Inhalt vonnodejs kombiniert socket.io, um die WebSocket-Kommunikationsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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)

Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming Dec 17, 2023 pm 05:50 PM

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeit-Videostreaming zu einer wichtigen Anwendung im Internetbereich geworden. Zu den Schlüsseltechnologien für Echtzeit-Videostreaming gehören WebSocket und Java. In diesem Artikel wird die Verwendung von WebSocket und Java zur Implementierung der Echtzeit-Video-Streaming-Wiedergabe vorgestellt und relevante Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es wird im Web verwendet

So erreichen Sie Echtzeitkommunikation mit PHP und WebSocket So erreichen Sie Echtzeitkommunikation mit PHP und WebSocket Dec 17, 2023 pm 10:24 PM

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeitkommunikation zu einem unverzichtbaren Bestandteil des täglichen Lebens geworden. Mit der WebSockets-Technologie kann eine effiziente Echtzeitkommunikation mit geringer Latenz erreicht werden, und PHP als eine der am weitesten verbreiteten Entwicklungssprachen im Internetbereich bietet auch entsprechende WebSocket-Unterstützung. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und WebSocket eine Echtzeitkommunikation erreichen, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Single

PHP und WebSocket: Best Practices für die Echtzeit-Datenübertragung PHP und WebSocket: Best Practices für die Echtzeit-Datenübertragung Dec 18, 2023 pm 02:10 PM

PHP und WebSocket: Best-Practice-Methoden für die Echtzeit-Datenübertragung Einführung: Bei der Entwicklung von Webanwendungen ist die Echtzeit-Datenübertragung eine sehr wichtige technische Anforderung. Das herkömmliche HTTP-Protokoll ist ein Anforderungs-Antwort-Modellprotokoll und kann keine Datenübertragung in Echtzeit effektiv erreichen. Um den Anforderungen der Echtzeit-Datenübertragung gerecht zu werden, wurde das WebSocket-Protokoll entwickelt. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das eine Möglichkeit zur Vollduplex-Kommunikation über eine einzelne TCP-Verbindung bietet. Im Vergleich zu H

SSE und WebSocket SSE und WebSocket Apr 17, 2024 pm 02:18 PM

In diesem Artikel vergleichen wir Server Sent Events (SSE) und WebSockets, beides zuverlässige Methoden zur Übermittlung von Daten. Wir werden sie in acht Aspekten analysieren, darunter Kommunikationsrichtung, zugrunde liegendes Protokoll, Sicherheit, Benutzerfreundlichkeit, Leistung, Nachrichtenstruktur, Benutzerfreundlichkeit und Testtools. Ein Vergleich dieser Aspekte lässt sich wie folgt zusammenfassen: Kategorie Server Sent Event (SSE) WebSocket-Kommunikationsrichtung Einseitig bidirektional Zugrundeliegendes Protokoll HTTP WebSocket-Protokoll Sicherheit Gleich wie HTTP Vorhandene Sicherheitslücken Benutzerfreundlichkeit Einstellungen Einfache Einstellungen Komplexe Leistung Schnelle Nachrichtenversandgeschwindigkeit Betroffen von der Nachrichtenverarbeitung und dem Verbindungsmanagement. Nachrichtenstruktur Nur Text oder Binär. Benutzerfreundlichkeit. Weit verbreitet. Hilfreich für die WebSocket-Integration

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

golang WebSocket-Programmiertipps: Umgang mit gleichzeitigen Verbindungen golang WebSocket-Programmiertipps: Umgang mit gleichzeitigen Verbindungen Dec 18, 2023 am 10:54 AM

Golang ist eine leistungsstarke Programmiersprache und ihre Verwendung in der WebSocket-Programmierung wird von Entwicklern zunehmend geschätzt. WebSocket ist ein TCP-basiertes Protokoll, das eine bidirektionale Kommunikation zwischen Client und Server ermöglicht. In diesem Artikel stellen wir vor, wie Sie mit Golang einen effizienten WebSocket-Server schreiben, der mehrere gleichzeitige Verbindungen gleichzeitig verarbeitet. Bevor wir die Techniken vorstellen, lernen wir zunächst, was WebSocket ist. Einführung in WebSocketWeb

Wie implementiert Java Websocket die Online-Whiteboard-Funktion? Wie implementiert Java Websocket die Online-Whiteboard-Funktion? Dec 17, 2023 pm 10:58 PM

Wie implementiert JavaWebsocket die Online-Whiteboard-Funktion? Im modernen Internetzeitalter legen die Menschen immer mehr Wert auf das Erlebnis der Zusammenarbeit und Interaktion in Echtzeit. Online-Whiteboard ist eine auf Websocket implementierte Funktion, die es mehreren Benutzern ermöglicht, in Echtzeit zusammenzuarbeiten, um dasselbe Zeichenbrett zu bearbeiten und Vorgänge wie Zeichnen und Anmerkungen durchzuführen. Es bietet eine praktische Lösung für Online-Schulungen, Remote-Meetings und Teamzusammenarbeit andere Szenarien. 1. Technischer Hintergrund WebSocket ist ein neues Protokoll, das von HTML5 implementiert wird

So verwenden Sie WebSocket für die Dateiübertragung in Golang So verwenden Sie WebSocket für die Dateiübertragung in Golang Dec 18, 2023 am 09:06 AM

So verwenden Sie WebSocket für die Dateiübertragung in Golang. WebSocket ist ein Netzwerkprotokoll, das die bidirektionale Kommunikation unterstützt und eine dauerhafte Verbindung zwischen dem Browser und dem Server herstellen kann. In Golang können wir die Drittanbieterbibliothek Gorilla/Websocket verwenden, um die WebSocket-Funktionalität zu implementieren. In diesem Artikel wird erläutert, wie Sie Golang- und Gorilla/Websocket-Bibliotheken für die Dateiübertragung verwenden. Zuerst müssen wir Gorilla installieren

See all articles