Il y a certaines choses à faire attention. Tout d'abord, nous avons ajouté toutes les dépendances afin qu'elles se chargent. Deuxièmement, nous faisons référence à quelques nouveaux fichiers qui n'existent pas encore (tous les fichiers dans le dossier de l'application). Nous rédigerons ces fichiers ensuite. <\/p>\n
allons dans notre dossier d'applications et créons notre fichier app.js. Il s'agit d'un fichier très simple. <\/p>
root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n Ce fichier fait quelques choses pour nous. Il configure notre module d'application principal AngularServicedAshboard et injecte deux références externes - ng.epoch (qui est notre directive angulaire Epoch.js) et N3-Pie-Chart (qui est une structure con?ue pour la bibliothèque de graphiques bon angulaire). <\/p>\n
Si vous l'avez remarqué, nous avons également injecté une valeur dans le backendserverurl, qui est bien s?r hébergé ailleurs, et nous prévoyons de l'utiliser ici. <\/p>\n
Créons une classe d'usine de services qui se liera à l'URL du serveur. Ce sera le fichier Services.js référencé dans notre HTML, qui ira dans le dossier de l'application: <\/p>\n
\n\n\n \n \n \n AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n\n<\/body>\n<\/html><\/pre>\n<p> Ce code utilise le mode d'abonnement populaire On and Off (pas besoin de OFF ici) et résume toutes les communications avec Signalr de notre application en utilisant l'usine angulaire. <\/p>\n<p> Ce code peut sembler un peu écrasant à première vue, mais vous le comprendrez mieux lorsque nous construisons le contr?leur. Tout ce qu'il fait est d'obtenir le nom du centre URL et Signalr du serveur Backend Signalr. (Dans SignalR, vous pouvez utiliser plusieurs hubs dans le même serveur pour pousser les données.) <\/p>\n<p> De plus, ce code permet au serveur Signalr (situé dans une bo?te ailleurs) d'appeler notre application via la méthode ON. Il permet à notre application d'appeler des fonctions à l'intérieur du serveur SignalR via la méthode Invoke. <\/p>\n<p> Ensuite, nous avons besoin de notre contr?leur, qui liera nos données du service à notre portée. Créons un fichier nommé Controllers.js dans notre dossier d'application. <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>\n<p> Ce contr?leur fait quelque chose ici. Il crée notre objet de service angulaire et le lie à une fonction de rappel afin que le serveur appelle quelque chose dans notre contr?leur. <\/p>\n<p> Vous verrez que chaque fois que le serveur nous rappelle, nous allons itérer le tableau JSON renvoyé par le serveur. Ensuite, nous avons une instruction Switch pour chaque type de performances. Maintenant, nous allons régler le RAM, puis revenir en arrière et remplir le reste. <\/p>\n<p> Quant à nos instructions, nous n'avons en fait que nous n'avons besoin que d'un seul tableau d'époque. Nous utiliserons une directive open source appelée ng-poch.js que nous avons référencée dans notre fichier Stub index.html. <\/p>\n<p> Nous pouvons diviser tous ces graphiques en différentes instructions, utiliser certains modèles et utiliser l'interface utilisateur, mais pour la simplicité de ce didacticiel, nous mettrons toutes les vues dans notre fichier index.html. <\/p>\n<p> Ajoutons maintenant notre vue dans le fichier index.html. Nous pouvons le faire en ajoutant le contenu suivant sous la balise corporelle: <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\napp.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', \n function ($rootScope, backendServerUrl) {\n\n function backendFactory(serverUrl, hubName) {\n var connection = $.hubConnection(backendServerUrl);\n var proxy = connection.createHubProxy(hubName);\n\n connection.start().done(function () { });\n\n return {\n on: function (eventName, callback) {\n proxy.on(eventName, function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n },\n invoke: function (methodName, callback) {\n proxy.invoke(methodName)\n .done(function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n }\n };\n };\n\n return backendFactory;\n}]);<\/pre>\n<p> Cela créera simplement un emplacement qui permet au serveur de repousser les données RAM. Les données entreront d'abord dans notre service, puis entrent le contr?leur et entrera enfin la vue. <\/p>\n<p> Cela devrait ressembler à ceci: <\/p><p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002671842831.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/> Maintenant, ajoutons des graphiques, ce qui est exactement ce que nous voulons vraiment faire. Nous ajouterons une variable nommée horodatage à la chronologie epoch.js. Nous ajouterons également un tableau appelé Chartenntry que nous lierons à notre directive Epoch.ng. <\/p>\n<pre><code>root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p> Ensuite, cartons les données dans l'instruction Switch et ajoutons les éléments de données Epoch.js restants requis. Bien s?r, nous pouvons le décomposer davantage (par exemple, en utilisant plus de fonctions et de filtres), mais pour la simplicité de ce tutoriel, nous resterons simples. <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">\n\n<\/body>\n<\/html><\/pre>\n<p> Notre contr?leur semble plus complet. Nous avons ajouté unakeakeed réel à la portée, que nous nous lierons à notre point de vue à travers la directive NG-EPOCH, et nous avons également ajouté des zones dans la portée, qui détermine la disposition du graphique de la zone. <\/p>\n<p> Ajoutons maintenant la directive à index.html et affichons les données de valeur CPU entrantes: <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>\n<p> Classe de graphique fait référence à la palette de couleurs de D3.js, la hauteur du graphique est ce que vous avez deviné, la cha?ne de cartes est les données renvoyées du serveur Signalr. <\/p>\n<p> avec elle, nous devrions voir le graphique appara?tre en temps réel: <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002671985790.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/> Connectons maintenant un grand nombre de points de données à ce graphique et ajoutons un autre graphique du cadre N3-PIE (parce que qui n'aime pas les graphiques à tarte!). <\/p>\n<p> Pour ajouter un graphique à secteurs du cadre N3-PIE, ajoutez simplement ce qui suit à notre contr?leur: <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\napp.factory('backendHubProxy', ['$rootScope', 'backendServerUrl', \n function ($rootScope, backendServerUrl) {\n\n function backendFactory(serverUrl, hubName) {\n var connection = $.hubConnection(backendServerUrl);\n var proxy = connection.createHubProxy(hubName);\n\n connection.start().done(function () { });\n\n return {\n on: function (eventName, callback) {\n proxy.on(eventName, function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n },\n invoke: function (methodName, callback) {\n proxy.invoke(methodName)\n .done(function (result) {\n $rootScope.$apply(function () {\n if (callback) {\n callback(result);\n }\n });\n });\n }\n };\n };\n\n return backendFactory;\n}]);<\/pre>\n<p> Bien s?r, cette valeur sera mise à jour par le serveur Signalr. Vous pouvez le voir dans le code complet de notre contr?leur. <\/p>\n<p> Nous devons également prendre un moment pour réfléchir au code complet de notre point de vue. <\/p>\n<p> Nous devrions voir les données suivantes à l'écran: <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672079098.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/> Nous avons vu que Angular peut se connecter très facilement à Signalr - insérez simplement un point de terminaison dans un service ou une usine AngularJS. L'usine AngularJS est un mécanisme d'encapsulation qui communique avec SignalR. Après \"combinaison\", qui sait qu'AngularJS et .NET fonctionneront si parfaitement? <\/p>\n<h2> Aspects principaux du serveur <\/h2>\n<p> Je vais présenter un code .NET qui permet cette communication sur le backend. (Vous pouvez trouver le code source ici.) <\/p>\n<p> Tout d'abord, pour commencer à créer du code de serveur, vous devez exécuter SignalR dans votre solution Visual Studio. Pour ce faire, suivez simplement les excellents tutoriels sur ASP.NET pour exécuter la solution SignalR de base. (C'est le plus facile.) <\/p>\n<p> Après avoir fonctionné, modifiez la classe C # Hub en ce qui suit: <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\napp.controller('PerformanceDataController', ['$scope', 'backendHubProxy',\n function ($scope, backendHubProxy) {\n console.log('trying to connect to service')\n var performanceDataHub = backendHubProxy(backendHubProxy.defaultServer, 'performanceHub');\n console.log('connected to service')\n $scope.currentRamNumber = 68;\n\n performanceDataHub.on('broadcastPerformance', function (data) {\n data.forEach(function (dataItem) {\n switch(dataItem.categoryName) {\n case 'Processor':\n break;\n case 'Memory':\n $scope.currentRamNumber = dataItem.value;\n break;\n case 'Network In':\n break;\n case 'Network Out':\n break;\n case 'Disk Read Bytes\/Sec':\n break;\n case 'Disk Write Bytes\/Sec':\n break;\n default:\n \/\/default code block\n break; \n }\n }); \n });\n }\n]);<\/pre>\n<p> Après avoir modifié la classe Hub, Visual Studio rapportera une erreur, vous devez ajouter un modèle de performances (en raison de JSON.net, il se convertira automatiquement en JSON lorsque le serveur poussera): <\/p><pre><code>root\n app (Angular應(yīng)用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p> Les métadonnées JSONProperty disent simplement à JSON.net de convertir automatiquement les noms de propriétés en minuscules lors de la convertissage en JSON pour ce modèle. JavaScript aime les minuscules. <\/p>\n<p> Ajoutons une classe Performance Engine qui poussera des données de performances réelles à tout client d'écoute via SignalR. Le moteur envoie ces messages à tout client écouté via SignalR via un thread d'arrière-plan asynchrone. <\/p>\n<p> En raison de sa longueur, vous pouvez trouver le code dans notre référentiel GitHub. <\/p>\n<p> Ce code pousse essentiellement une série de mesures de performance à tout client souscrit dans chacun de l'itération. Ces mesures de performance sont injectées dans le constructeur. La vitesse de la poussée du serveur est définie sur le paramètre du constructeur Polontervalillis. <\/p>\n<p> Notez que cela fonctionnera bien si vous utilisez OWIN comme auto-hébergement pour héberger Signalr, et cela devrait bien fonctionner si vous utilisez des threads de travailleur Web. <\/p>\n<p> La dernière chose à faire est bien s?r de démarrer le fil d'arrière-plan quelque part dans la classe ONStart () ou le startup du service. <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>AngularJS - SignalR - ServiceDashboard<\/title>\n <link rel=\"stylesheet\" href=\"Content\/bootstrap.min.css\" \/>\n <link rel=\"stylesheet\" href=\"Content\/epoch.min.css\" \/>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n <??>\n <??>\n <??>\n <??>\n\n<\/head>\n<body ng-app=\"angularServiceDashboard\">\n\n<\/body>\n<\/html><\/pre>\n<p> Les deux lignes de code qui démarrent le thread d'arrière-plan (comme vous l'avez deviné) sont l'endroit où nous instancons des performances InGine et appelons ONPERFORMANDONITORITH (). <\/p>\n<p> Maintenant, je sais que vous pourriez penser que je randomise les données du serveur, ce qui est le fait. Mais pour pousser les métriques réelles, utilisez simplement la bibliothèque System.diagnostics et le PerformanceCounter fourni par Windows. J'essaie de rester simple, mais c'est à quoi ressemble le code: <\/p>\n<pre class='brush:php;toolbar:false;'>'use strict';\n\nvar app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);\napp.value('backendServerUrl', 'http:\/\/sitepointsignal.cloudapp.net\/');<\/pre>\n<h2> Conclusion <\/h2>\n<p> Nous avons appris à utiliser les données SignalR via Angular, et nous avons connecté ces données au cadre de cartographie en temps réel du c?té angulaire. <\/p>\n<p> La démo de la version finale du client est affichée ici, à partir de laquelle vous pouvez obtenir le code. <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672199955.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \"> La démo de la version finale du serveur est affichée ici, et vous pouvez obtenir le code à partir d'ici. <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002672259072.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \"> J'espère que vous apprécierez cette procédure pas à pas. Si vous avez essayé quelque chose de similaire, faites-le nous savoir dans les commentaires! <\/p>\n<h2> FAQ (FAQ) pour la construction d'un panneau de surveillance SignalR en temps réel avec AngularJS <\/h2>\n<h3> Comment définir Signalr dans AngularJS? <\/h3>\n<p> La configuration de SignalR dans AngularJS implique plusieurs étapes. Tout d'abord, vous devez installer la bibliothèque SignalR à l'aide de NuGet ou NPM. Après l'installation, vous pouvez créer un nouveau Centre SignalR sur le serveur. Ce centre sera responsable de l'envoi et de la réception de messages. Sur le client, vous devez référencer la bibliothèque JavaScript Signalr et créer une connexion à votre centre. Vous pouvez ensuite démarrer la connexion et définir la fonction qui gère les messages entrants. <\/p>\n<h3> Comment gérer les erreurs de connexion dans SignalR? <\/h3>\n<p> SignalR fournit un mécanisme intégré pour gérer les erreurs de connexion. Vous pouvez utiliser la fonction .Error () sur la connexion centrale pour définir une fonction de rappel qui sera appelée lorsqu'une erreur se produit. Cette fonction de rappel peut afficher un message d'erreur à l'utilisateur ou essayer de se reconnecter au centre. <\/p>\n<h3> Puis-je utiliser SignalR avec d'autres frameworks JavaScript? <\/h3>\n<p> Oui, SignalR peut être utilisé avec n'importe quel framework JavaScript qui prend en charge Ajax et WebSockets. Cela comprend des cadres populaires tels que React, Vue.js et Angular. Il vous suffit d'inclure la bibliothèque JavaScript Signalr dans votre projet et de créer une connexion centrale comme vous le feriez dans toute autre application JavaScript. <\/p>\n<h3> Comment utiliser SignalR pour envoyer des messages du serveur au client? <\/h3>\n<p> Pour envoyer des messages du serveur au client, vous pouvez utiliser la propriété des clients du centre. Cette propriété fournit une méthode pour envoyer des messages à tous les clients connectés, clients spécifiques ou groupes de clients. Vous pouvez appeler ces méthodes à partir de n'importe quelle partie du code du serveur pour envoyer des mises à jour en temps réel à votre client. <\/p>\n<h3> Comment protéger mon application Signalr? <\/h3>\n<p> SignalR fournit plusieurs options pour protéger les applications. Vous pouvez utiliser la propriété [Autoriser] pour restreindre l'accès à vos méthodes centrales et centrales. Vous pouvez également spécifier un autorisateur personnalisé pour votre hub à l'aide de la méthode MAPHUBS () dans le fichier global.asax. De plus, vous pouvez utiliser SSL pour crypter le trafic SignalR et empêcher l'écoute. <\/p>\n<h3> Comment gérer la déconnexion dans Signalr? <\/h3>\n<p> SignalR gère automatiquement la déconnexion et tente de se reconnecter. Cependant, vous pouvez également gérer manuellement la déconnexion à l'aide de la fonction .Disconnected () sur la connexion centrale. Cette fonction vous permet de définir une fonction de rappel qui sera appelée lorsque la connexion sera perdue. <\/p>\n<h3> Puis-je utiliser SignalR sur un serveur non.net? <\/h3>\n<p> Signalr est une bibliothèque .NET con?ue pour être utilisée avec des serveurs .NET. Cependant, SignalR peut être utilisé sur des serveurs non.NET en utilisant des bibliothèques WebSocket compatibles. Vous devez implémenter le protocole SignalR sur le serveur et gérer vous-même la logique de connexion et de messagerie. <\/p>\n<h3> Comment tester mon application Signalr? <\/h3>\n<p> Vous pouvez tester votre application SignalR à l'aide d'outils comme Postman ou Fiddler et envoyer des demandes HTTP à votre centre et vérifier la réponse. Vous pouvez également rédiger des tests unitaires pour vos méthodes centrales et vos fonctions clients. <\/p>\n<h3> Puis-je utiliser SignalR dans mon application mobile? <\/h3>\n<p> Oui, vous pouvez utiliser SignalR dans votre application mobile. La bibliothèque JavaScript SignalR peut être utilisée dans des applications mobiles hybrides construites avec Cordova ou Ionic. Pour les applications mobiles natives, iOS et Android fournissent des clients Signalr. <\/p>\n<h3> Comment étendre mon application Signalr? <\/h3>\n<p> SignalR fournit plusieurs options pour étendre l'application. Vous pouvez utiliser Azure SignalR Service, un service entièrement géré qui gère toutes les connexions SignalR pour vous. Vous pouvez également utiliser le backend, qui est une couche logicielle pour distribuer des messages entre plusieurs serveurs. <\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/fr/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="communauté" class="head_nava head_nava-template1">communauté</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/fr/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://www.miracleart.cn/fr/faq/zt" title="Sujets" class="languagechoosea">Sujets</a>
<a href="http://www.miracleart.cn/fr/wenda.html" title="Questions et réponses" class="languagechoosea">Questions et réponses</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Apprendre" class="head_nava head_nava-template1_1">Apprendre</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/fr/course.html" title="Cours" class="languagechoosea on">Cours</a>
<a href="http://www.miracleart.cn/fr/dic/" title="Dictionnaire de programmation" class="languagechoosea">Dictionnaire de programmation</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Bibliothèque d'outils" class="head_nava head_nava-template1_2">Bibliothèque d'outils</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/fr/toolset/development-tools" title="Outils de développement" class="languagechoosea on">Outils de développement</a>
<a href="http://www.miracleart.cn/fr/toolset/website-source-code" title="Code source du site Web" class="languagechoosea">Code source du site Web</a>
<a href="http://www.miracleart.cn/fr/toolset/php-libraries" title="Bibliothèques PHP" class="languagechoosea">Bibliothèques PHP</a>
<a href="http://www.miracleart.cn/fr/toolset/js-special-effects" title="Effets spéciaux JS" class="languagechoosea on">Effets spéciaux JS</a>
<a href="http://www.miracleart.cn/fr/toolset/website-materials" title="Matériel du site Web" class="languagechoosea on">Matériel du site Web</a>
<a href="http://www.miracleart.cn/fr/toolset/extension-plug-ins" title="Plugins d'extension" class="languagechoosea on">Plugins d'extension</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/fr/ai" title="Outils d'IA" class="head_nava head_nava-template1_3">Outils d'IA</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Loisirs" class="head_nava head_nava-template1_3">Loisirs</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/fr/game" title="Téléchargement du jeu" class="languagechoosea on">Téléchargement du jeu</a>
<a href="http://www.miracleart.cn/fr/mobile-game-tutorial/" title="Tutoriels de jeu" class="languagechoosea">Tutoriels de jeu</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('fr')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="recherche" onclick="searchs('fr')"><img src="/static/imghw/find.png" alt="recherche"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Fran?ais<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:;" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Table des matières</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#points-clés" title=" points clés " > points clés </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Architecture-technique" title=" Architecture technique " > Architecture technique </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Client" title=" Client " > Client </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#c?té-serveur" title=" c?té serveur " > c?té serveur </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Core-Content" title=" Core Content " > Core Content </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Démarrer-les-paramètres" title=" Démarrer les paramètres " > Démarrer les paramètres </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Définir-avec-des-fichiers-texte-brut" title=" Définir avec des fichiers texte brut " > Définir avec des fichiers texte brut </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#principales-dépendances" title=" principales dépendances " > principales dépendances </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Réglage-avec-Visual-Studio" title=" Réglage avec Visual Studio " > Réglage avec Visual Studio </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#écrivons-notre-application" title=" écrivons notre application " > écrivons notre application </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Aspects-principaux-du-serveur" title=" Aspects principaux du serveur " > Aspects principaux du serveur </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Conclusion" title=" Conclusion " > Conclusion </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#FAQ-FAQ-pour-la-construction-d-un-panneau-de-surveillance-SignalR-en-temps-réel-avec-AngularJS" title=" FAQ (FAQ) pour la construction d'un panneau de surveillance SignalR en temps réel avec AngularJS " > FAQ (FAQ) pour la construction d'un panneau de surveillance SignalR en temps réel avec AngularJS </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-définir-Signalr-dans-AngularJS" title=" Comment définir Signalr dans AngularJS? " > Comment définir Signalr dans AngularJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-gérer-les-erreurs-de-connexion-dans-SignalR" title=" Comment gérer les erreurs de connexion dans SignalR? " > Comment gérer les erreurs de connexion dans SignalR? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-utiliser-SignalR-avec-d-autres-frameworks-JavaScript" title=" Puis-je utiliser SignalR avec d'autres frameworks JavaScript? " > Puis-je utiliser SignalR avec d'autres frameworks JavaScript? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-utiliser-SignalR-pour-envoyer-des-messages-du-serveur-au-client" title=" Comment utiliser SignalR pour envoyer des messages du serveur au client? " > Comment utiliser SignalR pour envoyer des messages du serveur au client? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-protéger-mon-application-Signalr" title=" Comment protéger mon application Signalr? " > Comment protéger mon application Signalr? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-gérer-la-déconnexion-dans-Signalr" title=" Comment gérer la déconnexion dans Signalr? " > Comment gérer la déconnexion dans Signalr? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-utiliser-SignalR-sur-un-serveur-non-net" title=" Puis-je utiliser SignalR sur un serveur non.net? " > Puis-je utiliser SignalR sur un serveur non.net? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-tester-mon-application-Signalr" title=" Comment tester mon application Signalr? " > Comment tester mon application Signalr? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Puis-je-utiliser-SignalR-dans-mon-application-mobile" title=" Puis-je utiliser SignalR dans mon application mobile? " > Puis-je utiliser SignalR dans mon application mobile? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Comment-étendre-mon-application-Signalr" title=" Comment étendre mon application Signalr? " > Comment étendre mon application Signalr? </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/fr/" title="Maison"
class="phpgenera_Details_mainL1a">Maison</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/fr/web-designer.html"
class="phpgenera_Details_mainL1a">interface Web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/fr/js-tutorial.html"
class="phpgenera_Details_mainL1a">js tutoriel</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Construisez un tableau de bord SignalR en temps réel avec AngularJS</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Construisez un tableau de bord SignalR en temps réel avec AngularJS</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/fr/member/1468497.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea80bad5190693.png" src="/static/imghw/default1.png" alt="William Shakespeare">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/fr/member/1468497.html" class="author_name">William Shakespeare</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 20, 2025 pm 12:45 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> Créez un panneau de surveillance de services en temps réel! </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671380592.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "> Notre panneau de surveillance des services affichera des données réelles en temps réel. Cela nous montrera ce qui se passe sur les serveurs et les microservices d'une manière presque en temps réel, asynchrone et non bloquant. </p>
<p> Cliquez ici pour afficher l'exemple complet du client. </p>
<p> Regardez à l'aide de D3.js pour visualiser les données et expliquer vos données en JavaScript! <img src="/static/imghw/default1.png" data-src="https://img.php.cn/editor.sitepoint.com/wp-content/themes/sitepoint/assets/svg/play-icon.svg" class="lazy" alt=""> Regardez ce cours Regardez ce cours présenter la démonstration du serveur ici. </p>
<p> Nous utiliserons le framework AngularJS et de nombreux graphiques cool en temps réel et beaucoup de données en temps réel pour créer une version simplifiée de ce panneau de surveillance. Nous créerons également nos services en utilisant la bibliothèque SignalR et API Web de .NET 4.5. </p>
<h2 id="points-clés"> points clés </h2>
<ul>
<li> Utilisez AngularJS et Signalr pour créer un panneau de surveillance en temps réel qui affiche le serveur et l'activité de microservice de manière asynchrone et non bloquants. </li>
<li> Configurez votre projet avec des fichiers en texte brut ou Visual Studio, avec des dépendances, notamment AngularJS, JQuery, Bootstrap, SignalR et diverses bibliothèques de graphiques telles que D3.JS et Epoch. </li>
<li> Implémentez SignalR Center c?té serveur pour gérer la transmission de données en temps réel, tirer parti de la capacité de .NET à gérer les demandes asynchrones et les notifications push aux clients. </li>
<li> Développez les services et contr?leurs AngularJS pour traiter les données re?ues des centres SignalR et mettez à jour l'interface utilisateur en temps réel pour refléter les modifications des métriques des performances du serveur. </li>
<li> Intégrer des solutions de diagramme telles que NG-EPOCH et N3-PIE pour représenter visuellement les données, améliorant l'interactivité et l'engagement des utilisateurs du panneau de surveillance. </li>
</ul>
<h2 id="Architecture-technique"> Architecture technique </h2>
<h3 id="Client"> Client </h3>
<p> AngularJS applique de bonnes pratiques de développement d'applications hors de la bo?te. Tout est injecté, ce qui signifie que les dépendances sont faibles en couplage. De plus, Angular a une bonne séparation entre la vue, le modèle et le contr?leur. </p>
<p> Angular ajoute .NET ici, permettant au code c?té serveur d'être maintenu compact, gérable et testable. Le code c?té serveur n'est utilisé que pour profiter de ses avantages - pour effectuer un traitement lourd. </p>
<h3 id="c?té-serveur"> c?té serveur </h3>
<p> L'utilisation de SignalR avec l'API Web de .NET 4.5 est très similaire à l'utilisation de node.js avec socket.io et permet le même type de push asynchrone non bloquant du serveur vers le client d'abonnement. SignalR utilise des lignes Web en bas, mais parce qu'elle résume la communication, lorsqu'il fonctionne à l'intérieur d'angulaires, il retombe à toute technologie prise en charge par le navigateur client. (Par exemple, pour les navigateurs plus agés, il peut retomber à un long sondage.) </p>
<p> De plus, avec la magie des balises dynamiques et JSON.net, le .NET Framework considère JavaScript en tant que citoyen de première classe. En fait, l'utilisation de l'API Web et de la technologie SignalR via JavaScript est généralement plus facile que par le biais de clients .NET natifs car ils sont construits avec JavaScript à l'esprit. </p>
<h2 id="Core-Content"> Core Content </h2>
<h3 id="Démarrer-les-paramètres"> Démarrer les paramètres </h3>
<p> Tout le code angularjs utilisé dans ce tutoriel peut être trouvé ici. </p>
<p> Je vais couvrir comment la créer en utilisant votre éditeur de texte préféré et vos dossiers simples ainsi que Visual Studio, selon l'outil qui crée le projet. </p>
<h3 id="Définir-avec-des-fichiers-texte-brut"> Définir avec des fichiers texte brut </h3>
<p> La structure du dossier et des fichiers est la suivante: </p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<h3 id="principales-dépendances"> principales dépendances </h3>
<p> Vous devez télécharger le fichier suivant: </p>
<ul>
<li> jQuery (sélectionnez le lien "Télécharger la production compressée jQuery 2.1.1") </li>
<li> angularjs (cliquez sur la grande option "Télécharger" et cliquez sur la dernière version d'Angular 1.3) </li>
<li> bootstrap (cliquez sur l'option "Télécharger l'option bootstrap") </li>
<li> signalr (cliquez sur le bouton "Télécharger Zip" à droite) </li>
<li> d3.js (cliquez sur le lien "d3.zip" au milieu de la page) </li>
<li> Epoch (cliquez sur "Télécharger le lien v0.6.0") </li>
<li> ng-epoch (cliquez sur le bouton "Télécharger le zip" à droite) </li>
<li> N3-PIE (Cliquez sur le bouton "Télécharger le zip" à droite) </li>
</ul>
<p> Dans notre dossier Scripts, nous avons besoin: </p>
<ul>
<li> jQuery-2.1.1.min.js </li>
<li> angular.min.js </li>
<li> bootstrap.min.js </li>
<li> jQuery.signalr.min.js </li>
<li> d3.min.js </li>
<li> epoch.min.js </li>
<li> PIE-CHART.MIN.JS </li>
</ul>
<p> dans notre dossier de contenu: </p>
<ul>
<li> bootstrap.min.css </li>
<li> epoch.min.css </li>
</ul>
<h3 id="Réglage-avec-Visual-Studio"> Réglage avec Visual Studio </h3>
<p> Si vous pensez que le fichier texte est trop simple, il est très facile à configurer via Visual Studio. </p>
<p> Configurez simplement une application Web vide en allant au fichier - & gt; Créer un nouveau projet - & gt; </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671581952.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "> Ensuite, cliquez avec le bouton droit sur le projet, accédez au package Manage NuGet, recherchez et téléchargez les clients javascript jQuery, AngularJS, Bootstrap, D3 et Signalr. </p>
<p> Après les téléchargements et les installer, vous devriez les voir dans les dossiers des scripts et des contenus. De plus, sous le package NuGet installé, vous verrez ce qui suit: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671658886.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "> Enfin, NuGet ne contient pas de bibliothèques de graphiques époques, ng-epoch et N3, vous devez donc les ajouter manuellement. Suivez simplement les étapes détaillées dans la section précédente pour obtenir ces bibliothèques. </p>
<h2 id="écrivons-notre-application"> écrivons notre application </h2>
<p> Maintenant, nous sommes prêts à écrire du code. </p>
<p> Tout d'abord, créons notre fichier de base index.html, qui conservera notre code JavaScript angulaire. </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p> Il y a certaines choses à faire attention. Tout d'abord, nous avons ajouté toutes les dépendances afin qu'elles se chargent. Deuxièmement, nous faisons référence à quelques nouveaux fichiers qui n'existent pas encore (tous les fichiers dans le dossier de l'application). Nous rédigerons ces fichiers ensuite. </p>
<p> allons dans notre dossier d'applications et créons notre fichier app.js. Il s'agit d'un fichier très simple. </p><pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p> Ce fichier fait quelques choses pour nous. Il configure notre module d'application principal AngularServicedAshboard et injecte deux références externes - ng.epoch (qui est notre directive angulaire Epoch.js) et N3-Pie-Chart (qui est une structure con?ue pour la bibliothèque de graphiques bon angulaire). </p>
<p> Si vous l'avez remarqué, nous avons également injecté une valeur dans le backendserverurl, qui est bien s?r hébergé ailleurs, et nous prévoyons de l'utiliser ici. </p>
<p> Créons une classe d'usine de services qui se liera à l'URL du serveur. Ce sera le fichier Services.js référencé dans notre HTML, qui ira dans le dossier de l'application: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p> Ce code utilise le mode d'abonnement populaire On and Off (pas besoin de OFF ici) et résume toutes les communications avec Signalr de notre application en utilisant l'usine angulaire. </p>
<p> Ce code peut sembler un peu écrasant à première vue, mais vous le comprendrez mieux lorsque nous construisons le contr?leur. Tout ce qu'il fait est d'obtenir le nom du centre URL et Signalr du serveur Backend Signalr. (Dans SignalR, vous pouvez utiliser plusieurs hubs dans le même serveur pour pousser les données.) </p>
<p> De plus, ce code permet au serveur Signalr (situé dans une bo?te ailleurs) d'appeler notre application via la méthode ON. Il permet à notre application d'appeler des fonctions à l'intérieur du serveur SignalR via la méthode Invoke. </p>
<p> Ensuite, nous avons besoin de notre contr?leur, qui liera nos données du service à notre portée. Créons un fichier nommé Controllers.js dans notre dossier d'application. </p>
<pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>
<p> Ce contr?leur fait quelque chose ici. Il crée notre objet de service angulaire et le lie à une fonction de rappel afin que le serveur appelle quelque chose dans notre contr?leur. </p>
<p> Vous verrez que chaque fois que le serveur nous rappelle, nous allons itérer le tableau JSON renvoyé par le serveur. Ensuite, nous avons une instruction Switch pour chaque type de performances. Maintenant, nous allons régler le RAM, puis revenir en arrière et remplir le reste. </p>
<p> Quant à nos instructions, nous n'avons en fait que nous n'avons besoin que d'un seul tableau d'époque. Nous utiliserons une directive open source appelée ng-poch.js que nous avons référencée dans notre fichier Stub index.html. </p>
<p> Nous pouvons diviser tous ces graphiques en différentes instructions, utiliser certains modèles et utiliser l'interface utilisateur, mais pour la simplicité de ce didacticiel, nous mettrons toutes les vues dans notre fichier index.html. </p>
<p> Ajoutons maintenant notre vue dans le fichier index.html. Nous pouvons le faire en ajoutant le contenu suivant sous la balise corporelle: </p>
<pre class='brush:php;toolbar:false;'>'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);</pre>
<p> Cela créera simplement un emplacement qui permet au serveur de repousser les données RAM. Les données entreront d'abord dans notre service, puis entrent le contr?leur et entrera enfin la vue. </p>
<p> Cela devrait ressembler à ceci: </p><p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671842831.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " /> Maintenant, ajoutons des graphiques, ce qui est exactement ce que nous voulons vraiment faire. Nous ajouterons une variable nommée horodatage à la chronologie epoch.js. Nous ajouterons également un tableau appelé Chartenntry que nous lierons à notre directive Epoch.ng. </p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p> Ensuite, cartons les données dans l'instruction Switch et ajoutons les éléments de données Epoch.js restants requis. Bien s?r, nous pouvons le décomposer davantage (par exemple, en utilisant plus de fonctions et de filtres), mais pour la simplicité de ce tutoriel, nous resterons simples. </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p> Notre contr?leur semble plus complet. Nous avons ajouté unakeakeed réel à la portée, que nous nous lierons à notre point de vue à travers la directive NG-EPOCH, et nous avons également ajouté des zones dans la portée, qui détermine la disposition du graphique de la zone. </p>
<p> Ajoutons maintenant la directive à index.html et affichons les données de valeur CPU entrantes: </p>
<pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>
<p> Classe de graphique fait référence à la palette de couleurs de D3.js, la hauteur du graphique est ce que vous avez deviné, la cha?ne de cartes est les données renvoyées du serveur Signalr. </p>
<p> avec elle, nous devrions voir le graphique appara?tre en temps réel: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002671985790.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " /> Connectons maintenant un grand nombre de points de données à ce graphique et ajoutons un autre graphique du cadre N3-PIE (parce que qui n'aime pas les graphiques à tarte!). </p>
<p> Pour ajouter un graphique à secteurs du cadre N3-PIE, ajoutez simplement ce qui suit à notre contr?leur: </p>
<pre class='brush:php;toolbar:false;'>'use strict';
app.factory('backendHubProxy', ['$rootScope', 'backendServerUrl',
function ($rootScope, backendServerUrl) {
function backendFactory(serverUrl, hubName) {
var connection = $.hubConnection(backendServerUrl);
var proxy = connection.createHubProxy(hubName);
connection.start().done(function () { });
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
}
};
};
return backendFactory;
}]);</pre>
<p> Bien s?r, cette valeur sera mise à jour par le serveur Signalr. Vous pouvez le voir dans le code complet de notre contr?leur. </p>
<p> Nous devons également prendre un moment pour réfléchir au code complet de notre point de vue. </p>
<p> Nous devrions voir les données suivantes à l'écran: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672079098.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS " /> Nous avons vu que Angular peut se connecter très facilement à Signalr - insérez simplement un point de terminaison dans un service ou une usine AngularJS. L'usine AngularJS est un mécanisme d'encapsulation qui communique avec SignalR. Après "combinaison", qui sait qu'AngularJS et .NET fonctionneront si parfaitement? </p>
<h2 id="Aspects-principaux-du-serveur"> Aspects principaux du serveur </h2>
<p> Je vais présenter un code .NET qui permet cette communication sur le backend. (Vous pouvez trouver le code source ici.) </p>
<p> Tout d'abord, pour commencer à créer du code de serveur, vous devez exécuter SignalR dans votre solution Visual Studio. Pour ce faire, suivez simplement les excellents tutoriels sur ASP.NET pour exécuter la solution SignalR de base. (C'est le plus facile.) </p>
<p> Après avoir fonctionné, modifiez la classe C # Hub en ce qui suit: </p>
<pre class='brush:php;toolbar:false;'>'use strict';
app.controller('PerformanceDataController', ['$scope', 'backendHubProxy',
function ($scope, backendHubProxy) {
console.log('trying to connect to service')
var performanceDataHub = backendHubProxy(backendHubProxy.defaultServer, 'performanceHub');
console.log('connected to service')
$scope.currentRamNumber = 68;
performanceDataHub.on('broadcastPerformance', function (data) {
data.forEach(function (dataItem) {
switch(dataItem.categoryName) {
case 'Processor':
break;
case 'Memory':
$scope.currentRamNumber = dataItem.value;
break;
case 'Network In':
break;
case 'Network Out':
break;
case 'Disk Read Bytes/Sec':
break;
case 'Disk Write Bytes/Sec':
break;
default:
//default code block
break;
}
});
});
}
]);</pre>
<p> Après avoir modifié la classe Hub, Visual Studio rapportera une erreur, vous devez ajouter un modèle de performances (en raison de JSON.net, il se convertira automatiquement en JSON lorsque le serveur poussera): </p><pre class="brush:php;toolbar:false"><code>root
app (Angular應(yīng)用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p> Les métadonnées JSONProperty disent simplement à JSON.net de convertir automatiquement les noms de propriétés en minuscules lors de la convertissage en JSON pour ce modèle. JavaScript aime les minuscules. </p>
<p> Ajoutons une classe Performance Engine qui poussera des données de performances réelles à tout client d'écoute via SignalR. Le moteur envoie ces messages à tout client écouté via SignalR via un thread d'arrière-plan asynchrone. </p>
<p> En raison de sa longueur, vous pouvez trouver le code dans notre référentiel GitHub. </p>
<p> Ce code pousse essentiellement une série de mesures de performance à tout client souscrit dans chacun de l'itération. Ces mesures de performance sont injectées dans le constructeur. La vitesse de la poussée du serveur est définie sur le paramètre du constructeur Polontervalillis. </p>
<p> Notez que cela fonctionnera bien si vous utilisez OWIN comme auto-hébergement pour héberger Signalr, et cela devrait bien fonctionner si vous utilisez des threads de travailleur Web. </p>
<p> La dernière chose à faire est bien s?r de démarrer le fil d'arrière-plan quelque part dans la classe ONStart () ou le startup du service. </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - SignalR - ServiceDashboard</title>
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="Content/epoch.min.css" />
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</head>
<body ng-app="angularServiceDashboard">
</body>
</html></pre>
<p> Les deux lignes de code qui démarrent le thread d'arrière-plan (comme vous l'avez deviné) sont l'endroit où nous instancons des performances InGine et appelons ONPERFORMANDONITORITH (). </p>
<p> Maintenant, je sais que vous pourriez penser que je randomise les données du serveur, ce qui est le fait. Mais pour pousser les métriques réelles, utilisez simplement la bibliothèque System.diagnostics et le PerformanceCounter fourni par Windows. J'essaie de rester simple, mais c'est à quoi ressemble le code: </p>
<pre class='brush:php;toolbar:false;'>'use strict';
var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');</pre>
<h2 id="Conclusion"> Conclusion </h2>
<p> Nous avons appris à utiliser les données SignalR via Angular, et nous avons connecté ces données au cadre de cartographie en temps réel du c?té angulaire. </p>
<p> La démo de la version finale du client est affichée ici, à partir de laquelle vous pouvez obtenir le code. </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672199955.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "> La démo de la version finale du serveur est affichée ici, et vous pouvez obtenir le code à partir d'ici. </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002672259072.jpg" class="lazy" alt="Build a Real-time SignalR Dashboard with AngularJS "> J'espère que vous apprécierez cette procédure pas à pas. Si vous avez essayé quelque chose de similaire, faites-le nous savoir dans les commentaires! </p>
<h2 id="FAQ-FAQ-pour-la-construction-d-un-panneau-de-surveillance-SignalR-en-temps-réel-avec-AngularJS"> FAQ (FAQ) pour la construction d'un panneau de surveillance SignalR en temps réel avec AngularJS </h2>
<h3 id="Comment-définir-Signalr-dans-AngularJS"> Comment définir Signalr dans AngularJS? </h3>
<p> La configuration de SignalR dans AngularJS implique plusieurs étapes. Tout d'abord, vous devez installer la bibliothèque SignalR à l'aide de NuGet ou NPM. Après l'installation, vous pouvez créer un nouveau Centre SignalR sur le serveur. Ce centre sera responsable de l'envoi et de la réception de messages. Sur le client, vous devez référencer la bibliothèque JavaScript Signalr et créer une connexion à votre centre. Vous pouvez ensuite démarrer la connexion et définir la fonction qui gère les messages entrants. </p>
<h3 id="Comment-gérer-les-erreurs-de-connexion-dans-SignalR"> Comment gérer les erreurs de connexion dans SignalR? </h3>
<p> SignalR fournit un mécanisme intégré pour gérer les erreurs de connexion. Vous pouvez utiliser la fonction .Error () sur la connexion centrale pour définir une fonction de rappel qui sera appelée lorsqu'une erreur se produit. Cette fonction de rappel peut afficher un message d'erreur à l'utilisateur ou essayer de se reconnecter au centre. </p>
<h3 id="Puis-je-utiliser-SignalR-avec-d-autres-frameworks-JavaScript"> Puis-je utiliser SignalR avec d'autres frameworks JavaScript? </h3>
<p> Oui, SignalR peut être utilisé avec n'importe quel framework JavaScript qui prend en charge Ajax et WebSockets. Cela comprend des cadres populaires tels que React, Vue.js et Angular. Il vous suffit d'inclure la bibliothèque JavaScript Signalr dans votre projet et de créer une connexion centrale comme vous le feriez dans toute autre application JavaScript. </p>
<h3 id="Comment-utiliser-SignalR-pour-envoyer-des-messages-du-serveur-au-client"> Comment utiliser SignalR pour envoyer des messages du serveur au client? </h3>
<p> Pour envoyer des messages du serveur au client, vous pouvez utiliser la propriété des clients du centre. Cette propriété fournit une méthode pour envoyer des messages à tous les clients connectés, clients spécifiques ou groupes de clients. Vous pouvez appeler ces méthodes à partir de n'importe quelle partie du code du serveur pour envoyer des mises à jour en temps réel à votre client. </p>
<h3 id="Comment-protéger-mon-application-Signalr"> Comment protéger mon application Signalr? </h3>
<p> SignalR fournit plusieurs options pour protéger les applications. Vous pouvez utiliser la propriété [Autoriser] pour restreindre l'accès à vos méthodes centrales et centrales. Vous pouvez également spécifier un autorisateur personnalisé pour votre hub à l'aide de la méthode MAPHUBS () dans le fichier global.asax. De plus, vous pouvez utiliser SSL pour crypter le trafic SignalR et empêcher l'écoute. </p>
<h3 id="Comment-gérer-la-déconnexion-dans-Signalr"> Comment gérer la déconnexion dans Signalr? </h3>
<p> SignalR gère automatiquement la déconnexion et tente de se reconnecter. Cependant, vous pouvez également gérer manuellement la déconnexion à l'aide de la fonction .Disconnected () sur la connexion centrale. Cette fonction vous permet de définir une fonction de rappel qui sera appelée lorsque la connexion sera perdue. </p>
<h3 id="Puis-je-utiliser-SignalR-sur-un-serveur-non-net"> Puis-je utiliser SignalR sur un serveur non.net? </h3>
<p> Signalr est une bibliothèque .NET con?ue pour être utilisée avec des serveurs .NET. Cependant, SignalR peut être utilisé sur des serveurs non.NET en utilisant des bibliothèques WebSocket compatibles. Vous devez implémenter le protocole SignalR sur le serveur et gérer vous-même la logique de connexion et de messagerie. </p>
<h3 id="Comment-tester-mon-application-Signalr"> Comment tester mon application Signalr? </h3>
<p> Vous pouvez tester votre application SignalR à l'aide d'outils comme Postman ou Fiddler et envoyer des demandes HTTP à votre centre et vérifier la réponse. Vous pouvez également rédiger des tests unitaires pour vos méthodes centrales et vos fonctions clients. </p>
<h3 id="Puis-je-utiliser-SignalR-dans-mon-application-mobile"> Puis-je utiliser SignalR dans mon application mobile? </h3>
<p> Oui, vous pouvez utiliser SignalR dans votre application mobile. La bibliothèque JavaScript SignalR peut être utilisée dans des applications mobiles hybrides construites avec Cordova ou Ionic. Pour les applications mobiles natives, iOS et Android fournissent des clients Signalr. </p>
<h3 id="Comment-étendre-mon-application-Signalr"> Comment étendre mon application Signalr? </h3>
<p> SignalR fournit plusieurs options pour étendre l'application. Vous pouvez utiliser Azure SignalR Service, un service entièrement géré qui gère toutes les connexions SignalR pour vous. Vous pouvez également utiliser le backend, qui est une couche logicielle pour distribuer des messages entre plusieurs serveurs. </p><p>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!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Déclaration de ce site Web</div>
<div>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</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Article chaud</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/fr/article.html">Afficher plus</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Outils d'IA chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Images de déshabillage gratuites</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Dissolvant de vêtements AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/fr/ai">Afficher plus</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Article chaud</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Il y a quelques semaines</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/fr/article.html">Afficher plus</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Outils chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Bloc-notes++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
<h3>Bloc-notes++7.3.1</h3>
</a>
<p>éditeur de code facile à utiliser et gratuit</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version chinoise" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version chinoise</h3>
</a>
<p>Version chinoise, très simple à utiliser</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Envoyer Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Envoyer Studio 13.0.1</h3>
</a>
<p>Puissant environnement de développement intégré PHP</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Outils de développement Web visuel</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version Mac</h3>
</a>
<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/fr/ai">Afficher plus</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Sujets chauds</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Laravel</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1600</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel PHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1502</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>276</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/fr/faq/zt">Afficher plus</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796836217.html" title="Comment faire une demande HTTP dans Node.js?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234432058757.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment faire une demande HTTP dans Node.js?" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796836217.html" title="Comment faire une demande HTTP dans Node.js?" class="phphistorical_Version2_mids_title">Comment faire une demande HTTP dans Node.js?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:18 AM</span>
<p class="Articlelist_txts_p">Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796836292.html" title="Types de données JavaScript: référence primitive vs" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Types de données JavaScript: référence primitive vs" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796836292.html" title="Types de données JavaScript: référence primitive vs" class="phphistorical_Version2_mids_title">Types de données JavaScript: référence primitive vs</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 13, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796832745.html" title="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/173914572643912.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796832745.html" title="Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc." class="phphistorical_Version2_mids_title">Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 pm 02:27 PM</span>
<p class="Articlelist_txts_p">Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796832608.html" title="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191360175213.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796832608.html" title="Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript" class="phphistorical_Version2_mids_title">Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:40 AM</span>
<p class="Articlelist_txts_p">La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796832618.html" title="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191380054750.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796832618.html" title="Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?" class="phphistorical_Version2_mids_title">Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:43 AM</span>
<p class="Articlelist_txts_p">Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796832563.html" title="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175191266081499.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796832563.html" title="JS Roundup: une plongée profonde dans la boucle d'événement JavaScript" class="phphistorical_Version2_mids_title">JS Roundup: une plongée profonde dans la boucle d'événement JavaScript</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796832598.html" title="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191340168611.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796832598.html" title="Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM" class="phphistorical_Version2_mids_title">Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 02:36 AM</span>
<p class="Articlelist_txts_p">Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/fr/faq/1796833774.html" title="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175211891141086.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" />
</a>
<a href="http://www.miracleart.cn/fr/faq/1796833774.html" title="Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre" class="phphistorical_Version2_mids_title">Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 10, 2025 am 11:41 AM</span>
<p class="Articlelist_txts_p">Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.</p>
</div>
</div>
<a href="http://www.miracleart.cn/fr/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/fr/about/us.html">à propos de nous</a>
<a href="http://www.miracleart.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
<a href="http://www.miracleart.cn/fr/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="8nnk5" class="pl_css_ganrao" style="display: none;"><video id="8nnk5"></video><pre id="8nnk5"><b id="8nnk5"><pre id="8nnk5"><video id="8nnk5"></video></pre></b></pre><dl id="8nnk5"><address id="8nnk5"><nav id="8nnk5"><thead id="8nnk5"></thead></nav></address></dl><strike id="8nnk5"><ins id="8nnk5"></ins></strike><dl id="8nnk5"><em id="8nnk5"><s id="8nnk5"></s></em></dl><strike id="8nnk5"></strike><strike id="8nnk5"></strike><center id="8nnk5"><optgroup id="8nnk5"><tt id="8nnk5"></tt></optgroup></center><progress id="8nnk5"><small id="8nnk5"></small></progress><s id="8nnk5"><samp id="8nnk5"></samp></s><dfn id="8nnk5"><listing id="8nnk5"><sub id="8nnk5"></sub></listing></dfn><optgroup id="8nnk5"><td id="8nnk5"><kbd id="8nnk5"><p id="8nnk5"></p></kbd></td></optgroup><tt id="8nnk5"><pre id="8nnk5"><menuitem id="8nnk5"><code id="8nnk5"></code></menuitem></pre></tt><center id="8nnk5"><label id="8nnk5"></label></center><rt id="8nnk5"><small id="8nnk5"></small></rt><span id="8nnk5"></span><sub id="8nnk5"><form id="8nnk5"></form></sub><del id="8nnk5"><i id="8nnk5"></i></del><form id="8nnk5"></form><tfoot id="8nnk5"></tfoot><form id="8nnk5"></form><nobr id="8nnk5"></nobr><tt id="8nnk5"><style id="8nnk5"></style></tt><ruby id="8nnk5"><dl id="8nnk5"></dl></ruby><address id="8nnk5"><table id="8nnk5"></table></address><form id="8nnk5"></form><cite id="8nnk5"></cite><sup id="8nnk5"></sup><input id="8nnk5"><xmp id="8nnk5"><label id="8nnk5"></label></xmp></input><strong id="8nnk5"></strong><font id="8nnk5"><style id="8nnk5"><delect id="8nnk5"><small id="8nnk5"></small></delect></style></font><big id="8nnk5"><listing id="8nnk5"><pre id="8nnk5"><listing id="8nnk5"></listing></pre></listing></big><optgroup id="8nnk5"></optgroup><optgroup id="8nnk5"><sub id="8nnk5"></sub></optgroup><em id="8nnk5"><p id="8nnk5"><kbd id="8nnk5"><strong id="8nnk5"></strong></kbd></p></em><tbody id="8nnk5"><strike id="8nnk5"><th id="8nnk5"><form id="8nnk5"></form></th></strike></tbody><tbody id="8nnk5"><meter id="8nnk5"></meter></tbody><ruby id="8nnk5"><strong id="8nnk5"></strong></ruby><meter id="8nnk5"></meter><small id="8nnk5"><small id="8nnk5"><progress id="8nnk5"><track id="8nnk5"></track></progress></small></small><button id="8nnk5"><dl id="8nnk5"></dl></button><td id="8nnk5"><form id="8nnk5"></form></td><fieldset id="8nnk5"></fieldset><nobr id="8nnk5"><tr id="8nnk5"><dfn id="8nnk5"></dfn></tr></nobr><small id="8nnk5"></small><ol id="8nnk5"></ol><style id="8nnk5"><progress id="8nnk5"><small id="8nnk5"><progress id="8nnk5"></progress></small></progress></style><li id="8nnk5"><legend id="8nnk5"></legend></li><source id="8nnk5"></source><big id="8nnk5"><listing id="8nnk5"><pre id="8nnk5"><abbr id="8nnk5"></abbr></pre></listing></big></div>
</html>