网络：W5500用浏览器配置设备
1.背景
嵌入式端使用网络通信后，可以在PC端进行设备配置。方法有二：1）上位机配置；2）浏览器配置。
上位机配置可以把设置和测量作为一体，功能可以很强大，体验较好。
浏览器配置就是在电路板上搭载一个嵌入式的web服务器，所以功能一般的很有限。
特定情况下，搭载一个浏览器设置接口，可以大大方便设备的使用，毕竟是个电脑就肯定有浏览器的。
2.W5500浏览器配置例程分析
1）界面如下
2）参数显示
上面显示了HTTP访问期间的三次握手和四次挥手。
刷新一次网页，为什么会出现2次HTTP get请求呢？
从第二次请求内容可以看出，请求一个w5500.js.
查看服务器端源码，可以看出:
如果请求是 http://192.168.1.90/ , 则回复INDEX_HTML，这是一个宏定义，是html格式的字符串。
如果请求是 http://192.168.1.90/w5500.js , 则回复json_callback，这个callback以字符串格式发送到客户端。
case METHOD_GET:
name = http_request->URI;
if(strcmp(name,"/index.htm")== || strcmp(name,"/")== || (strcmp(name,"/index.html")==))
{
file_len = strlen(INDEX_HTML);
make_http_response_head((uint8*)http_response, PTYPE_HTML,file_len);
send(s,http_response,strlen((char const*)http_response));
send_len=;
while(file_len)
{
if(file_len>)
{
if(getSn_SR(s)!=SOCK_ESTABLISHED)
{
return;
}
send(s, (uint8 *)INDEX_HTML+send_len, );
send_len+=;
file_len-=;
}
else
{
send(s, (uint8 *)INDEX_HTML+send_len, file_len);
send_len+=file_len;
file_len-=file_len;
}
}
}
else if(strcmp(name,"/w5500.js")==)
{
memset(tx_buf,,MAX_URI_SIZE);
make_basic_config_setting_json_callback(tx_buf,ConfigMsg);
sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf);
send(s, (u_char *)http_response, strlen((char const*)http_response));
}
break;
HTML源码的c定义格式为：
#define INDEX_HTML "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\'>"\
"<html>"\
"<head>"\
"<title>W5500EVB - HTTP SERVER</title>"\
"<style type='text/css'>"\
"body {text-align:left; background-color:/*#ffc1e0*/#c0deed;font-family:Verdana;}"\
"#main {margin-right:auto;margin-left:auto;margin-top:30px;}"\
"label{display:inline-block;width:150px;}"\
"#main h3{color:#66b3ff; text-decoration:underline;}"\
"</style>"\
"<script>"\
"function $(id) { return document.getElementById(id); };"\
"function settingsCallback(o) {"\
"if ($('txtVer')) $('txtVer').value = o.ver;"\
"if ($('txtMac')) $('txtMac').value = o.mac;"\
"if ($('txtIp')) $('txtIp').value = o.ip;"\
"if ($('txtSub')) $('txtSub').value = o.sub;"\
"if ($('txtGw')) $('txtGw').value = o.gw;"\
"};"\
"</script>"\
"</head>"\
"<body>"\
"<div id='main'>"\
"<div style='background:snow; display:block;padding:10px 20px;'>"\
"<h3>Device Settings</h3>"\
"<form id='frmSetting' method='POST' action='config.cgi'>"\
"<p><label for='txtIp'>Firmware version:</label><input type='text' id='txtVer' name='ver' size='16' disabled='disabled' /></p>"\
"<p><label for='txtIp'>MAC address:</label><input type='text' id='txtMac' name='mac' size='16' disabled='disabled' /></p>"\
"<p><label for='txtIp'>IP address:</label><input type='text' id='txtIp' name='ip' size='16' /></p>"\
"<p><label for='txtSub'>Subnet mask:</label><input type='text' id='txtSub' name='sub' size='16' /></p>"\
"<p><label for='txtGw'>Default gateway:</label><input type='text' id='txtGw' name='gw' size='16' /></p>"\
"<p><input type='submit' value='Save Settings and Reboot' /></p>"\
"</form>"\
"</div>"\
"</div>"\
"<div style='margin:5px 5px;'>"\
"©Copyright 1998-2013 by WIZnet Team"\
"</div>"\
"<script type='text/javascript' src='w5500.js'></script>"\
"</body>"\
"</html>"
这看起来有点费力，从网页端查看格式为如下。
可以看到，这个页面里面内嵌了js脚本。所以在加载完这段html之后，浏览器会解析脚本发送第二次请求：<script src="w5500.js" type="text/javascript"></script>
这个请求被W5500服务器端接收到后，指向上面的else if(strcmp(name,"/w5500.js")==0)语句，然后执行make_basic_config_setting_json_callback(tx_buf,ConfigMsg);
此时，就通过CGI接口，向客户端推送数据。所以浏览器上第一次刷新出来的显示框就会出现数值。这就是用网页显示系统配置参数的过程。
3）参数设置
从html页面可以看到，按钮会触发config.cgi请求。把设置的参数POST给服务器。
服务器端接收到后，进行解析，其实就是字符串分析，提取出ip,mac,gw等字符串，然后获得配置的参数。
case METHOD_POST:
mid(http_request->URI, "/", " ", req_name);
if(strcmp(req_name,"config.cgi")==)
{
cgi_ipconfig(http_request);
make_cgi_response(,(int8*)ConfigMsg.lip,tx_buf); /*Éú³ÉÏìÓ¦µÄÎı¾²¿·Ö*/
sprintf((char *)http_response,"HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length:%d\r\n\r\n%s",strlen(tx_buf),tx_buf);
send(s, (u_char *)http_response, strlen((char *)http_response));
disconnect(s);
reboot_flag=;
return;
}
break;
服务器获取到参数后，写入到EEPROM完成参数配置。
网络：W5500用浏览器配置设备的更多相关文章
- 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器
网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 论述当下网络时间同步的重要性 北京华人开创科技发展有限公 ...
- NFS网络文件系统服务（配置实战）
NFS网络文件系统服务(实战) NFS(Network File System)即网络文件系统,它允许网络中的计算机之间通过TCP/IP网络共享资源.让不同的主机系统(NFS的客户端)可以透明地读写位 ...
- [Linux网络、命名空间、veth设备对、docker的host模式、container模式、none模式、brideg模式、网桥的增删查，容器与网桥的连接断开]
[Linux网络.命名空间.veth设备对.docker的host模式.container模式.none模式.brideg模式.网桥的增删查,容器与网桥的连接断开] 网络名称空间 为了支持网络协议栈的 ...
- Keepalived LVS-DR单网络双活双主配置模式
Keepalived LVS-DR单网络双活双主配置模式 Linux就该这么学 今天 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.LV ...
- 伪基站，卒于5G——本质上是基于网络和UE辅助的伪基站检测，就是将相邻基站的CI、信号强度等信息通过测量报告上报给网络，网络结合网络拓扑、配置信息等相关数据，对所有数据进行综合分析，确认在某个区域中是否存在伪基站
伪基站,卒于5G from:https://www.huxiu.com/article/251252.html?h_s=h8 2018-07-05 21:58收藏27评论6社交通讯 本文来自微 ...
- Red Hat 6.5 网络yum源的配置
第一次接触Linux系统,用虚拟机安装了一个rad hat6.5版本64位的,傻瓜式安装.安装好之后简单的写了一个C代码,进行gcc编译的时候,提示没有该命令,上网查找了一下说没有安装gcc编译器,用 ...
- 浏览器配置工具.bat
在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...
- chrome浏览器 配置开机启动全屏(看板app模式设置)
chrome浏览器 配置开机启动全屏(看板app模式设置) 1.下载安装chrome浏览器. 2.建立一个chrome浏览器的快键方式,右键打开属性,如下图: 3.将目标选项卡的值修改为:&q ...
- selenium--加载浏览器配置
前戏 在我们之前写的自动化脚本中,不知道大家有没有发现,每次打开的都是一个新的浏览器(相当于新安装的).但是有时候,我们想打开的是我们配置好的浏览器.我在之前的公司做web自动化的时候,由于我们的网站 ...
随机推荐
- 【BZOJ】1665: [Usaco2006 Open]The Climbing Wall 攀岩（spfa）
http://www.lydsy.com/JudgeOnline/problem.php?id=1665 这题只要注意到“所有的落脚点至少相距300”就可以大胆的暴力了. 对于每个点,我们枚举比他的x ...
- 【python】字符串编码问题
参考:http://blog.csdn.net/tingsking18/article/details/4033645 python内部的字符串是以unicode来编码 decode函数用来将其他编码 ...
- Asp.net控制Tomcat启动关闭的实现方法
一.场景 近日有个项目客户要求能自己配置相关权限.由于历史原因这个项目采用的是公司以前的权限系统.这个权限系统很强大,不过有个弊端,就是每增加一个权限菜单都要重启才能生效,不然就要等1天它缓存过期后才 ...
- [读书笔记]java核心技术
ps:有时间好好整理下格式.从别的编辑器拷贝过来啥都没了. ~~~~~~~~~~~~~~· 2.java程序设计环境 JDK 开发java使用的软件: JRE 运行java使用的软件: SE 用于桌面 ...
- Unittest框架概念
1.测试脚手架(test fixture): 测试准备前要做的工作和测试执行完后要做的工作(包括setUp()和tearDown()) 2.测试用例(test case): 最小的测试单元 3.测试套 ...
- Ruby on Rails 初次冲浪体验
为了更好的阅读体验,欢迎訪问 作者博客原文 Rails is a web application development framework written in the Ruby language. ...
- script跨域之360搜索
思考: 布局: 1,flex元素上下左右居中,内部元素横向排列: div{ /* 100vh = viewport height*/ display: flex; justify-content: c ...
- 【BZOJ5063】旅游 Splay
[BZOJ5063]旅游 Description 小奇成功打开了大科学家的电脑. 大科学家打算前往n处景点旅游,他用一个序列来维护它们之间的顺序.初 始时,序列为1,2,...,n. 接着,大科学家进 ...
- 【bzoj4518】[Sdoi2016]征途 斜率优化dp
原文地址:http://www.cnblogs.com/GXZlegend/p/6812435.html 题目描述 Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界 ...
- python框架Scrapy中crawlSpider的使用
一.创建Scrapy工程 #scrapy startproject 工程名 scrapy startproject demo3 二.进入工程目录,根据爬虫模板生成爬虫文件 #scrapy genspi ...