Maison > interface Web > js tutoriel > le corps du texte

nodejs combine socket.io pour implémenter la fonction de communication websocket

小云云
Libérer: 2018-01-15 09:17:41
original
1704 Les gens l'ont consulté

Cet article présente principalement la méthode de nodejs combinée avec socket.io pour réaliser la fonction de communication websocket.Il analyse les étapes spécifiques et les compétences opérationnelles associées de nodejs combinées avec socket.io pour réaliser la communication websocket sous forme d'exemples. j'en ai besoin, je peux y faire référence. J'espère que cela pourra aider tout le monde.

Comme certains scénarios dans le projet nécessitent l'acquisition en temps réel de données d'arrière-plan, la méthode de requête http heartbeat a déjà été utilisée. Étant donné que Websocket présente une grande amélioration des performances par rapport à ce mode et peut améliorer les performances en temps réel, certaines recherches ont été effectuées sur Websocket. Ceci est implémenté à l'aide de nodejs+socket.io.

Atteindre l'objectif

Modifier la méthode de données d'arrière-plan de la demande de battement de cœur d'origine en une méthode push unifiée via une connexion de socket à l'arrière-plan. Les données d'arrière-plan sont écrites dans des fichiers ou redis par d'autres processus. Ce qui est implémenté ici est la manière de lire les fichiers.

Préparation

Installation de nodejs (omis)

Côté serveur

Créez un nouveau répertoire de projet, voici sockettest
Entrez dans le répertoire sockettest, installez le module express et le module socketio


npm install --save express@4.10.2
npm install --save socket.io
Copier après la connexion

Créez un nouveau package.json, écrivez-y le contenu suivant :


{
 "name": "socket-test",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {
  "express": "^4.10.2",
  "socket.io": "^1.7.2"
 }
}
Copier après la connexion

Créez un nouvel index.html, qui est utilisé comme page d'affichage d'accès par défaut, car il ne pas être utilisé ici. Le contenu N'hésitez pas :
Créez un nouveau fichier Trends.js et écrivez-y le contenu :


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

Créez un nouveau répertoire de données. , et créez deux nouveaux fichiers tendances et pièces ci-dessous Utilisés pour stocker les données à lire par le serveur socket.
Créez un nouveau répertoire public et créez-y un nouveau fichier index.html. Le contenu du fichier est le suivant :


<!--引入必要的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>
Copier après la connexion

<. 🎜>Déploiement de code

La raison pour laquelle nous venons de créer deux fichiers index.html est d'utiliser facilement le service socket fourni par nodejs dans les projets Web existants. De cette façon, nous pouvons déployer public/index.html sur d'autres serveurs, tels que nginx ou tomcat, puis démarrer le serveur socket dans le répertoire racine pour fournir des services socket.

Exécutez d'abord


node ./trends.js
Copier après la connexion
dans le répertoire racine du projet et laissez le terminal fonctionner, puis déployez le projet dans nginx et accédez à nginx via le service Web Chrome :

http://hostname/public/index.html

Mode développeur ouvert, vous pouvez voir dans la console toutes les secondes Vous recevrez des messages push socket du nœud serveur. En modifiant les deux fichiers dans le répertoire de données, vous pouvez voir que les données écrites dans les fichiers seront également transmises au client en temps réel.

Recommandations associées :


Communication WebSocket en Html5

Code de fonction de communication client implémenté par ThinkPHP combiné avec ajax et Mysql Exemple

Présentation de l'événement de stockage de la méthode de communication entre pages js

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!