Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Implementierung der Chat-Funktion durch node.js + socket.io

Detaillierte Erläuterung der Implementierung der Chat-Funktion durch node.js + socket.io

零下一度
Freigeben: 2017-07-02 10:17:12
Original
2208 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich node.js + socket.io zur Implementierung eines Punkt-zu-Punkt-Zufalls-Matching-Chats vorgestellt. Es hat einen gewissen Referenzwert.

Mit freundlichen Grüßen Ich bewundere diejenigen, die häufig Notizen posten können. Ich bin jedoch nicht geschickt genug und muss vor einiger Zeit mehr von den Meistern lernen Mit der Bombenplattform habe ich im Grunde genommen die Demo geändert. Diesmal wollte ich einen zufälligen privaten Chat implementieren, also habe ich den Dienst natürlich auf Basis von node und socket.io erstellt Ich habe Node zum ersten Mal verwendet, um etwas zu erstellen. Obwohl ich es nicht gut gemacht habe, möchte ich es trotzdem teilen.

Lassen Sie uns zunächst über die verwendeten Dinge sprechen. Node wird für Hintergrunddienste verwendet, Express wird zum Hosten von statischen Ressourcen verwendet und socket.io wird zum Übertragen von Chat-Daten verwendet. Lassen Sie uns als Nächstes über die Idee sprechen. Tatsächlich ist es sehr einfach, socket.io zum Übertragen von Daten zu verwenden. Wir müssen nur socket.io.js auf der Startseite einführen und dann require( 'socket.io'), führen Sie es im Backend aus, dann kann das Frontend Informationen über den folgenden Code senden oder empfangen.


//前端
socket = io.connect('ws://'+'服务器ip');
socket.emit('msg',{msg:'前端要发送的信息'});//要发送的信息(以对象的形式发送)
socket.on('msg2',function(data){
  ...
  //这里的data是后端传过来的信息
})
//后端
socket.on('msg',function(data){
  var data = data; //这里的data就是前端传过来的数据,即{msg:'前端要发送的信息'}
  console.log(data.msg) // 打印出 “前端要发送的信息”
})
//同理,后端要传信息给前端也是一样
socket.emit('msg2',{msg:'后端要发送的信息'});
Nach dem Login kopieren

Mal sehen, wie das Backend den Socket ausführt


 var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){ //当前端执行 socket = io.connect('ws://'+host); 的时候,此处的io会监听到connection事件
 socket.on('msg',function(data){ 
 io.emit('onlineCount',freeList)
 //如果直接用io.emit来发送数据的话,这代表广播的形式,就是当前所有打开服务的前端页面都会收到这条消息。
 
   socket.emit('welcome',{msg:'欢迎...'})//这里将给当前连接的页面发送一个欢迎的对象数据
 })
 socket.on('disconnect',function(){
 //当前端页面关闭,或者失去连接时,后端会接收到disconnect事件
   
 })

})
http.listen(4000, function(){
 console.log('listening on *:4000');
});
Nach dem Login kopieren

Natürlich ist es nicht nur das , Da das WebSocket-Protokoll eine lange Verbindung zwischen dem Browser und dem Server herstellt, um Daten untereinander zu übertragen. Wenn für den Server mehrere Seiten geöffnet werden, gibt es mehrere Socket-Instanzen, und jede Front-End-Seite stellt eine Verbindung her Es gibt eine Socket-Instanz, die Ideen für den anschließenden Punkt-zu-Punkt-Privatchat liefert. Natürlich können wir Informationen auch per Direktübertragung versenden, dies eignet sich jedoch für Chatroom-Szenarien.

Wie implementiert man Punkt-zu-Punkt? Wie bereits erwähnt, generiert jede Seite, die eine Verbindung herstellt, eine Socket-Instanz, sodass wir nur das Backend zur Beurteilung benötigen, während die Nachricht empfangen wird Unabhängig davon, mit welcher Instanz die Socket-Instanz chattet, senden Sie die Nachricht einfach an eine andere passende Socket-Instanz. Vereinfacht ausgedrückt ist es, als würde ich einen Brief an das Backend senden und ihm dann mitteilen, dass die Nachricht für xxx bestimmt ist. Dann findet das Backend die Socket-Instanz, die xxx entspricht, und sendet die Nachricht an ihn.


//前端
window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
//每次登录,获取一个唯一的用户id
socket = io.connect('ws://'+host);
socket.emit('newUser',{ user_name : name, user_id : id})
//建立连接后,将我的用户名和id都传给后端

//后端
socket.on('newUser',function(data){
 var nickname = data.user_name,
  user_id = data.user_id;
 userServer[user_id] = socket;
 //后端接收后,将该用户socket保存在一个对象里,key值为id,value就是这个用户的socket
  
})
Nach dem Login kopieren

Durch den obigen Code erhält das Backend ein userServer-Objekt, das den entsprechenden Wert jedes Verbindungs-Sockets und seine ID enthält, also Point- Eine Punkt-zu-Punkt-Datenübertragung kann erreicht werden, indem bei jedem Senden einer Nachricht die ID des zu empfangenden Objekts angehängt wird.

Der nächste Schritt ist die Datenverarbeitung, wie man die ID der anderen Partei erhält usw. Aufgrund meiner eingeschränkten Ausdrucksfähigkeit und Faulheit werde ich nicht auf Details eingehen~~ Der Code wird auf gehostet github. Kommen Sie vorbei und schauen Sie sich das an

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierung der Chat-Funktion durch node.js + socket.io. 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