中国自动化学会专家咨询工作委员会指定宣传媒体
免费注册 登录 广告服务 | 客服中心
您现在所在的是:

微软嵌入式

fluketop kollmorgen 抖音 西门子减速电机 德嘉 台达 英威腾 泓格论坛 西门子 我和LOGO!有个约会 FLIR红外热像论坛 【有奖活动】英威腾 “Ni美国国家仪器 “PLC发展趋势大讨论”活动圆满结束 艾睿光电产品体验活动 cc-link图文征集活动 西门子SMART LINE V3
工控论坛首页 微软嵌入式 → 浏览主题: 【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)
发表新帖 回复该主题
回帖:1个,阅读:763 [上一页] [1] [下一页]
* 帖子主题:

【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)

分享到
734
yefanqiu
文章数:33
年度积分:50
历史总积分:734
注册时间:2004/8/19
发站内信
发表于:2012/11/22 12:37:25
#0楼
在上篇博文《Html5:Canvas+WebSocket实现远程实时通信(上)》中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现Web Server需要注意的一些设计原则,本篇文章将继续介绍Canvas和WebSocket实现远程实时通信的技术细节。
(2)网页动态画面实现(Canvas
我们采用Dreamweaver软件进行网页和脚本编写(如下图所示)
图
Index.html文件相对比较简单,在<body>中定义一个<canvas>区,声明一定的大小和外观即可,具体的的动态画面我们主要在canvas.js中实现。
[URL=]图[/URL]
<html>
<head>
<title>MF-Html5</title>
<style>
html,body{font:normal 0.9em arial,helvetica;}
</style>
<scriptsrc="canvas.js"language="javascript"></script>
</head>
<bodyonLoad="init()">
<imgsrc="logo.gif"alt="YFSoft"/>
<h3>.NET Micro Framework html5 Demo</h3>
<canvasid="canvas1"style="border:1px solid;background-color:#EEEEEE;"width="440"height="450">
</canvas>
<div><buttononClick="quit()">close websocket</button>
<ahref="www.sky-walker.com.cn">叶帆科技 www.sky-walker.com.cn</a></div>
</body>
</html>
[URL=]图[/URL]
canvas.js脚本文件中的init()函数,由于我们在index.html中定义了<body onLoad="init()">,所以网页加载后自动自行这个初始化函数的内容。
我们再这个初始化函数中获取canvas对象,代码如下:
canvas = document.getElementById('canvas1');
获取该对象后,我们就可以定义我们可以绘图的上下文对象了(目前可获取2d对象,3d对象在未来的标准中也会支持)。
context = canvas.getContext('2d');
'canvas1' 对应我们网页中的<canvas id="canvas1">。
有了context这个对象之后,我们就可以在画布上进行诸如,画点、画线、画矩形、画圆和贴图等操作了。(请参见百度百科 Canvas元素)。
另外我们还支持画面鼠标捕捉,可以绘制一些按钮(不过在一些嵌入式设备上,该功能支持不太好,建议还是直接使用网页按钮)。
canvas.addEventListener('mousedown',mousedown,false);
canvas.addEventListener('mousemove',mousemove,false);
canvas.addEventListener('mouseup',mouseup,false);
添加这三个事件后,就可以获取鼠标相关信息了。
详细的代码如下:
图View Code
(3)、客户端和服务端实时通信实现(WebSocket
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。
在WebSocket API中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
(详情请参见 维基百科 WebSocket条目)。
在脚本文件中,我们创建WebSocket的代码如下:
[URL=]图[/URL]
functioninit()
{
varhost = "ws://192.168.1.100:10189";
try
 {
   socket=newWebSocket(host);
   socket.onopen=function(msg)
   {
      drawNetworkState(true);
   };
   socket.onmessage=function(msg)
   {
if(msg.data=="button1=down")
      {
          drawLED(0,true);
      }
elseif(msg.data=="button1=up")
      {
          drawLED(0,false);
      }
elseif(msg.data=="button2=down")
      {
          drawLED(1,true);
      }
elseif(msg.data=="button2=up")
      {
          drawLED(1,false);
      }
elseif(msg.data=="button3=down")
      {
          drawLED(2,true);
      }
elseif(msg.data=="button3=up")
      {
          drawLED(2,false);
      }
else
      {
try
          {
vartemp = parseInt(msg.data,10);
             showAd1= (temp * 3.3 / 4096).toFixed(2);
             ad1= temp / 40;
          }
catch(ex){}
      }
   };
   socket.onclose=function(msg)
   {
      drawNetworkState(false);
   };
 }
catch(ex){}
}
functionsend(msg)
{
try{ socket.send(msg);}catch(ex){  }
}
functionquit()
{
 socket.close();
 socket=null;
}
[URL=]图[/URL]

在代码中需要指定服务器IP和端口,换句话说,这个实现和我们用其它开发语言开发socket客户端没有任何区别。
和xmlhttp的区别就是,它不是基于http协议的,传输可以直接是二进制数据。
在系统中我们只需要构建一个socket server,建立连接后,互发握手指令,成功后,就可以互发数据了。
3.1 握手
握手协议旧版和新版有很大的不同,我们这里仅介绍最新版的(也应该是最终版了)。
打开所提供的Htm5_Websocket.sln工程,确保我们打开websocket库的debugmode(webSocket.DebugMode = true)。
图
一旦浏览器访问我们的开发板,则串口中会输出上图的信息。
客户端所发:
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 192.168.1.100:10189
Origin: http://192.168.1.100
Sec-WebSocket-Key: G9CM/xrVbYUo00RaAuThLQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
服务端返回:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: Id0PdUz40uyrpDdq0OwQdkg/ODA=
WebSocket-Origin: http://192.168.1.100
WebSocket-Location: ws:192.168.1.100:10189/
可以看出目前最新版的协议是V13
握手中最重要的就是key的验证了,服务端发送的key为Sec-WebSocket-Key: G9CM/xrVbYUo00RaAuThLQ==,这是一个base64编码。
这个key+” 258EAFA5-E914-47DA-95CA-C5AB0DC85B11”的字符串进行SHA1换算后,转换为base64编码,也就是Sec-WebSocket-Accept: Id0PdUz40uyrpDdq0OwQdkg/ODA=中的key。
然后服务端发送上段内容后,就完成了握手,后续就可以直接收发数据了。
小插曲:我在.NET Micro Framework平台实现这段代码的过程中遇到两个问题,一是SHA1加密,二是官方提供的base64库有bug。后来,只好自己想办法实现了这两个功能,才完成了websocket的握手验证。
3.2 数据通信
新版和老版不同,数据格式定义的比较复杂,如下图所示:
图
具体格式的介绍,可以参见3.4参考中所提到的文章。
3.3 YFSoft.Html5.websocket封装库
由以上介绍可知,实现websocket的功能还是相对复杂的,所以我封装了一个websocket库,用户可以非常方便的实现websocket。
定义:
webSocket = new WebSocket(10189, 3, 60);
webSocket.DataReceived += new WebSocketDataReceivedHandler(webSocket_DataReceived);
webSocket.Run();
事件处理:
[URL=]图[/URL]
staticvoidwebSocket_DataReceived(WebSocketClient client, WebSocket.Frame frame)
{
stringinfo =frame.Dump();

if(info =="led1=on")
   {
       LED1.Write(true);
   }
elseif(info =="led1=off")
   {
       LED1.Write(false);
   }
elseif(info =="led2=on")
   {
       LED2.Write(true);
   }
elseif(info =="led2=off")
   {
       LED2.Write(false);
   }
elseif(info =="led3=on")
   {
       LED3.Write(true);
   }
elseif(info =="led3=off")
   {
       LED3.Write(false);
   }
}
[URL=]图[/URL]
事件参数中直接可以获取websocket的数据。
AD数据发送:
static void ADSend()  //这是一个线程,不断发送AD的值
{
   while (true)
   {
       webSocket.SendText(ad1.ReadRaw().ToString());
       Thread.Sleep(1000);
   }
}
不局限于仅发字符信息,也可以发二进制信息。
库下载(示例源码+文档):
http://www.sky-walker.com.cn/MFRelease/library/v42/YFSoft.Html5.WebSocket.rar
3.4 参考
websocket 通信协议(已更新到version 13)
http://www.zendstudio.net/archives/websocket-protocol/
基于Websocket草案10协议的升级及基于Netty的握手实现
http://blog.csdn.net/fenglibing/article/details/6852497
WebSocket新版Hybi-10协议介绍
http://www.hackecho.com/archives/1104.html

(4)、网页部署和发布
我们编写的网页文件涉及到三个文件:index.html、canvas.js和LOGO.gif,我们通过YFFileViewer工具把它们部署到开发板中的文件系统中去。
图
关于YFFileViewer请参见博文博文《【玩转.Net MF –03】远程文件查看器》和《【玩转.Net MF –05】加载文件系统中的Pe文件》。
仅需要写如下代码,就可以实现web页面发布。
using (WebServer server = new WebServer(80))
{
   server.SetWebRoot("\\ROOT\\web");
   Thread.Sleep(Timeout.Infinite);
}
程序运行后,我们在浏览器中输入IP地址,就可以访问网页了。
图
相关操作视频:
图
http://v.youku.com/v_show/id_XNDY3NzM1Mzky.html
声明:由于作者以前主要在桌面程序、通信和嵌入式领域进行开发,对网页开发技术也是最近才开始深入研究,本文描述有失误和偏颇之处还望方家多多指教。
MF简介:http://blog.csdn.net/yefanqiu/article/details/5711770
MF资料:http://www.sky-walker.com.cn/News.asp?Id=25
本文源码:http://www.sky-walker.com.cn/mfrelease/sample/html5_websocket_file.rar
相关硬件: http://www.sky-walker.com.cn/Products.asp?Id=24
图
此帖来自中华工控网工控博客
原文件地址:http://blog.gkong.com/more.asp?id=167958&Name=yefanqiu
438
hack2012
文章数:284
年度积分:50
历史总积分:438
注册时间:2012/11/9
发站内信
发表于:2012/11/22 14:49:59
#1楼
表情 这么多的代码?
工控学堂推荐视频:

关于我们 | 联系我们 | 广告服务 | 本站动态 | 友情链接 | 法律声明 | 非法和不良信息举报

工控网客服热线:0755-86369299
版权所有 工控网 Copyright©2021 Gkong.com, All Rights Reserved

156