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

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

小云云
小云云Original
2018-01-15 09:17:411665Durchsuche

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

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"
 }
}

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;);
});

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>

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

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!

Stellungnahme:
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