查看: 278|回复: 3

[原创] 【Fireduino】WIFI+WebSocket实现自定义远程控制

[复制链接]

145

主题

2

好友

5814

积分

版主

Rank: 7Rank: 7Rank: 7

  • TA的每日心情
    奋斗
    半小时前
  • 签到天数: 1201 天

    连续签到: 1 天

    [LV.10]以坛为家III

    爱板会员勋章 活跃会员勋章 在线达人勋章 发帖机器勋章 在线之王勋章 论坛骨干勋章

    发表于 2016-12-16 17:51:57 |显示全部楼层
       由于Fireduino没有输入设备,所以在播放音乐时的控制很不方便,虽然可以使用预留的的Arduino接口来扩展,不过暂时给屏幕用上了,所以还要想想别的办法。
        Fireduino板子上已经集成了WIFI模块,并且将Socket相关的功能封装好了,比如TCP的Server、Client,还有UDP,编写程序已经很方便了,可以随便找台Windows、Linux电脑或者手机之类的写个通讯程序即可。但是这样最大的问题就是通用性,总不能为一种设备编写一次程序吧,所以最最适合的方法就是HTML+WebSocket了,可以在任何支持浏览器的设备上运行。
        说起WebSocket,又让我想起来2007年的时候,WebSocket还是草案,我用Delphi实现了服务端可以和浏览器通讯,把封装好的程序传到了CSDN赚了点分,到现在还没用完,哈哈。跑题了下面继续。对于Fireduino来说应该当作一个WebSocketServer来监听客户端(也就是浏览器)的连接,WebSocket的服务端是基于SocketServer,而Socket通讯又是靠WIFI来建立的通道完成传输的,所以应该从WIFI开始。

    1.png

        Fireduino提供了WIFI的库,可以直接拿来使用。为了符合我的习惯,我将WIFI又包装了一层,生成了一个类来使用(虽然不是完全必要)。类的定义很简单,就是WIFI的那些功能,而且还没有写完,先凑合着使用吧。

    2.png

        在这个类里,我又扩展了一个ProtoThreads来实现所谓的协程,可以同时运行多个Loop而不至于有太大的影响。在这个WIFI类的Loop里,每隔一秒监测一次WIFI的状态,当状态发生改变时通过回调函数返回给该类的调用者,完全实现了逻辑代码和驱动代码的分离,程序的可移植性更好。为了简单,我直接使用了delay来延时,如果改成计时器的事件更合理。
        程序还是没有难度,理解了结构即可,也可以根据自己的喜好来改变。


    3.png

        WebSocketServer的功能Fireduino也提供了,而且是个C++类,这样也就不需要再费劲自己去封装了,直接使用。程序的流程就是,首先先连接WIFI到自己的路由器,同时建立一个WebSocket服务端的监听,并且绑定WebSocket的各种事件,如客户端的连接、断开、接收到数据等等。这里为了演示,都是直接通过串口输出对应的消息,而没有具体处理各种数据。

    4.png

        WebSocket.html是一个网页,也就是所谓的客户端了,它可以连接到Fireduino。根据Fireduino连接到路由器后被分配的IP地址,修改对应的代码,端口默认是80,保存后双击打开,自动调用浏览器来执行。
    5.png

        此时Fireduino的串口显示了一些东西。NewWifiClient说明客户端已经连接上来,下面的header信息就是浏览器内部自动发送的根据WebSocket协议生成的握手信息,这些都可以略过不用关心。当服务端同意了这次握手并返回确认信息的时候,这个WebSocket就连接成功了。例子中的代码又从网页给Fireduino发送了个Hello做演示,还增加了个鼠标按下和抬起发送的数据。这些东西不是不重要,只是对于实现远程控制来说不需要关心。
        没有用的东西就把它关掉。

    6.png

       从库中找到WebSocket.cpp文件,把这个define注释掉。然后再次打开WebSocket.html文件
    7.png

       增加些自己的控制代码,比如音量的加减,再来运行一下
    8.png

        在网页上点击按钮就会发送对应的数据到Fireduino,Fireduino端根据不同的数据进行处理执行不同的功能。在传输各种数据和指令时,正规的做法应该增加通讯协议,也就是为每条数据增加包头、包尾、ID编号和内容等,如果再严格一点,还要加上校验码,这样可以确保不会错误的解析数据。考虑可靠性的话应该加上应答信息,安全性应该加密后再传输。这里为了方便就全被我省略了。不过有一点需要注意,Javascript是不支持二进制数据的,所以也就只能传输ASCII了。


    回复

    使用道具 举报

    5

    主题

    1

    好友

    1294

    积分

    进士

    Rank: 5Rank: 5

  • TA的每日心情
    擦汗
    2017-7-11 13:55
  • 签到天数: 180 天

    连续签到: 1 天

    [LV.7]常住居民III

    发表于 2016-12-16 19:42:13 |显示全部楼层
    谢谢分享                       
    回复

    使用道具 举报

    56

    主题

    1

    好友

    2492

    积分

    进士

    Rank: 5Rank: 5

  • TA的每日心情
    奋斗
    昨天 09:47
  • 签到天数: 740 天

    连续签到: 33 天

    [LV.9]以坛为家II

    爱板会员勋章 活跃会员勋章 发帖机器勋章 在线达人勋章

    发表于 2016-12-16 22:05:05 |显示全部楼层
    C++学的好啊         
    回复

    使用道具 举报

    32

    主题

    13

    好友

    1988

    积分

    进士

    Rank: 5Rank: 5

  • TA的每日心情
    开心
    16 小时前
  • 签到天数: 213 天

    连续签到: 75 天

    [LV.7]常住居民III

    爱板会员勋章 活跃会员勋章

    发表于 2016-12-16 22:30:28 |显示全部楼层
    谢谢斑竹分享,温习C++去了。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    站长推荐上一条 /4 下一条

    手机版|爱板网 |网站地图  

    GMT+8, 2017-7-23 16:50 , Processed in 0.112641 second(s), 13 queries , Memcache On.

    苏公网安备 32059002001056号

    Powered by Discuz!

    回顶部