rt-thread0.4.0 javascript实现动态web刷新，每次仅仅传输动态变化数据

发布于 2014-04-08 23:53:50 浏览：5331 订阅该版

```#define true 1
#define false 0

#define MAX_CONNECTION 16
#define MAX_CONNECT_TIME CLOCKS_PER_SEC
#define READ_BUFFER_SIZE 4096
//包含javascript函数的html文本
const static char files_fun[] =
"<html> 
"
"  <head> 
"
"    <title>AJAX test</title> 
"
"  </head> 
"
"  <body> 
"
"    <script type="text/javascript"> 
"

"    function xml_http_post(url, data, callback) { 
"
"      var req = false; 
"
"      try { 
"
"        // Firefox, Opera 8.0+, Safari 
"
"        req = new XMLHttpRequest(); 
"
"      } 
"
"      catch (e) { 
"
"        // Internet Explorer 
"
"        try { 
"
"          req = new ActiveXObject("Msxml2.XMLHTTP"); 
"
"        } 
"
"        catch (e) {
"
"          try { 
"
"            req = new ActiveXObject("Microsoft.XMLHTTP");
"
"          }
"
"          catch (e) { 
"
"            alert("Your browser does not support AJAX!"); 
"
"            return false; 
"
"          } 
"
"        } 
"
"      } 
"
"      req.open("POST", url, true); 
"
"      req.responseType = "arraybuffer"; 
"
"      req.onreadystatechange = function() { 
"
"        if (req.readyState == 4) { 
"
"          callback(req); 
"
"        } 
"
"      } 
"
"      req.send(data); 
"
"    } 
"

"    function test_button() { 
"
"      var data = ''; 
"
"      xml_http_post("index.html", data, test_handle); 
"
"    } 
"

"    function test_handle(req) { 
"
"      var ab = req.response; 
"
"      var float32view = new Float32Array(ab); 
"
"      for (i = 0; i < 8; ++i) 
"
"      { "
"        var elem = document.getElementById('value' + (i + 1)); 
"
"        elem.innerHTML = float32view*.toFixed(3); 
"
"      } 
"
"    } 
"

"    var timer; 
"
"    function start_timer() { 
"
"      timer = setInterval("test_button();", 1000); 
"
"    } 
"

"    function stop_timer() { 
"
"      clearInterval(timer); 
"
"    } 
"

"  </script> 
"

"  <form name=test_form> 
"
"    <span id="value1"></span><br /> 
"  
"    <span id="value2"></span><br /> 
"
"    <span id="value3"></span><br /> 
"
"    <span id="value4"></span><br /> 
"
"    <span id="value5"></span><br /> 
"
"    <span id="value6"></span><br /> 
"
"    <span id="value7"></span><br /> 
"
"    <span id="value8"></span><br /> 
"
"    <input type=button onClick="start_timer();" value="start" title="start"> 
"
"    <input type=button onClick="stop_timer();" value="stop" title="stop"> 
"
"  </form> 
"
"</body> 
"
"</html> 
";

static float g_server_data[8];

typedef struct
{  // {{{
  char* data;
  long length;
}SMessage;  // }}}

const static char indexdata[] = "<html> 
    <head><title>A test page</title></head> 
    <body> 
    This is a "small" test page. 
    </body> 
    </html>";
const static char http_html_hdr[] = "HTTP/1.0 200 OK
Content-Type: text/html

";
const static char str_data[] = "1000"
                               "1001"
                               "1020"
                               "1300"
                               "1020"
                               "1001"
                               "1020"
                               "1300

static void process_connection(struct netconn *conn)
{
    struct netbuf *inbuf;
    char *rq;
    rt_err_t err;
    rt_uint16_t len;
	  void *pf;
	  char char_send[32];
	  long length;
    inbuf = netconn_recv(conn);
    netbuf_data(inbuf, (void**)&rq, &len);
	  
	  if(len > 3)
		{
       if(rq[0] == 'G' &&
          rq[1] == 'E' &&
          rq[2] == 'T' &&
          rq[3] == ' ')
			 {
        netconn_write(conn, http_html_hdr, sizeof(http_html_hdr), NETCONN_NOCOPY);
         netconn_write(conn, files_fun, sizeof(files_fun), NETCONN_NOCOPY);				
			 }
			 else
			 {
				 if(rq[0] == 'P' &&
            rq[1] == 'O' &&
            rq[2] == 'S' &&
            rq[3] == 'T')
				 {
					 int i = 0;
					 int j = 0;
					 length = 0;
           for (i = 0; i < 8; ++i)
           {
               g_server_data* += (i + 1) / 100.0;
						   pf = &g_server_data*;
						   for(j = 0; j < 4; j++)
						   {
						      char_send[i*4 + j] = *((char *)pf + j);
								  length ++;
							 }				   
           }
					 netconn_write(conn, char_send, length, NETCONN_NOCOPY);
				 }
			 
			 }
		}

netbuf_delete(inbuf);
}

void lw_thread(void* paramter)
{
    struct netconn *conn, *newconn;
    rt_err_t err;
    conn = netconn_new(NETCONN_TCP);
    netconn_bind(conn, NULL, 80);
    netconn_listen(conn);	
    while(1)
    {
        newconn = netconn_accept(conn);
        process_connection(newconn);
        netconn_delete(newconn);
    }
}

void websrv()
{
    rt_thread_t tid;

tid = rt_thread_create("websrv", lw_thread, RT_NULL,
        1024, 25, 5);
    if (tid != RT_NULL) rt_thread_startup(tid);
}
```
初始化好
```lwip_sys_init(void);
eth_system_device_init();
rt_hw_dm9000_init();```

