Sunday, June 28, 2015

[How to] Node.js, Express and Socket.io with STM32F0



การติดต่อระหว่าง STM32F0 กับ Computer 

ผ่าน User Datagram Protocol (UDP)

ซอฟแวร์ที่ใช้:
  • Node.js
  • Express
  • Socket.io

ขั้นตอนการติดตั้ง Node.js
  • sudo apt-get install nodejs  
ขั้นตอนการติดตั้ง Express และ Socket.io
  1. ติดตั้ง Node.js Package Manager(npm) ด้วยคำสั่ง
  • sudo apt-get install npm  
  1. ทำการสร้างโฟลเดอร์โปรเจคที่ต้องการใช้งาน
  1. mkdir “myproject”  
  2. cd myproject  
  3. npm init  
  1. ติดตั้ง Express ลงในโปรเจค
  • npm install express –save  
  1. ติดตั้ง Socket.io ลงในโปรเจค
  • Npm install socket.io –save  

ทดลองรับค่าจาก STM32F0 ด้วย Node.js
  1. ในขั้นแรกให้ใช้คำสั่ง  “netcat -ul <udp port>” ในการรับค่าจาก STM32F0 ตัวอย่างเช่น รอรับค่าจาก STM32F0 ผ่าน udp port 55065 เพื่อตรวจสอบว่า STM32F0 ส่งข้อมูลไปยังเครื่องคอมพิวเตอร์ได้จริง         


              C:\Users\boriboon\Desktop\emdem_lab\2.PNG

  1. หลังจากทราบว่า STM32F0 สามารถส่งค่าได้แล้ว  ให้สร้างไฟล์ server.js ภายในโปรเจค โดยเพิ่มโค้ดภายในไฟล์ดังนี้
  1. var dgram = require("dgram");  
  2. var server = dgram.createSocket("udp4");  
  3.   
  4. //function listening data from client  
  5. server.on('message', function (message, remote) {  
  6.     console.log(remote.address + ':' + remote.port +' - ' + message);  
  7. });  
  8.   
  9. server.bind(55065); // create udp server on port 55065  
  1. หลังจากสร้างไฟล์ server.js เสร็จแล้วทำการรันไฟล์ด้วยคำสั่ง "nodejs server.js"
            
  1. ผลลัพธ์หลังจากรันไฟล์ server.js จะได้

ทดลองใช้งาน Express โดย
  1. ทำการสร้าง web server ด้วย Express โดยเพิ่มโค้ดลงในไฟล์ server.js ดังนี้
  1. var express = require('express');    
  2. var app = express();    
  3.   
  4. //render "Hello world"  
  5. app.get('/', function (req, res) {    
  6.   res.send('Hello World!');    
  7. });    
  8.   
  9. //create web server on port 3000  
  10. app.listen(3000);   

  1. ทดลองรันไฟล์ด้วยคำสั่ง "nodejs server.js"


  1. เปิด Browser เข้าผ่าน Url < 0.0.0.0:3000 > จะได้ผลลัพธ์ดังภาพ


  1. สร้างไฟล์ index.html สำหรับแสดงผล โดยเพิ่มโค้ดดังนี้
  1. <!DOCTYPE html>  
  2. <html>  
  3. <style>  
  4. html,body,div,td  
  5.  {  
  6.   margin: 0;  
  7.   padding: 0;  
  8.   border: 0;  
  9.   outline: 0;  
  10.   font-weight: inherit;  
  11.   font-style: inherit;  
  12.   font-family: inherit;  
  13.   font-size: 100%;  
  14.   vertical-align: baseline;  
  15. }  
  16. header {  
  17.   font-family: 'Quicksand';  
  18.   padding: 50px 10px;  
  19.   color: #fff;  
  20.   font-size: 25px;  
  21.   text-align: center;  
  22. /*  
  23.    * Note the use of the `main-color`  
  24.    * variable and the `darken` function  
  25.    */  
  26.   background-color: #fa5b4d;  
  27.   border-bottom: 1px solid #df1806;  
  28.   text-shadow: 0px -1px 0px #df1806;  
  29. }  
  30. </style>  
  31. <head>  
  32.     <title>Home - My Site</title>  
  33.       
  34. </head>  
  35. <body>  
  36.     <header>  
  37.         <font size="16">Temp&Lux</font>  
  38.     </header>  
  39.   
  40.     </br></br></br>  
  41.     <div class="container" align="center">  
  42.         <div class="main-content">  
  43.             <font size="6">Temperature:</font>  
  44.             </br></br>  
  45.             <div id="temp" style=" font-size: 26pt; color: #05A8FC;"></div>  
  46.             <hr>  
  47.             <font size="6">Luminosity:</font>  
  48.             </br></br>  
  49.             <div id="lux" style=" font-size: 26pt; color: #05A8FC;"></div>  
  50.         </br>  
  51.         </div></div>  
  52.     </body>  
  53.     </html>  
  1. แก้ไข้โค้ดใน server.js .เพื่อแสดงผลไฟล์ index.html ดังนี้
  1. // แก้ไขในส่วนนี้  
  2. app.get('/', function (req, res) {      
  3.   res.send('Hello World!');      
  4. });      
  5.   
  6.   
  7. //โดยแก้ไขเป็น  
  8. app.use(express.static(__dirname));  
  9. app.get('/', function (req, res) {    
  10.   res.render('index.html')   
  11. });    
  12.     
  1. ทำการรันไฟล์ server.js ใหม่ แล้วทดลองเข้าด้วย url > 0.0.0.0:3000 จะได้ผลลัพธ์ดังภาพ


