发 帖  
原厂入驻New

[经验] 【Intel Edison试用体验】6、socket通信与web界面

2016-8-30 22:46:30  2032 Intel
分享
0
本帖最后由 左岸cpx 于 2016-8-31 10:06 编辑

前言:
首先对论坛表达一下歉意,因为八月份在忙全国大学生物联网设计竞赛的事情,所以试用报告总共才更新了6篇,希望见谅,不过并不会影响顺利结项,后面我会抓紧时间跟进的。在西安总决赛的时候,在会场上居然看到了爱迪生的身影,是成都大学的一支队伍将爱迪生用到了飞行器上,做视频回传的。看来,我们的爱迪生在高校大学生中还是比较有影响力的。
OK,进入正题。上一节讲了如何让爱迪生实现数字频率计的功能,这一节我要讲一下如何实现socket通信web界面。这两节内容都是为了我结项做准备的,所以后面的结项报告需要对照组这两篇试用报告来看。
这一节涉及到的编程知识,客户端方面:html, javascript, css。服务器方面:node.js和一个叫做express的框架。基础知识还是蛮多的,可能有读者会问,我没学过这些语言怎么办。我在这里告诉大家,没关系的,我也是初学者,对这些语言知识了解个大概,根据XDK里面提供的Demo程序来学习并修改就行了。
报告5:频率计:
  1. http://bbs.elecfans.com/forum.php?mod=viewthread&tid=929223&extra=
复制代码

步骤1:客户端
通过html语言写一个静态网页,是这个样子的。
1.jpg
相当于web前端开发,所以我们还需要用CSSJavaScript来写两个文件。文件是在XDKDemo程序里面改的,附件里可以看到工程文件。
步骤2:服务器
服务器这边我们用node.js语言开发,XDK里面有个Web SocketsDemo,如下图所示,一次点击3个红色方框,就可以建立起一个Socket通信程序。
2.jpg
在这个Demo中修改,来实现自己的功能。

1、修改这一段,改成控制继电器的功能
  1. var mraa = require('mraa'); //require mraa
  2. var myOnboardLED = new mraa.Gpio(13); //LED hooked up to digital pin 13 (or built in pin on Intel Galileo Gen2 as well as Intel Edison)
  3. myOnboardLed.dir(mraa.DIR_OUT); //set the gpio direction to output
  4. var ledState = true; //Boolean to hold the state of Led
复制代码


2、这一段添加了express框架,有了框架,方便了服务器开发速度
  1. var express = require('express');
  2. var app = express();
  3. var path = require('path');
  4. var http = require('http').Server(app);
  5. var io = require('socket.io')(http);
复制代码


3、这一段是socket通信的服务器方面程序,和下面的4相对应
  1. app.get('/', function(req, res) {
  2.     //Join all arguments together and normalize the resulting path.
  3.     res.sendFile(path.join(__dirname + '/client', 'index.html'));
  4. });

  5. //Allow use of files in client folder
  6. app.use(express.static(__dirname + '/client'));
  7. app.use('/client', express.static(__dirname + '/client'));

  8. //Socket.io Event handlers
  9. io.on('connection', function(socket) {
  10.     console.log("\n Add new User: u"+connectedUsersArray.length);
  11.     IF(connectedUsersArray.length > 0) {
  12.         var element = connectedUsersArray[connectedUsersArray.length-1];
  13.         userId = 'u' + (parseInt(element.replace("u", ""))+1);
  14.     }
  15.     else {
  16.         userId = "u0";
  17.     }
  18.     console.log('a user connected: '+userId);
  19.     io.emit('user connect', userId);
  20.     connectedUsersArray.push(userId);
  21.     console.log('Number of  Users Connected ' + connectedUsersArray.length);
  22.     console.log('User(s) Connected: ' + connectedUsersArray);
  23.     io.emit('connected users', connectedUsersArray);
  24.    
  25.     socket.on('user disconnect', function(msg) {
  26.         console.log('remove: ' + msg);
  27.         connectedUsersArray.splice(connectedUsersArray.lastIndexOf(msg), 1);
  28.         io.emit('user disconnect', msg);
  29.     });
  30.    
  31.     socket.on('chat message', function(msg) {
  32.         io.emit('chat message', msg);
  33.         console.log('message: ' + msg.value);
  34.     });
  35.    
  36.     socket.on('toogle led', function(msg) {
  37.         myOnboardLed.write(ledState?1:0); //if ledState is true then write a '1' (high) otherwise write a '0' (low)
  38.         msg.value = ledState;
  39.         io.emit('toogle led', msg);
  40.         ledState = !ledState; //invert the ledState
  41.     });
  42.    
  43.     startSensorWatch(socket);
  44.    
  45. });


  46. http.listen(3000, function(){
  47.     console.log('Web server Active listening on *:3000');
  48. });