后启动websrv()
动态实现的原来是先传送一个html的文本，这个文本含有一个javascript的函数函数，
这个javascript函数在web客户端运行后，会想向webserver端请求post数据，
webserver就回8个float类型的数据，这个8个float是随机生成的。

这个仅仅是个简单范例，在客户端运行的javascript仅仅发送了post，webserver就马上发送8个float，大家可以在实际的运用中完善数据验证。
![1.jpg](https://oss-club.rt-thread.org/uploads/2303_c1b4d1accd75e2140744028f8151cb67.jpg)

8 个回答

aozima 2014-04-09

调网络不抓包，调I2C等时序不上逻辑分析仪，就像电工不用万用表！多用整理的好的文字，比截图更省流量，还能在整理过程中思考。

geniusgogo 认证专家 2014-04-09

这家伙很懒，什么也没写！

xiao苦 2014-04-17

这家伙很懒，什么也没写！

leoluyi 2014-04-19

这家伙很懒，什么也没写！

[attach]2255[/attach]最新升级到rt-thread1.2.1，Lwip1.4.1，
在安富莱STM32F103ZE上现实，
单个连接运行24小时，数据稳定，
运行多个web连接的时候，很快就会挂掉，需要进一步修改代码才能实现稳定运行。

```
/**
 * RT-Thread Components Initialization
 */
void rt_components_init(void)
{
/*
#ifndef _MSC_VER
#if RT_DEBUG_INIT
	int result;
	const struct rt_init_desc *desc;

rt_kprintf("do components intialization.
");
	for (desc = &__rt_init_desc_rti_board_end; desc < &__rt_init_desc_rti_end; desc ++)
	{
		rt_kprintf("initialize %s", desc->fn_name);
		result = desc->fn();
		rt_kprintf(":%d done
", result);
	}
#else
    const init_fn_t *fn_ptr;

for (fn_ptr = &__rt_init_rti_board_end; fn_ptr < &__rt_init_rti_end; fn_ptr ++)
    {
        (*fn_ptr)();
    }
#endif
#else
*/		
#ifdef RT_USING_MODULE
    rt_system_module_init();
#endif

#ifdef RT_USING_FINSH
	/* initialize finsh */
	finsh_system_init();
	finsh_set_device(RT_CONSOLE_DEVICE_NAME);
#endif

#ifdef RT_USING_LWIP
  rt_hw_dm9000_init();
   
	/* initialize lwip stack */
	/* register ethernetif device */
	eth_system_device_init();
	
	/* re-init device driver */
  
	
	/* initialize lwip system */
	lwip_system_init();
	rt_kprintf("TCP/IP initialized!
");
#endif

#ifdef RT_USING_DFS
	/* initialize the device file system */
	dfs_init();

#ifdef RT_USING_DFS_ELMFAT
	/* initialize the elm chan FatFS file system*/
	elm_init();
#endif

#if defined(RT_USING_DFS_NFS) && defined(RT_USING_LWIP)
	/* initialize NFSv3 client file system */
	nfs_init();
#endif

#ifdef RT_USING_DFS_YAFFS2
	dfs_yaffs2_init();
#endif

#ifdef RT_USING_DFS_UFFS
	dfs_uffs_init();
#endif

#ifdef RT_USING_DFS_JFFS2
	dfs_jffs2_init();
#endif

#ifdef RT_USING_DFS_ROMFS
	dfs_romfs_init();
#endif

#ifdef RT_USING_DFS_RAMFS
	dfs_ramfs_init();
#endif

#ifdef RT_USING_DFS_DEVFS
	devfs_init();
#endif
#endif /* end of RT_USING_DFS */

#ifdef RT_USING_NEWLIB
	libc_system_init(RT_CONSOLE_DEVICE_NAME);
#else
	/* the pthread system initialization will be initiallized in libc */
#ifdef RT_USING_PTHREADS 
	pthread_system_init();
#endif
#endif

#ifdef RT_USING_RTGUI
	rtgui_system_server_init();
#endif

#ifdef RT_USING_USB_HOST
	rt_usb_host_init();
#endif
//#endif
}
```

andylauren 2014-05-26

这家伙很懒，什么也没写！

ljt8015 2014-05-27

这家伙很懒，什么也没写！

XML 技术及 Java Script 技术在网页中的使用

XML 文件其实就是一个标准的数据交换文件。在 Java Script 脚本中有专门解析 XML
文件的方法。这样就提供了一个浏览器与服务器之间进行数据的交互的简单办法。

动态数据交换，就是在浏览器访问网页时能够解析出 XML 文件的内容，在不刷新网页
的同时，每隔一段时间就进行一次 XML 文件加载和解析，这样只要 XML 内的内容一旦有
改变，网页中可以马上反应出来。
    在下面的实例中，每 100ms 就对 XML 文件加载和解析一次，实时刷新数据。如果
measrue02.xml 中的数据有改变，那么浏览器中可以 100ms 内更新过来。这样我们就可以把
AD 测量的值放入 measure02.xml 中，那么 AD 测量的数据就可以在网页上实时显示出来。
    注：在解析 XML 文件的过程中还解决了原来浏览器的限制，修改后可以支持绝大多数
的浏览器。
    measure02.xml

```
    <?xml version="1.0" encoding="gb2312"?>
    <measure>
       <ch_one>18.5</ch_one>
       <ch_two>21.5</ch_two>
       <ch_three>20.5</ch_three>
       <ch_four>19.5</ch_four>
    </measure>
```

measure02.html

```
<html>
<head>
<script type="text/javascript">

var xmlDoc;
function loadXML()
{
// 用于 IE 的代码：
if (window.ActiveXObject)
   {
   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async=false;
   xmlDoc.load("measure02.xml");
   getmessage();
   }
// 用于 Mozilla, Firefox, Opera, 等浏览器的代码：
else if (document.implementation &&
document.implementation.createDocument)
   {
   xmlDoc=document.implementation.createDocument("","",null);
   xmlDoc.load("measure02.xml");
   xmlDoc.onload=getmessage;
   }
else
   {
   alert('Your browser cannot handle this script');
   }
setTimeout("loadXML()",100);
}
    function getmessage()
    {
    document.getElementById("ch_one").innerHTML=
xmlDoc.getElementsByTagName("ch_one")[0].childNodes[0].nodeValue;
    document.getElementById("ch_two").innerHTML=
xmlDoc.getElementsByTagName("ch_two")[0].childNodes[0].nodeValue;
    document.getElementById("ch_three").innerHTML=
xmlDoc.getElementsByTagName("ch_three")[0].childNodes[0].nodeValue;
    document.getElementById("ch_four").innerHTML=
xmlDoc.getElementsByTagName("ch_four")[0].childNodes[0].nodeValue;
    }
    </script>
</head>

<body onload="loadXML()">
<h1>ARM9 远程实时测量技术</h1>
<form name="loandata">
       <table border="8">
            <tr><td colspan=3> <big> <b> 温度测量点(1-4): </b> </big> </td> </tr>
            <tr>
                 <td>1) </td>
                 <td> Channel one </td>
                 <td><span id="ch_one"> </span>℃</td>
            </tr>
<tr>
     <td>2) </td>
     <td> Channel two </td>
     <td><span id="ch_two"> </span>℃</td>
</tr>
<tr>
     <td>3)</td>
     <td> Channel three</td>
     <td><span id="ch_three"> </span>℃</td>
</tr>
<tr>
     <td>4)</td>
     <td> Channel four</td>
     <td><span id="ch_four"> </span>℃</td>
</tr>
</table>
</form>
</body>
</html>
```