Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie die WebSocket-Kommunikationsfunktion in NodeJS

亚连
Freigeben: 2018-06-12 11:54:19
Original
1496 Leute haben es durchsucht

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 Bedarf kann darauf verweisen

Das Beispiel in diesem Artikel beschreibt die Methode von nodejs in Kombination mit socket.io, um die Websocket-Kommunikationsfunktion zu implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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

Erstellen Sie eine neue package.json-Datei und schreiben Sie den folgenden Inhalt Darin:

{
 "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 sie hier nicht verwendet wird und der Inhalt willkürlich ist.
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 „coins“, um die vom Socket-Server zu lesenden Daten zu speichern.
Erstellen Sie ein neues öffentliches Verzeichnis und erstellen Sie darin eine neue 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 gerade zwei index.html-Dateien erstellt werden, um die Verwendung des von nodejs bereitgestellten Socket-Dienstes in bestehenden Webprojekten zu erleichtern. 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 Chrome auf die von Nginx bereitgestellten Webdienste zu:

http://hostname/public/index.html

Aktivieren Sie den Entwicklermodus und Sie können in der Konsole sehen, dass Sie jede Sekunde Socket-Push-Nachrichten vom Knotenserver erhalten. . 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie CLI in Vue, um mehrseitige Gerüste zu rekonstruieren

Klick-Dropdown-Menü realisieren Inhalt im JS-synchronen Eingabefeld

Verknüpfung von Eingabefeld und Dropdown-Feld realisieren

Verpackungsfehler von packet.js wird verwendet

Detaillierte Interpretation der Vue-Rekonstruktionstechnologie

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die WebSocket-Kommunikationsfunktion in NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage