Maison > interface Web > js tutoriel > Explication détaillée de node.js + socket.io implémentant la fonction de chat

Explication détaillée de node.js + socket.io implémentant la fonction de chat

零下一度
Libérer: 2017-07-02 10:17:12
original
2209 Les gens l'ont consulté

Cet article présente principalement node.js + socket.io pour implémenter un chat de correspondance aléatoire point à point. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cordialement. J'admire ceux qui peuvent poster des notes fréquemment. En fait, je veux aussi les envoyer souvent. Cependant, je ne suis pas assez compétent et je suis paresseux. J'ai besoin d'apprendre davantage des maîtres. Il y a quelque temps, j'ai utilisé le socket qui vient. avec la plateforme bomb pour écrire un salon de discussion. En fait, c'est en gros que j'ai changé sa démo. Cette fois, je voulais implémenter un chat privé aléatoire, j'ai donc construit le service basé sur node et socket.io. C'est la première fois que j'utilise Node pour créer quelque chose. Même si je ne l'ai pas bien fait, je veux toujours le partager, ha.

Parlons d'abord des éléments utilisés. Le nœud est utilisé pour les services d'arrière-plan, express est utilisé pour héberger les ressources statiques et socket.io est utilisé pour transmettre les données de discussion. Parlons ensuite de l'idée. En fait, il est très simple d'utiliser socket.io pour transmettre des données. Il suffit d'introduire socket.io.js sur la page front-end puis de require( 'socket.io'), exécutez-le sur le backend, le frontend peut alors envoyer ou recevoir des informations via le code suivant.


//前端
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:'后端要发送的信息'});
Copier après la connexion

Voyons comment le backend exécute le socket


 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');
});
Copier après la connexion

Bien sûr, ce n'est pas que ça , Parce que le protocole websocket établit un long lien entre le navigateur et le serveur pour se transmettre des données. Pour le serveur, si plusieurs pages sont ouvertes, il y aura plusieurs instances de socket, et chaque page frontale qui établit une connexion le fera. Il existe une instance de socket qui fournit des idées pour la discussion privée point à point ultérieure. Bien entendu, nous pouvons également envoyer des informations par diffusion directe, mais cela convient aux scénarios de salons de discussion.

Comment implémenter le point à point ? Comme mentionné précédemment, chaque page qui établit une connexion générera une instance de socket, nous n'avons donc besoin que du backend pour juger lors de la réception du message Quelle que soit l'instance avec laquelle l'instance de socket discute, envoyez simplement le message à une autre instance de socket correspondante. Pour faire simple, c'est comme écrire une lettre. J'envoie le message au backend, puis je dis au backend que le message est pour xxx. Ensuite, le backend trouve l'instance de socket correspondant à xxx et lui envoie le message.


//前端
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
  
})
Copier après la connexion

Grâce au code ci-dessus, le backend obtient un objet userServer, qui contient la valeur correspondante de chaque socket de connexion et son identifiant, donc, Point- la transmission de données vers un point peut être réalisée en attachant l'ID de l'objet à recevoir chaque fois qu'un message est envoyé.

La prochaine étape est le traitement des données, comment obtenir l'identité de l'autre partie, etc. Compte tenu de ma capacité d'expression limitée et de ma paresse, je n'entrerai pas dans les détails ~~ J'héberge le code sur github. Bienvenue vous-même. Venez jeter un œil

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal