• NodeRed系列——websoket展示数据

    本文使用nodered创建websocket连接，通过http网页websocket连接nodered展示数据，最后通过网页发送websocket消息给nodered

    本文在以下作者内容上进行修改通过Node-Red在本地网页上实现PLC数据可视化（MySQL+HTML+JavaScript+CSS+WebSocket）_香风冰织的博客-CSDN博客_plc可视化

    目录

    一 配置结果

    二 具体配置

    1. 在nodered配置websocket out给所有客户端发送websocket消息

     2. 创建网页websocket连接nodered，展示数据

    3. nodered配置websocket in接收发送的消息并显示

    一 配置结果

    在nodered配置如下：http://localhost:1880/

    结果如下

    (1)http://localhost:1880/hello

    （2）使用http://www.jsons.cn/websocket/

    连接nodered的websocket效果，自动获取到客户端消息如下

    （3）使用网页客户端发送websocket消息

    nodered显示如下

    二 具体配置

    1. 在nodered配置websocket out给所有客户端发送websocket消息

    （1）inject节点

    （2）random

    新增random插件

    拖拽random控件到工作区，设置From最小值和To最大值

    （3）使用websocket out节点，类型选择连接，url填写ws/request 

    (4) debug节点正常配置

    配置完成后即可使用http://www.jsons.cn/websocket/

    进行连接测试，地址栏输入：ws://localhost:1880/ws/request

     2. 创建网页websocket连接nodered，展示数据

    （1）配置http in进行创建get请求

    （2） 使用template节点创建网页模版 

    代码参考通过Node-Red在本地网页上实现PLC数据可视化（MySQL+HTML+JavaScript+CSS+WebSocket）_香风冰织的博客-CSDN博客_plc可视化

    具体内容

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>数据可视化title>
    7.  
    8.     
    9.     <style>
    10.         #login_click {
    11.             margin-top: 40px;
    12.             height: 40px;
    13.             margin-left: 200px;
    14.         }
    15.  
    16.         #login_click a {
    17.             text-decoration: none;
    18.             background: #67e0e3;
    19.             color: #fd666d;
    20.  
    21.             padding: 10px 30px 10px 30px;
    22.             font-size: 16px;
    23.             font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
    24.             font-weight: bold;
    25.             border-radius: 30px;
    26.  
    27.             -webkit-transition: all linear 0.30s;
    28.             -moz-transition: all linear 0.30s;
    29.             transition: all linear 0.30s;
    30.  
    31.         }
    32.  
    33.         #login_click a:hover {
    34.             background: #37a2da;
    35.         }
    36.     style>
    37.  
    38.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js">script>
    39.  
    40.     <script type="text/javascript">
    41.         // WebSocket通信代码
    42. 		var temperature = 0;	//定义温度全局变量
    43. 		function WebSocketTest()
    44. 		{
    45. 			if ("WebSocket" in window)
    46. 			{
    47. 				// 浏览器支持 WebSocket
    48. 				alert("调用成功!");
    49. 	         
    50. 				// 连接WebSocket
    51. 				var ws = new WebSocket("ws://localhost:1880/ws/request");
    52. 	      
    53. 				   
    54. 				// 接收数据
    55. 				ws.onmessage = function (evt) 
    56. 				{
    57. 					// alert("数据已接收...");
    58. 					var data = JSON.parse(evt.data);
    59. 				
    60. 					 temperature = data;
    61. 					 console.log(temperature);
    62. 				};
    63. 	          
    64. 				
    65. 			}	      
    66. 			else
    67. 			{
    68. 				// 浏览器不支持 WebSocket
    69. 				alert("您的浏览器不支持 WebSocket!");
    70. 			}
    71. 		}
    72.     script>
    73. head>
    74.  
    75. <body>
    76.     
    77.     <div id="main" style="width: 600px;height:400px;">div>
    78.     <script>
    79.         var mycharts = echarts.init(document.getElementById("main"));		  
    80. 			var option = {
    81. 			  series: [
    82. 			    {
    83. 			      type: 'gauge',  // 图表类型，这里表示仪表盘
    84. 			      axisLine: {   
    85. 			        lineStyle: {
    86. 			          width: 30,  // 仪表盘外圈的宽度为30px
    87. 			          color: [
    88. 			            [0.3, '#67e0e3'],  // 到30%的颜色
    89. 			            [0.7, '#37a2da'],  // 到70%的颜色
    90. 			            [1, '#fd666d']    // 到100%的颜色
    91. 			          ]
    92. 			        }
    93. 			      },
    94. 			      pointer: {  // 仪表盘指针设置
    95. 			        itemStyle: {
    96. 			          color: 'auto'  // 指针颜色，此处是自动，根据指向的范围变相应的颜色
    97. 			        }
    98. 			      },
    99. 			      axisTick: { // 设置仪表盘上的刻度短线
    100. 			        distance: -30,  // 刻度短线的位置 
    101. 			        length: 8,     // 刻度短线的长度 
    102. 			        lineStyle: {
    103. 			          color: '#fff',  //刻度短线的颜色
    104. 			          width: 2       //刻度短线的宽度
    105. 			        }
    106. 			      },
    107. 			      splitLine: {   // 分割线设置，如： 0-10和10-20之间的分割线
    108. 			        distance: -30, //分割线位置
    109. 			        length: 30,    // 分割线长度
    110. 			        lineStyle: {
    111. 			          color: '#fff', // 分割线颜色
    112. 			          width: 4  // 分割线宽度
    113. 			        }
    114. 			      },
    115. 			      axisLabel: {     // 仪表盘里圈数字设置
    116. 			        color: 'auto',  // 设置颜色，此处是：自动
    117. 			        distance: 40,  //  里圈数字的位置
    118. 			        fontSize: 10   // 里圈数字的大小
    119. 			      },
    120. 			      detail: {
    121. 			        valueAnimation: true,    // 仪表盘显示的值是否有动画效果
    122. 			        formatter: '{value} ℃',   // 仪表盘显示的值和单位
    123. 			        color: 'auto'   // 仪表盘显示的值数字的颜色
    124. 			      },
    125. 			      data: [
    126. 			        {
    127. 			          value: temperature  // 当前仪表盘数值，实际开发中，这里的值是动态变化的。比如从传感器采集而来
    128. 			        }
    129. 			      ]
    130. 			    }
    131. 			  ]
    132. 			};
    133. 		 mycharts.setOption(option);
    134. 		 
    135. 		 // 每一秒刷新一次表盘
    136. 		setInterval(function () {
    137. 		   mycharts.setOption({
    138. 		     series: [
    139. 		       {
    140. 		         data: [
    141. 		           {
    142. 		             value: temperature
    143. 		           }
    144. 		         ]
    145. 		       }
    146. 		     ]
    147. 		   });
    148. 		 }, 1000);
    149.     script>
    150.  
    151.     
    152.     <div id="login_click">
    153.         <a href="javascript:WebSocketTest()">连接 WebSocketa>
    154.     div>
    155.  
    156. body>
    157.  
    158. html>

     （3）配置http response节点

    配置完成后，打开浏览器 输入http://localhost:1880/hello

    点击连接websocket，指针随值转动 

    3. nodered配置websocket in接收发送的消息并显示

    （1）配置websocket in

    选择类型为连接，URl填为ws/request 

    (2) debug输出配置

     配置完成后，在json网页发送websocket消息，debug将接收到发送的内容

    http://www.jsons.cn/websocket/

  • 相关阅读:
    1002 A+B for Polynomials
    645. 错误的集合
    数据的存储--Redis缓存存储
    什么是堆栈和队列？如何实现它们？
    IDA报错decomplication failure: too big function的解决方案
    第三章 常用布局
    github使用技巧
    解决mybatis用Map返回的字段全变大写的问题
    ATM机模拟系统
    多线程之线程池
  • 原文地址：https://blog.csdn.net/zhaolulu916/article/details/126692612