There are some things to pay attention to. First, we added all dependencies so that they load. Second, we reference some new files that do not exist yet (all files in the app folder). We will write these files next. <\/p>\n
Let's go to our app folder and create our app.js file. This is a very simple file. <\/p>
root\n app (Angular應用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\nThis file does a few things for us. It sets up our main application module angularServiceDashboard and injects two external references - ng.epoch (which is our Epoch.js Angular directive) and n3-pie-chart (which is a structure made for Angular Good chart library). <\/p>\n
If you noticed, we also injected a value into the backendServerUrl, which is of course hosted elsewhere, and we plan to use it here. <\/p>\n
Let's create a service factory class that will bind to the server's URL. This will be the services.js file referenced in our HTML, which will go to the app folder: <\/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://miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n\n<\/body>\n<\/html><\/pre>\n<p> This code uses the popular on and off (no need for off here) subscription mode and encapsulates all communication with SignalR of our application by using the Angular factory. <\/p>\n<p> This code may look a little overwhelming at first glance, but you will understand it better when we build the controller. All it does is get the URL and SignalR center name of the backend SignalR server. (In SignalR, you can use multiple hubs in the same server to push data.) <\/p>\n<p> In addition, this code allows the SignalR server (located in some box elsewhere) to call our application via the on method. It allows our application to call functions inside the SignalR server through the invoke method. <\/p>\n<p>Next, we need our controller, which will bind our data from the service to our scope. Let's create a file named controllers.js in our app folder. <\/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>This controller does something here. It creates our Angular service object and binds it to a callback function so that the server calls something in our controller. <\/p>\n<p> You will see that every time the server calls back us, we will iterate over the JSON array returned by the server. Then we have a switch statement for each performance type. Now we will set the RAM and then go back and fill the rest. <\/p>\n<p> As for our instructions, we actually only need one Epoch chart for us. We will use an open source directive called ng-epoch.js which we have referenced in our index.html stub file. <\/p>\n<p> We can split all these charts into different instructions, use some templates and use UI-Router, but for the sake of simplicity of this tutorial, we will put all the views in our index.html file. <\/p>\n<p>Now let's add our view to the index.html file. We can do this by adding the following content under the body tag: <\/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> This will simply create a location that allows the server to push the RAM data back. The data will first enter our service, then enter the controller, and finally enter the view. <\/p>\n<p>It should look like this: <\/p><p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174002671842831.jpg\" alt=\"Build a Real-time SignalR Dashboard with AngularJS \" \/> Now let's add some charts, which is exactly what we really want to do. We will add a variable named timestamp to the epoch.js timeline. We will also add an array called chartEntry which we will bind to our epoch.ng directive. <\/p>\n<pre><code>root\n app (Angular應用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p> Then let's map the data in the switch statement and add the remaining required epoch.js data items. Of course, we can break it down further (for example, using more functions and filters), but for the sake of simplicity of this tutorial, we will keep it simple. <\/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>Our controller looks more complete. We have added a realtimeAreaFeed to the scope, which we will bind to our view through the ng-epoch directive, and we have also added areaAxes in the scope, which determines the layout of the area graph. <\/p>\n<p>Now let's add the directive to index.html and display the incoming CPU value data: <\/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>chart-class refers to the color scheme of D3.js, chart-height is what you guessed, chart-stream is the data returned from the SignalR server. <\/p>\n<p>With it, we should see the chart appear in real time: <\/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 \" \/> Now let's connect a large number of data points to this chart and add another chart from the n3-pie framework (because who doesn't like pie charts!). <\/p>\n<p>To add a pie chart from the n3-pie framework, just add the following to our controller: <\/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> Of course, this value will be updated by the SignalR server. You can see this in the complete code of our controller. <\/p>\n<p>We should also take a moment to think about the full code of our view. <\/p>\n<p>We should see the following data on the screen: <\/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 \" \/>We have seen that Angular can connect to SignalR very easily - just insert an endpoint in an AngularJS service or factory. AngularJS factory is an encapsulation mechanism that communicates with SignalR. After \"combining\", who knows that AngularJS and .NET will work together so perfectly? <\/p>\n<h2>Core aspects of server<\/h2>\n<p>I will introduce some .NET code that allows this communication on the backend. (You can find the source code here.) <\/p>\n<p>First, to start building server code, you need to run SignalR in your Visual Studio solution. To do this, just follow the excellent tutorials on ASP.NET to run the basic SignalR solution. (This is the easiest.)<\/p>\n<p>After running, change the C# Hub class to the following: <\/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>After changing the Hub class, Visual Studio will report an error, you need to add a performance model (due to Json.NET, it will automatically convert to JSON when the server pushes): <\/p><pre><code>root\n app (Angular應用程序特定的JavaScript)\n Content (CSS等)\n Scripts (引用的JavaScript等)\n ...\n index.html<\/code><\/pre>\n<p>JsonProperty metadata just tells Json.NET to automatically convert property names to lowercase when converting to JSON for this model. JavaScript likes lowercase. <\/p>\n<p> Let's add a PerformanceEngine class that will push real performance data to any listening client via SignalR. The engine sends these messages to any listening client via SignalR through an asynchronous background thread. <\/p>\n<p> Due to its length, you can find the code in our GitHub repository. <\/p>\n<p>This code basically pushes a series of performance metrics to any subscribed client in each while iteration. These performance metrics are injected into the constructor. The speed of push from the server is set on the constructor parameter pollIntervalMillis. <\/p>\n<p> Note that this will work well if you use OWIN as self-hosting to host SignalR, and it should work well if you use web worker threads. <\/p>\n<p>The last thing to do is of course start the background thread somewhere in the OnStart() or Startup class of the 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>The two lines of code that start the background thread (as you guessed) are where we instantiate PerformanceEngine and call OnPerformanceMonitor(). <\/p>\n<p> Now, I know you might think I'm randomizing data from the server, which is the fact. But to push real metrics, just use the System.Diagnostics library and the PerformanceCounter provided by Windows. I'm trying to keep it simple, but this is what the code looks like: <\/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>We have learned how to use SignalR data through Angular, and we have connected that data to the real-time charting framework on the Angular side. <\/p>\n<p>The demo of the final version of the client is shown here, from which you can get the 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 \">The demo of the final version of the server is shown here, and you can get the code from here. <\/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 \">I hope you enjoy this walkthrough. If you have tried something similar, please let us know in the comments! <\/p>\n<h2>FAQ (FAQ) for building a real-time SignalR monitoring panel with AngularJS<\/h2>\n<h3>How to set SignalR in AngularJS? <\/h3>\n<p> Setting up SignalR in AngularJS involves several steps. First, you need to install the SignalR library using NuGet or npm. After installation, you can create a new SignalR center on the server. This center will be responsible for sending and receiving messages. On the client, you need to reference the SignalR JavaScript library and create a connection to your center. You can then start the connection and define the function that handles incoming messages. <\/p>\n<h3>How to deal with connection errors in SignalR? <\/h3>\n<p>SignalR provides a built-in mechanism for handling connection errors. You can use the .error() function on the central connection to define a callback function that will be called when an error occurs. This callback function can display an error message to the user or try to reconnect to the center. <\/p>\n<h3> Can I use SignalR with other JavaScript frameworks? <\/h3>\n<p>Yes, SignalR can be used with any JavaScript framework that supports AJAX and WebSockets. This includes popular frameworks such as React, Vue.js, and Angular. You just need to include the SignalR JavaScript library in your project and create a central connection just like you would in any other JavaScript application. <\/p>\n<h3>How to use SignalR to send messages from server to client? <\/h3>\n<p>To send messages from the server to the client, you can use the Clients property of the center. This property provides a method for sending messages to all connected clients, specific clients, or client groups. You can call these methods from any part of the server code to send real-time updates to your client. <\/p>\n<h3>How to protect my SignalR application? <\/h3>\n<p>SignalR provides several options to protect applications. You can use the [Authorize] property to restrict access to your center and center methods. You can also specify a custom authorizer for your hub using the MapHubs() method in the Global.asax file. Additionally, you can use SSL to encrypt SignalR traffic and prevent eavesdropping. <\/p>\n<h3>How to deal with disconnection in SignalR? <\/h3>\n<p>SignalR automatically handles disconnection and attempts to reconnect. However, you can also manually handle disconnection using the .disconnected() function on the central connection. This function allows you to define a callback function that will be called when the connection is lost. <\/p>\n<h3> Can I use SignalR on a non.NET server? <\/h3>\n<p>SignalR is a .NET library designed to be used with .NET servers. However, SignalR can be used on non-.NET servers by using compatible WebSocket libraries. You need to implement the SignalR protocol on the server and handle the connection and messaging logic yourself. <\/p>\n<h3>How to test my SignalR application? <\/h3>\n<p>You can test your SignalR application using tools like Postman or Fiddler and send HTTP requests to your center and verify the response. You can also write unit tests for your central methods and client functions. <\/p>\n<h3>Can I use SignalR in my mobile app? <\/h3>\n<p>Yes, you can use SignalR in your mobile app. The SignalR JavaScript library can be used in hybrid mobile applications built with Cordova or Ionic. For native mobile apps, both iOS and Android provide SignalR clients. <\/p>\n<h3>How to extend my SignalR application? <\/h3>\n<p>SignalR provides several options to extend the application. You can use Azure SignalR service, a fully managed service that handles all SignalR connections for you. You can also use the backend, which is a software layer for distributing messages between multiple servers. <\/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://miracleart.cn/" 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="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<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:;" 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:setlang('fr');" 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 of Contents</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Key-Points" title="Key Points" >Key Points</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Technical-Architecture" title="Technical Architecture" >Technical Architecture</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="#Server-side" title="Server side" >Server side</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="#Start-Settings" title="Start Settings" >Start Settings</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Set-with-plain-text-files" title="Set with plain text files" >Set with plain text files</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Main-dependencies" title="Main dependencies" >Main dependencies</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Setting-with-Visual-Studio" title="Setting with Visual Studio" >Setting with Visual Studio</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Let-s-write-our-application" title="Let's write our application" >Let's write our application</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Core-aspects-of-server" title="Core aspects of server" >Core aspects of server</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-for-building-a-real-time-SignalR-monitoring-panel-with-AngularJS" title="FAQ (FAQ) for building a real-time SignalR monitoring panel with AngularJS" >FAQ (FAQ) for building a real-time SignalR monitoring panel with AngularJS</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-set-SignalR-in-AngularJS" title="How to set SignalR in AngularJS? " >How to set SignalR in AngularJS? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-deal-with-connection-errors-in-SignalR" title="How to deal with connection errors in SignalR? " >How to deal with connection errors in SignalR? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Can-I-use-SignalR-with-other-JavaScript-frameworks" title=" Can I use SignalR with other JavaScript frameworks? " > Can I use SignalR with other JavaScript frameworks? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-use-SignalR-to-send-messages-from-server-to-client" title="How to use SignalR to send messages from server to client? " >How to use SignalR to send messages from server to client? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-protect-my-SignalR-application" title="How to protect my SignalR application? " >How to protect my SignalR application? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-deal-with-disconnection-in-SignalR" title="How to deal with disconnection in SignalR? " >How to deal with disconnection in SignalR? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Can-I-use-SignalR-on-a-non-NET-server" title=" Can I use SignalR on a non.NET server? " > Can I use SignalR on a non.NET server? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-test-my-SignalR-application" title="How to test my SignalR application? " >How to test my SignalR application? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Can-I-use-SignalR-in-my-mobile-app" title="Can I use SignalR in my mobile app? " >Can I use SignalR in my mobile app? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#How-to-extend-my-SignalR-application" title="How to extend my SignalR application? " >How to extend my SignalR application? </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/js-tutorial.html"
class="phpgenera_Details_mainL1a">JS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Build a Real-time SignalR Dashboard with AngularJS</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Build a Real-time SignalR Dashboard with AngularJS</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://miracleart.cn/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://miracleart.cn/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>Build a real-time service monitoring panel! </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 ">Our service monitoring panel will display real data in real time. It will show us what is happening on servers and microservices in a nearly real-time, asynchronous, non-blocking way. </p>
<p>Click here to view the full client example. </p>
<p>Watch using D3.js to visualize data and explain your data in 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="">Watch this course Watch this course Showcase the server demonstration here. </p>
<p> We will use the AngularJS framework and many cool real-time charts and a lot of real-time data to build a simplified version of this monitoring panel. We will also build our services using the SignalR and Web API library of .NET 4.5. </p>
<h2 id="Key-Points">Key Points</h2>
<ul>
<li>Use AngularJS and SignalR to create a real-time monitoring panel that displays server and microservice activity asynchronously and non-blocking. </li>
<li> Set up your project with plain text files or Visual Studio, with dependencies including AngularJS, jQuery, Bootstrap, SignalR, and various chart libraries such as D3.js and Epoch. </li>
<li>Implement SignalR center on the server side to manage real-time data transmission, leverage .NET's ability to handle asynchronous requests and push notifications to clients. </li>
<li>Develop AngularJS services and controllers to process data received from SignalR centers, and update the UI in real time to reflect changes in server performance metrics. </li>
<li>Integrate diagram solutions such as ng-epoch and n3-pie to visually represent data, enhancing the interactivity and user engagement of the monitoring panel. </li>
</ul>
<h2 id="Technical-Architecture">Technical Architecture</h2>
<h3 id="Client">Client</h3>
<p>AngularJS enforces good application development practices out of the box. Everything is injected, which means the dependencies are low in coupling. Additionally, Angular has good separation between view, model and controller. </p>
<p>Angular adds .NET here, allowing server-side code to be kept compact, manageable and testable. Server-side code is only used to take advantage of its advantages - to carry out heavy processing. </p>
<h3 id="Server-side">Server side</h3>
<p>Using SignalR with .NET 4.5's Web API is very similar to using Node.js with Socket.IO and allows the same type of non-blocking, asynchronous push from the server to the subscription client. SignalR uses WebSockets at the bottom, but because it abstracts communication, when running inside Angular it falls back to any technology supported by the client browser. (For example, for older browsers, it may fall back to long polling.) </p>
<p>In addition, with the magic of dynamic tags and Json.NET, the .NET framework regards JavaScript as a first-class citizen. In fact, using Web API and SignalR technology through JavaScript is usually easier than through native .NET clients because they are built with JavaScript in mind. </p>
<h2 id="Core-content">Core content</h2>
<h3 id="Start-Settings">Start Settings</h3>
<p>All AngularJS code used in this tutorial can be found here. </p>
<p>I will cover how to create it using your favorite text editor and plain folders as well as Visual Studio, depending on the tool that creates the project. </p>
<h3 id="Set-with-plain-text-files">Set with plain text files</h3>
<p>Folder and file structure are as follows: </p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<h3 id="Main-dependencies">Main dependencies</h3>
<p>You need to download the following file: </p>
<ul>
<li>jQuery (select the link "Download compressed production jQuery 2.1.1") </li>
<li>AngularJS (click on the large "Download" option and click the latest version of Angular 1.3) </li>
<li>Bootstrap (click the "Download Bootstrap" option) </li>
<li>SignalR (click the "Download ZIP" button on the right) </li>
<li>D3.js (click the "d3.zip" link in the middle of the page) </li>
<li>Epoch (click "Download v0.6.0 link") </li>
<li>ng-epoch (click the "Download ZIP" button on the right) </li>
<li>n3-pie (click the "Download ZIP" button on the right) </li>
</ul>
<p>In our Scripts folder, we need: </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>In our Content folder: </p>
<ul>
<li>bootstrap.min.css</li>
<li>epoch.min.css</li>
</ul>
<h3 id="Setting-with-Visual-Studio">Setting with Visual Studio</h3>
<p> If you think the text file is too simple, it is very easy to set up through Visual Studio. </p>
<p>Simply set up an empty web application by going to the file -> Create a new -> project and selecting Web as the template type. </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 "> Then just right-click on the project, go to the Manage Nuget package, search and download jQuery, AngularJS, Bootstrap, D3 and SignalR JavaScript clients. </p>
<p>After downloading and installing these, you should see them in the Scripts and Contents folders. Also, under the installed Nuget package, you will see the following: </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 "> Finally, Nuget does not contain Epoch, ng-epoch, and n3 chart libraries, so you need to add them manually. Just follow the steps detailed in the previous section to get these libraries. </p>
<h2 id="Let-s-write-our-application">Let's write our application</h2>
<p>Now we are ready to write some code. </p>
<p>First, let's create our basic index.html file, which will hold our Angular JavaScript code. </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>There are some things to pay attention to. First, we added all dependencies so that they load. Second, we reference some new files that do not exist yet (all files in the app folder). We will write these files next. </p>
<p>Let's go to our app folder and create our app.js file. This is a very simple file. </p><pre class="brush:php;toolbar:false"><code>root
app (Angular應用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p>This file does a few things for us. It sets up our main application module angularServiceDashboard and injects two external references - ng.epoch (which is our Epoch.js Angular directive) and n3-pie-chart (which is a structure made for Angular Good chart library). </p>
<p> If you noticed, we also injected a value into the backendServerUrl, which is of course hosted elsewhere, and we plan to use it here. </p>
<p>Let's create a service factory class that will bind to the server's URL. This will be the services.js file referenced in our HTML, which will go to the app folder: </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> This code uses the popular on and off (no need for off here) subscription mode and encapsulates all communication with SignalR of our application by using the Angular factory. </p>
<p> This code may look a little overwhelming at first glance, but you will understand it better when we build the controller. All it does is get the URL and SignalR center name of the backend SignalR server. (In SignalR, you can use multiple hubs in the same server to push data.) </p>
<p> In addition, this code allows the SignalR server (located in some box elsewhere) to call our application via the on method. It allows our application to call functions inside the SignalR server through the invoke method. </p>
<p>Next, we need our controller, which will bind our data from the service to our scope. Let's create a file named controllers.js in our app folder. </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>This controller does something here. It creates our Angular service object and binds it to a callback function so that the server calls something in our controller. </p>
<p> You will see that every time the server calls back us, we will iterate over the JSON array returned by the server. Then we have a switch statement for each performance type. Now we will set the RAM and then go back and fill the rest. </p>
<p> As for our instructions, we actually only need one Epoch chart for us. We will use an open source directive called ng-epoch.js which we have referenced in our index.html stub file. </p>
<p> We can split all these charts into different instructions, use some templates and use UI-Router, but for the sake of simplicity of this tutorial, we will put all the views in our index.html file. </p>
<p>Now let's add our view to the index.html file. We can do this by adding the following content under the body tag: </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> This will simply create a location that allows the server to push the RAM data back. The data will first enter our service, then enter the controller, and finally enter the view. </p>
<p>It should look like this: </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 " /> Now let's add some charts, which is exactly what we really want to do. We will add a variable named timestamp to the epoch.js timeline. We will also add an array called chartEntry which we will bind to our epoch.ng directive. </p>
<pre class="brush:php;toolbar:false"><code>root
app (Angular應用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p> Then let's map the data in the switch statement and add the remaining required epoch.js data items. Of course, we can break it down further (for example, using more functions and filters), but for the sake of simplicity of this tutorial, we will keep it simple. </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>Our controller looks more complete. We have added a realtimeAreaFeed to the scope, which we will bind to our view through the ng-epoch directive, and we have also added areaAxes in the scope, which determines the layout of the area graph. </p>
<p>Now let's add the directive to index.html and display the incoming CPU value data: </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>chart-class refers to the color scheme of D3.js, chart-height is what you guessed, chart-stream is the data returned from the SignalR server. </p>
<p>With it, we should see the chart appear in real time: </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 " /> Now let's connect a large number of data points to this chart and add another chart from the n3-pie framework (because who doesn't like pie charts!). </p>
<p>To add a pie chart from the n3-pie framework, just add the following to our controller: </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> Of course, this value will be updated by the SignalR server. You can see this in the complete code of our controller. </p>
<p>We should also take a moment to think about the full code of our view. </p>
<p>We should see the following data on the screen: </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 " />We have seen that Angular can connect to SignalR very easily - just insert an endpoint in an AngularJS service or factory. AngularJS factory is an encapsulation mechanism that communicates with SignalR. After "combining", who knows that AngularJS and .NET will work together so perfectly? </p>
<h2 id="Core-aspects-of-server">Core aspects of server</h2>
<p>I will introduce some .NET code that allows this communication on the backend. (You can find the source code here.) </p>
<p>First, to start building server code, you need to run SignalR in your Visual Studio solution. To do this, just follow the excellent tutorials on ASP.NET to run the basic SignalR solution. (This is the easiest.)</p>
<p>After running, change the C# Hub class to the following: </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>After changing the Hub class, Visual Studio will report an error, you need to add a performance model (due to Json.NET, it will automatically convert to JSON when the server pushes): </p><pre class="brush:php;toolbar:false"><code>root
app (Angular應用程序特定的JavaScript)
Content (CSS等)
Scripts (引用的JavaScript等)
...
index.html</code></pre>
<p>JsonProperty metadata just tells Json.NET to automatically convert property names to lowercase when converting to JSON for this model. JavaScript likes lowercase. </p>
<p> Let's add a PerformanceEngine class that will push real performance data to any listening client via SignalR. The engine sends these messages to any listening client via SignalR through an asynchronous background thread. </p>
<p> Due to its length, you can find the code in our GitHub repository. </p>
<p>This code basically pushes a series of performance metrics to any subscribed client in each while iteration. These performance metrics are injected into the constructor. The speed of push from the server is set on the constructor parameter pollIntervalMillis. </p>
<p> Note that this will work well if you use OWIN as self-hosting to host SignalR, and it should work well if you use web worker threads. </p>
<p>The last thing to do is of course start the background thread somewhere in the OnStart() or Startup class of the 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>The two lines of code that start the background thread (as you guessed) are where we instantiate PerformanceEngine and call OnPerformanceMonitor(). </p>
<p> Now, I know you might think I'm randomizing data from the server, which is the fact. But to push real metrics, just use the System.Diagnostics library and the PerformanceCounter provided by Windows. I'm trying to keep it simple, but this is what the code looks like: </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>We have learned how to use SignalR data through Angular, and we have connected that data to the real-time charting framework on the Angular side. </p>
<p>The demo of the final version of the client is shown here, from which you can get the 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 ">The demo of the final version of the server is shown here, and you can get the code from here. </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 ">I hope you enjoy this walkthrough. If you have tried something similar, please let us know in the comments! </p>
<h2 id="FAQ-FAQ-for-building-a-real-time-SignalR-monitoring-panel-with-AngularJS">FAQ (FAQ) for building a real-time SignalR monitoring panel with AngularJS</h2>
<h3 id="How-to-set-SignalR-in-AngularJS">How to set SignalR in AngularJS? </h3>
<p> Setting up SignalR in AngularJS involves several steps. First, you need to install the SignalR library using NuGet or npm. After installation, you can create a new SignalR center on the server. This center will be responsible for sending and receiving messages. On the client, you need to reference the SignalR JavaScript library and create a connection to your center. You can then start the connection and define the function that handles incoming messages. </p>
<h3 id="How-to-deal-with-connection-errors-in-SignalR">How to deal with connection errors in SignalR? </h3>
<p>SignalR provides a built-in mechanism for handling connection errors. You can use the .error() function on the central connection to define a callback function that will be called when an error occurs. This callback function can display an error message to the user or try to reconnect to the center. </p>
<h3 id="Can-I-use-SignalR-with-other-JavaScript-frameworks"> Can I use SignalR with other JavaScript frameworks? </h3>
<p>Yes, SignalR can be used with any JavaScript framework that supports AJAX and WebSockets. This includes popular frameworks such as React, Vue.js, and Angular. You just need to include the SignalR JavaScript library in your project and create a central connection just like you would in any other JavaScript application. </p>
<h3 id="How-to-use-SignalR-to-send-messages-from-server-to-client">How to use SignalR to send messages from server to client? </h3>
<p>To send messages from the server to the client, you can use the Clients property of the center. This property provides a method for sending messages to all connected clients, specific clients, or client groups. You can call these methods from any part of the server code to send real-time updates to your client. </p>
<h3 id="How-to-protect-my-SignalR-application">How to protect my SignalR application? </h3>
<p>SignalR provides several options to protect applications. You can use the [Authorize] property to restrict access to your center and center methods. You can also specify a custom authorizer for your hub using the MapHubs() method in the Global.asax file. Additionally, you can use SSL to encrypt SignalR traffic and prevent eavesdropping. </p>
<h3 id="How-to-deal-with-disconnection-in-SignalR">How to deal with disconnection in SignalR? </h3>
<p>SignalR automatically handles disconnection and attempts to reconnect. However, you can also manually handle disconnection using the .disconnected() function on the central connection. This function allows you to define a callback function that will be called when the connection is lost. </p>
<h3 id="Can-I-use-SignalR-on-a-non-NET-server"> Can I use SignalR on a non.NET server? </h3>
<p>SignalR is a .NET library designed to be used with .NET servers. However, SignalR can be used on non-.NET servers by using compatible WebSocket libraries. You need to implement the SignalR protocol on the server and handle the connection and messaging logic yourself. </p>
<h3 id="How-to-test-my-SignalR-application">How to test my SignalR application? </h3>
<p>You can test your SignalR application using tools like Postman or Fiddler and send HTTP requests to your center and verify the response. You can also write unit tests for your central methods and client functions. </p>
<h3 id="Can-I-use-SignalR-in-my-mobile-app">Can I use SignalR in my mobile app? </h3>
<p>Yes, you can use SignalR in your mobile app. The SignalR JavaScript library can be used in hybrid mobile applications built with Cordova or Ionic. For native mobile apps, both iOS and Android provide SignalR clients. </p>
<h3 id="How-to-extend-my-SignalR-application">How to extend my SignalR application? </h3>
<p>SignalR provides several options to extend the application. You can use Azure SignalR service, a fully managed service that handles all SignalR connections for you. You can also use the backend, which is a software layer for distributing messages between multiple servers. </p><p>The above is the detailed content of Build a Real-time SignalR Dashboard with AngularJS. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/article.html">Show More</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>Hot AI Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ai">Show More</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>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/article.html">Show More</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>Hot Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" 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 Chinese version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/121" title="Zend 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="Zend Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/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://miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" 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 Mac version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ai">Show More</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>Hot Topics</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</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>8636</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</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>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</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>1725</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</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>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</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>1440</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/faq/zt">Show More</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://miracleart.cn/faq/1796822063.html" title="Java vs. JavaScript: Clearing Up the Confusion" 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/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs. JavaScript: Clearing Up the Confusion" />
</a>
<a href="http://miracleart.cn/faq/1796822063.html" title="Java vs. JavaScript: Clearing Up the Confusion" class="phphistorical_Version2_mids_title">Java vs. JavaScript: Clearing Up the Confusion</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796821632.html" title="Javascript Comments: short explanation" 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/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Javascript Comments: short explanation" />
</a>
<a href="http://miracleart.cn/faq/1796821632.html" title="Javascript Comments: short explanation" class="phphistorical_Version2_mids_title">Javascript Comments: short explanation</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span>
<p class="Articlelist_txts_p">JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796827639.html" title="How to work with dates and times in 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/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to work with dates and times in js?" />
</a>
<a href="http://miracleart.cn/faq/1796827639.html" title="How to work with dates and times in js?" class="phphistorical_Version2_mids_title">How to work with dates and times in js?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:27 AM</span>
<p class="Articlelist_txts_p">The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796822037.html" title="JavaScript vs. Java: A Comprehensive Comparison for Developers" 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/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs. Java: A Comprehensive Comparison for Developers" />
</a>
<a href="http://miracleart.cn/faq/1796822037.html" title="JavaScript vs. Java: A Comprehensive Comparison for Developers" class="phphistorical_Version2_mids_title">JavaScript vs. Java: A Comprehensive Comparison for Developers</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span>
<p class="Articlelist_txts_p">JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796828200.html" title="Why should you place tags at the bottom of the ?" 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/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Why should you place tags at the bottom of the ?" />
</a>
<a href="http://miracleart.cn/faq/1796828200.html" title="Why should you place tags at the bottom of the ?" class="phphistorical_Version2_mids_title">Why should you place tags at the bottom of the ?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:22 AM</span>
<p class="Articlelist_txts_p">PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796822137.html" title="JavaScript: Exploring Data Types for Efficient Coding" 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/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript: Exploring Data Types for Efficient Coding" />
</a>
<a href="http://miracleart.cn/faq/1796822137.html" title="JavaScript: Exploring Data Types for Efficient Coding" class="phphistorical_Version2_mids_title">JavaScript: Exploring Data Types for Efficient Coding</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:46 AM</span>
<p class="Articlelist_txts_p">JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796828191.html" title="What is event bubbling and capturing in the 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/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is event bubbling and capturing in the DOM?" />
</a>
<a href="http://miracleart.cn/faq/1796828191.html" title="What is event bubbling and capturing in the DOM?" class="phphistorical_Version2_mids_title">What is event bubbling and capturing in the DOM?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span>
<p class="Articlelist_txts_p">Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/faq/1796820615.html" title="What's the Difference Between Java and 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/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What's the Difference Between Java and JavaScript?" />
</a>
<a href="http://miracleart.cn/faq/1796820615.html" title="What's the Difference Between Java and JavaScript?" class="phphistorical_Version2_mids_title">What's the Difference Between Java and JavaScript?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 17, 2025 am 09:17 AM</span>
<p class="Articlelist_txts_p">Java and JavaScript are different programming languages. 1.Java is a statically typed and compiled language, suitable for enterprise applications and large systems. 2. JavaScript is a dynamic type and interpreted language, mainly used for web interaction and front-end development.</p>
</div>
</div>
<a href="http://miracleart.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://miracleart.cn/about/us.html">About us</a>
<a href="http://miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://miracleart.cn/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://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="w6cy6" class="pl_css_ganrao" style="display: none;"><xmp id="w6cy6"></xmp><optgroup id="w6cy6"></optgroup><tbody id="w6cy6"><object id="w6cy6"><th id="w6cy6"></th></object></tbody><kbd id="w6cy6"></kbd><blockquote id="w6cy6"><pre id="w6cy6"><wbr id="w6cy6"></wbr></pre></blockquote><nav id="w6cy6"></nav><button id="w6cy6"></button><em id="w6cy6"><xmp id="w6cy6"><sup id="w6cy6"></sup></xmp></em><small id="w6cy6"></small><tfoot id="w6cy6"></tfoot><dd id="w6cy6"></dd><center id="w6cy6"><wbr id="w6cy6"><strike id="w6cy6"></strike></wbr></center><pre id="w6cy6"></pre><fieldset id="w6cy6"></fieldset><samp id="w6cy6"><tbody id="w6cy6"><dd id="w6cy6"></dd></tbody></samp><nav id="w6cy6"></nav><kbd id="w6cy6"></kbd><ul id="w6cy6"></ul><xmp id="w6cy6"><strike id="w6cy6"><td id="w6cy6"></td></strike></xmp><input id="w6cy6"></input><table id="w6cy6"><tr id="w6cy6"><button id="w6cy6"></button></tr></table><dl id="w6cy6"><wbr id="w6cy6"><strong id="w6cy6"></strong></wbr></dl><small id="w6cy6"><nav id="w6cy6"><li id="w6cy6"></li></nav></small><nav id="w6cy6"></nav><option id="w6cy6"></option><th id="w6cy6"></th><tr id="w6cy6"></tr><menu id="w6cy6"></menu><bdo id="w6cy6"></bdo><dfn id="w6cy6"></dfn><strike id="w6cy6"></strike><noframes id="w6cy6"></noframes><dl id="w6cy6"></dl><s id="w6cy6"></s><cite id="w6cy6"></cite><xmp id="w6cy6"></xmp><sup id="w6cy6"></sup><blockquote id="w6cy6"></blockquote><pre id="w6cy6"></pre><optgroup id="w6cy6"></optgroup><xmp id="w6cy6"><dfn id="w6cy6"><td id="w6cy6"></td></dfn></xmp><dd id="w6cy6"><tr id="w6cy6"><td id="w6cy6"></td></tr></dd><tbody id="w6cy6"></tbody><s id="w6cy6"></s><cite id="w6cy6"><s id="w6cy6"><code id="w6cy6"></code></s></cite><small id="w6cy6"></small><tfoot id="w6cy6"><dd id="w6cy6"><cite id="w6cy6"></cite></dd></tfoot></div>
</html>