ทดลองส่งค่าไปยัง web ด้วย Socket.io
  1. ทำการเพิ่มโค้ดใช้งาน Socket.io ลงในไฟล์ server.js ดังนี้

  1. // socket.io listening port 5555  
  2. var io  = require('socket.io').listen(5555);  
  3.   
  4. // connect client print "node connect" on teminal   
  5. io.sockets.on('connection', function (socket) {  
  6.   console.log("node connect!");  
  7. });  


  1. แก้ไขโค้ดส่วนรับค่าจาก UDP Port เพื่อส่งค่าที่ได้ผ่าน Socket.io ไปยัง Web

  1. // แก้ไขโค้ดในส่วนนี้จาก  
  2. server.on('message', function (message, remote) {  
  3.     console.log(remote.address + ':' + remote.port +' - ' + message);  
  4. });  
  5.   
  6.   
  7. // แก้ไขเป็น  
  8. server.on('message', function (msg) {  
  9.     io.sockets.emit('mqtt',String(msg));  
  10. });  


  1. เพิ่มโค้ดในไฟล์ index.html เพื่อเชื่อมต่อ web เข้ากับ Socket.io โดยในที่นี้จำเป็นต้องทราบ IP ของเซิฟเวอร์ หรือคือเครื่องที่ทำการรันไฟล์ server.js นั้นเอง โดยเพิ่มโค้ดลงในไฟล์ดังนี้
  1. <script type="text/javascript" src="https://cdn.socket.io/socket.io-1.3.4.js"></script>  
  2. <script type="text/javascript">  
  3. // แก้ไข  ip เป็น ip ของเครื่องที่ทำการรันไฟล์ server.js
  4.     var socket = io.connect('ws://192.168.1.3:5555');
  5.     socket.on('connect', function () {  
  6.     socket.on('mqtt', function (msg) {  
  7.     console.log(msg);  
  8.     var json = msg,  
  9.         obj = JSON.parse(json);  // method parses a string as JSON
  10.     document.getElementById("temp").innerHTML = obj.temp+' °C';  
  11.     document.getElementById("lux").innerHTML = obj.lux+' lx';  
  12.        });  
  13.     });  
  14. </script>  
  1. ทำการรันไฟล์ server.js ใหม่ แล้วทดลองเข้าด้วย url > 0.0.0.0:3000 จะได้ผลลัพธ์ดังภาพ




Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)