【分享】mcu代码生成&websocket 体验记录

生子当如哈士奇

此篇体验记录主要做两件事：
  1.体验一下mcu代码生成。
  2.体验一下websocket的控制。

适读人群：有STM32基本使用经验的人。

第一件事是使自己的gokit2.3成为自己应用的设备：
1.创建产品，创建APP应用，设置数据点等一堆操作。
2.MCU开发->生成Stm32代码->生成MCU代码。
3.编写用户代码并下载到开发板上。

我把我的工程上传到附件了，你们可以下载来参考。
test.zip (8.23 MB, 下载次数: 211)

2017-2-6 15:28 上传

点击文件名下载附件


我体验所创建的数据点：


生成MCU代码下载简单阅读后，感叹道，这代码写得真好0.0学习了。

代码那里我就做了三件事：

• 1.移植了gokit2.3官方代码的led,rgb_led的文件进去。
• 2.短按key1给数据点test_number加1，短按key2减1。
• 3.数据点test_bool为真时开灯（RBG三色灯），假时关灯 。
  

值得注意的是，生成的代码airlink时并不会亮灯，长按key2依然能通过使用机智云的APP通过配置上网以及控制。配置完之后就能用APP控制了。按键加1减1，在APP上控制开关灯。
如图：





第二件要做的事是，使用网页实现远程监控：
websocket通信必须先用户登陆，这就要有"appid": ,"uid": ,"token"，appid是创建应用的时候得到的。
1.先通过OpenAPI,注册/登陆用户得到uid,与token。（
http://swagger.gizwits.com/doc/index/openapi_apps#!/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86/post_app_users
我把我的数据直接附上，供大家更方便的参考，不得不说这一块是有点恶心。）

1. Product Key：
   
2. 70a3b07bf61a4b5a8b184e8d730dee56
   
3. Product Secret：
   
4. 17f5659d1c214818a5006505d538468f
   
5. 
   
6. App ID
   
7. 9c8a317091cc4540a0057ef58d0c627b
   
8. App Secret
   
9. c46e5723c8e3469aae27e8867a5c6a50
   
10. 
    
11. 
    
12. {
    
13.   "phone_id": "12345678987",
    
14.   "username": "alw",
    
15.   "password": "123456",
    
16.   "email": "123@qq.com",
    
17.   "phone": "12345678987",
    
18.   "code": "string",
    
19.   "lang": "en",
    
20.   "authData": {
    
21.     "src": "qq",
    
22.     "uid": "string",
    
23.     "token": "string"
    
24.   }
    
25. }
    
26. 
    
27. { "token": "19996d2e333448aaa2eac7cbbb61d3ce", "uid": "cd8beadf369d461e97c70136bb87ab61", "expire_at": 1486803595}

复制代码

2.绑定硬件
时间戳：http://unixtime.51240.com/
md5:http://md5jiami.51240.com/

1. 时间戳：1486198987
   
2. Product Secret：
   
3. 17f5659d1c214818a5006505d538468f
   
4. 
   
5. 17f5659d1c214818a5006505d538468f1486198987
   
6. 
   
7. md5:
   
8. 5eff5269ce2eaf4e01b7d3ffa74c4202
   
9. 
   
10. mac:60019406c75f
    
11. 
    
12. 
    
13. {
    
14.   "product_key": "70a3b07bf61a4b5a8b184e8d730dee56",
    
15.   "mac": "60019406c75f",
    
16.   "remark": "true",
    
17.   "dev_alias": "abc"
    
18. }
    
19. 
    
20. { "remark": "true", "ws_port": 8080, "did": "yRcxQpfuGjyC3F85tiV29Z", "port_s": 8883, "is_disabled": false, "host": "sandbox.gizwits.com", "product_key": "70a3b07bf61a4b5a8b184e8d730dee56", "port": 1883, "mac": "60019406c75f", "role": "normal", "dev_alias": "abc", "is_online": false, "passcode": "RYAXTWATSJ", "type": "normal", "wss_port": 8880}

复制代码

3.websocket
websocket的部分代码：

就是一个网页，具体文件我已经放到了html文件夹下的index.html，我可以实现开关灯，按键上传数据。



