Maison interface Web js tutoriel nodejs combine socket.io pour implémenter la fonction de communication websocket

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

Jan 15, 2018 am 09:17 AM
javascript socket.io websocket

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

La combinaison de Java et WebSocket : comment réaliser un streaming vidéo en temps réel La combinaison de Java et WebSocket : comment réaliser un streaming vidéo en temps réel Dec 17, 2023 pm 05:50 PM

Avec le développement continu de la technologie Internet, le streaming vidéo en temps réel est devenu une application importante dans le domaine Internet. Pour réaliser un streaming vidéo en temps réel, les technologies clés incluent WebSocket et Java. Cet article explique comment utiliser WebSocket et Java pour implémenter la lecture en streaming vidéo en temps réel et fournit des exemples de code pertinents. 1. Qu'est-ce que WebSocket ? WebSocket est un protocole de communication full-duplex sur une seule connexion TCP. Il est utilisé sur le Web.

Comment réaliser une communication en temps réel en utilisant PHP et WebSocket Comment réaliser une communication en temps réel en utilisant PHP et WebSocket Dec 17, 2023 pm 10:24 PM

Avec le développement continu de la technologie Internet, la communication en temps réel est devenue un élément indispensable de la vie quotidienne. Une communication en temps réel efficace et à faible latence peut être obtenue grâce à la technologie WebSockets, et PHP, en tant que l'un des langages de développement les plus utilisés dans le domaine Internet, fournit également la prise en charge WebSocket correspondante. Cet article explique comment utiliser PHP et WebSocket pour établir une communication en temps réel et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ?

PHP et WebSocket : bonnes pratiques pour le transfert de données en temps réel PHP et WebSocket : bonnes pratiques pour le transfert de données en temps réel Dec 18, 2023 pm 02:10 PM

PHP et WebSocket : meilleures pratiques pour le transfert de données en temps réel Introduction : Dans le développement d'applications Web, le transfert de données en temps réel est une exigence technique très importante. Le protocole HTTP traditionnel est un protocole de modèle requête-réponse et ne peut pas assurer efficacement la transmission de données en temps réel. Afin de répondre aux besoins de transmission de données en temps réel, le protocole WebSocket a vu le jour. WebSocket est un protocole de communication full-duplex qui permet de communiquer en full-duplex via une seule connexion TCP. Comparé à H

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment Java Websocket implémente-t-il la fonction de tableau blanc en ligne ? Comment Java Websocket implémente-t-il la fonction de tableau blanc en ligne ? Dec 17, 2023 pm 10:58 PM

Comment JavaWebsocket implémente-t-il la fonction de tableau blanc en ligne ? À l’ère d’Internet moderne, les gens accordent de plus en plus d’attention à l’expérience de collaboration et d’interaction en temps réel. Le tableau blanc en ligne est une fonction implémentée sur la base de Websocket. Il permet à plusieurs utilisateurs de collaborer en temps réel pour modifier la même planche à dessin et effectuer des opérations telles que le dessin et l'annotation. Il constitue une solution pratique pour l'enseignement en ligne, les réunions à distance, la collaboration en équipe et. d'autres scénarios. 1. Contexte technique WebSocket est un nouveau protocole fourni par HTML5 qu'il implémente.

SSE et WebSocket SSE et WebSocket Apr 17, 2024 pm 02:18 PM

Dans cet article, nous comparerons les événements envoyés par le serveur (SSE) et les WebSockets, qui sont tous deux des méthodes fiables pour fournir des données. Nous les analyserons sous huit aspects, notamment la direction de la communication, le protocole sous-jacent, la sécurité, la facilité d'utilisation, les performances, la structure des messages, la facilité d'utilisation et les outils de test. Une comparaison de ces aspects est résumée comme suit : Catégorie Événement envoyé par le serveur (SSE) Direction de communication WebSocket Unidirectionnel Bidirectionnel Protocole sous-jacent HTTP Sécurité du protocole WebSocket Identique à HTTP Failles de sécurité existantes Facilité d'utilisation Paramètres Paramètres simples Performances complexes Vitesse d'envoi rapide des messages Affecté par le traitement des messages et la gestion des connexions Structure du message Texte brut ou binaire Facilité d'utilisation Largement disponible Utile pour l'intégration de WebSocket

Conseils de programmation Golang WebSocket : gestion des connexions simultanées Conseils de programmation Golang WebSocket : gestion des connexions simultanées Dec 18, 2023 am 10:54 AM

Golang est un langage de programmation puissant et son utilisation dans la programmation WebSocket est de plus en plus appréciée par les développeurs. WebSocket est un protocole basé sur TCP qui permet une communication bidirectionnelle entre le client et le serveur. Dans cet article, nous expliquerons comment utiliser Golang pour écrire un serveur WebSocket efficace qui gère plusieurs connexions simultanées en même temps. Avant de présenter les techniques, apprenons d'abord ce qu'est WebSocket. Introduction à WebSocketWeb

Comment utiliser Java et WebSocket pour mettre en œuvre une poussée des cotations boursières en temps réel Comment utiliser Java et WebSocket pour mettre en œuvre une poussée des cotations boursières en temps réel Dec 17, 2023 pm 09:15 PM

Comment utiliser Java et WebSocket pour mettre en œuvre une cotation boursière en temps réel Introduction : Avec le développement rapide d'Internet, la cotation boursière en temps réel est devenue l'une des priorités des investisseurs. La méthode traditionnelle de poussée boursière présente des problèmes tels qu'un retard élevé et une vitesse de rafraîchissement lente. Pour les investisseurs, l'incapacité d'obtenir les dernières informations boursières en temps opportun peut entraîner des erreurs dans les décisions d'investissement. La cotation boursière en temps réel basée sur Java et WebSocket peut résoudre efficacement ce problème, permettant aux investisseurs d'obtenir les dernières informations sur le cours des actions dès que possible.

See all articles