复制代码
4、这一段是socket通信的客户端方面程序,和上面的3对应
  1. var socket = io();
  2. var userId = "user";


  3. $('form').submit(function() {
  4.     socket.emit('chat message', {value: $('#m').val(), userId: userId});
  5.     $('#m').val('');
  6.     return false;
  7. });

  8. $("#led-link").on('click', function(e){
  9.     socket.emit('toogle led', {value: 0, userId: userId});
  10. });

  11. socket.on('toogle led', function(msg) {
  12.     if(msg.value === false) {
  13.         $('#messages').prepend($('<li>Toogle LED: OFF<span> - '+msg.userId+'</span></li>'));
  14.         $("#led-container").removeClass("on");
  15.         $("#led-container").addClass("off");
  16.         $("#led-container span").text("OFF");
  17.     }
  18.     else if(msg.value === true) {
  19.         $('#messages').prepend($('<li>Toogle LED: ON<span> - '+msg.userId+'</span></li>'));
  20.         $("#led-container").removeClass("off");
  21.         $("#led-container").addClass("on");
  22.         $("#led-container span").text("ON");
  23.     }
  24. });

  25. socket.on('chat message', function(msg) {
  26.     $('#messages').prepend($('<li>'+msg.value+'<span> - '+msg.userId+'</span></li>'));
  27. });

  28. socket.on('connected users', function(msg) {
  29.     $('#user-container').html("");
  30.     for(var i = 0; i < msg.length; i++) {
  31.         //console.log(msg[i]+" )msg[i] == userId( "+userId);
  32.         if(msg[i] == userId)
  33.             $('#user-container').append($("<div id='" + msg[i] + "' class='my-circle'><span>"+msg[i]+"</span></div>"));
  34.         else
  35.             $('#user-container').append($("<div id='" + msg[i] + "' class='user-circle'><span>"+msg[i]+"</span></div>"));
  36.     }
  37. });

  38. socket.on('user connect', function(msg) {
  39.     if(userId === "user"){
  40.         console.log("Client side userId: "+msg);
  41.         userId = msg;
  42.     }
  43. });

  44. socket.on('user disconnect', function(msg) {
  45.     console.log("user disconnect: " + msg);
  46.     var element = '#'+msg;
  47.     console.log(element)
  48.     $(element).remove();
  49. });

  50. window.onunload = function(e) {
  51.     socket.emit("user disconnect", userId);
  52. }
复制代码
5、这一段是我们试用报告5提到的频率计功能的实现
  1. var front_time = 0;
  2. var back_time = 0;
  3. var interval = 0;
  4. var freq = 0;
  5. var wave_begin = true;
  6. var wave = new mraa.Gpio(8);
  7. wave.dir(mraa.DIR_IN);
  8. //中断服务函数
  9. wave.isr(mraa.EDGE_RISING, function(){
  10.     if(wave_begin){
  11.         var d = new Date();
  12.         front_time = d.getTime();
  13.         wave_begin = false;
  14.     }else{
  15.         var d = new Date();
  16.         back_time = d.getTime();
  17.         wave_begin = true;
  18.         interval = back_time - front_time;
  19.     }
  20. });
  21. function startSensorWatch(socket) {
  22.     'use strict';
  23.     setInterval(function () {
  24.         var d = new Date();
  25.         var time_now = d.getTime();
  26.         if(time_now - back_time > 1500){
  27.             //1.5秒超时,认为无信号,freq = 0 Hz
  28.             interval = 0;
  29.         }
  30.         //计算频率
  31.         if(0 == interval){
  32.             freq = 0;
  33.         }else{
  34.             freq = 1000/interval;
  35.         }
  36.         
  37.         var power = 4.0 * freq;
  38.         console.log("power: " + power + " W");
  39.         socket.emit("chat message", {value: power+' W', userId: userId});
  40.     }, 2000);
  41. }
复制代码
步骤3:实验现象 3.jpg
用户连接:可以显示当前和服务器(爱迪生)连接的客户端(网页)数量,从u0, u1, u2...以此类推。
开关状态:通过鼠标点击蓝色方框内的“开关”来切换开关状态。ON或者OFF
实时功率:测量用电器的实时功率。

所以,我们的爱迪生完成了两个工作,1:采集用电器功率。2:充当socket通信服务器。监听它的某一个端口(本文设置为3000),浏览器访问爱迪生所在ip3000端口,即可获取此页面。

最后,本文并不是一个完整的项目,这是作为结题项目的准备工作。后面的结项报告会把试用报告5:频率计和本片试用报告6结合在一起,完成一个完成的项目(家庭电能管家:硬件+软件),敬请期待!
http://bbs.elecfans.com/forum.php?mod=viewthread&tid=929223&extra=

WebSocket.rar (1.11 MB, 下载次数: 2)





左岸cpx 2016-8-30 22:48:01
代码乱码了,请管理员先通过审核,然后我把里面的代码重新编辑一下。
回复

举报

只有小组成员才能发言,加入小组>>

964个成员聚集在这个小组

加入小组

创建小组步骤

关闭

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

快速回复 返回顶部 返回列表