这部分我重点示范一下。毕竟部分搞硬件的网页知识几乎为零。我先讲进websocket怎么用先，先不用管websocket是什么鬼东西了，上车。

打开网页先按F12调用 chrome的调试面板，如图操作，然后在console那里输入以下代码（注意分两步输入。）

如果没有意外的话，应该是每次按key都能看到websocket传来数据：

1. 
   
2. //第一步输入：输入第一步后，就会多一个名为V1的websocket通信。
   
3. var ws=new WebSocket('ws://sandbox.gizwits.com:8080/ws/app/v1');
   
4. 
   
5. //第二步：第二步就是用户登陆啦~
   
6. var p=
   
7. {
   
8. "cmd": "login_req",
   
9. "data":
   
10. {
    
11. "appid": "9c8a317091cc4540a0057ef58d0c627b",
    
12. "uid": "cd8beadf369d461e97c70136bb87ab61",
    
13. "token": "19996d2e333448aaa2eac7cbbb61d3ce",
    
14. "p0_type": "attrs_v4",
    
15. "heartbeat_interval": 120
    
16. }
    
17. }
    
18. 
    
19. ws.send(JSON.stringify (p));
    
20. 
    
21. 
    

复制代码

index.html的具体代码你可以打开来看一下，主要就是websocket的使用。
如图所示，我自己可以通过按键在网页上实时 显示。在网页上开关灯。
要想开关灯成功，必须修改里面的did，毕竟代码里的did指向的是我的gokit2.3而不是你的~



                document.getElementById('led_open').onclick=function(){
                        var p={
                                "cmd": "c2s_write",
                                "data":
                                {
                                        "did": "yRcxQpfuGjyC3F85tiV29Z",
                                        "attrs":
                                        {
                                                "test_bool":true
                                        }
                                }
                        };

                        ws.send(JSON.stringify (p));
                }               
               
                document.getElementById('led_close').onclick=function(){
                        var p={
                                "cmd": "c2s_write",
                                "data":
                                {
                                        "did": "yRcxQpfuGjyC3F85tiV29Z",
                                        "attrs":
                                        {
                                                "test_bool":false
                                        }
                                }
                        };

                        ws.send(JSON.stringify (p));
                }
        
        }

体验总结：

• 1.自动生成的代码写得真特么有学习价值。
• 2.自动生成的代码主要“自动”做了几件事：根据你的产品自动填写了productkey，根据你设置的数据点来自动生成数据点的结构体。
• 3.如果能直接在stm32代码里直接定义wifi的SSID跟密码那就爽了。
• 4.自动生成的代码里有key1,key2的代码，但没有写rgb_led的代码，搞得我一开始长按key2，airlink时,咦？为什么绿灯没亮？是不是不行？。。。其实呢，没有也正常，就是自己傻，以为有。。。
  

Gemini

哈哈哈，总结写的非常生动，赞一个。另外，我们会认真听取并反馈各位的意见，谢谢你的宝贵意见。

Refon

32个赞啊，目前wifi模组基本上都需要手机告诉其ssid和密码，然后再去连接路由器，如果mcu里面写死了ssid和密码，那局限性就很大了！websocket部分分析的很不错，点赞！

Genius

楼主幽默风趣，是开发界的老司机。
鉴定完毕。

感谢分享：）

bigfanofloT

顶顶更健康

szuser

websocket  方面讲的非常好, 学习了

maomaodemao

每天来论坛溜一圈，终于看到干货了，感谢楼主的奉献，赞！

maomaodemao

写的太好了，太感谢了

Roam

谢谢啦，真的是扫盲

gogobody

X-Gizwits-Signature = MD5(product_secret + X-Gizwits-Timestamp).lower() 我前台生成和后台生成都试过了，都会报 400         9044 X-Gizwits-Signature invalid! 这个错。谁能帮我解答下啊，谢谢了。

生子当如哈士奇

gogobody 发表于 2017-2-24 14:41
X-Gizwits-Signature = MD5(product_secret + X-Gizwits-Timestamp).lower() 我前台生成和后台生成都试过了 ...

截图发论坛，让别人帮你看看是不是哪出错了。