การติดต่อระหว่าง STM32F0 กับ Computer
ผ่าน User Datagram Protocol (UDP)
ซอฟแวร์ที่ใช้:
Node.js
Express
Socket.io
ขั้นตอนการติดตั้ง Node.js
ขั้นตอนการติดตั้ง Express และ Socket.io
ติดตั้ง Node.js Package Manager(npm) ด้วยคำสั่ง
ทำการสร้างโฟลเดอร์โปรเจคที่ต้องการใช้งาน
mkdir “myproject”
cd myproject
npm init
ติดตั้ง Express ลงในโปรเจค
ติดตั้ง Socket.io ลงในโปรเจค
ทดลองรับค่าจาก STM32F0 ด้วย Node.js
ในขั้นแรกให้ใช้คำสั่ง “netcat -ul <udp port>” ในการรับค่าจาก STM32F0 ตัวอย่างเช่น รอรับค่าจาก STM32F0 ผ่าน udp port 55065 เพื่อตรวจสอบว่า STM32F0 ส่งข้อมูลไปยังเครื่องคอมพิวเตอร์ได้จริง
หลังจากทราบว่า STM32F0 สามารถส่งค่าได้แล้ว ให้สร้างไฟล์ server.js ภายในโปรเจค โดยเพิ่มโค้ดภายในไฟล์ดังนี้
var dgram = require("dgram");
var server = dgram.createSocket("udp4");
//function listening data from client
server.on('message', function (message, remote) {
console.log(remote.address + ':' + remote.port +' - ' + message);
});
server.bind(55065); // create udp server on port 55065
หลังจากสร้างไฟล์ server.js เสร็จแล้วทำการรันไฟล์ด้วยคำสั่ง "nodejs server.js"
ผลลัพธ์หลังจากรันไฟล์ server.js จะได้
ทดลองใช้งาน Express โดย
ทำการสร้าง web server ด้วย Express โดยเพิ่มโค้ดลงในไฟล์ server.js ดังนี้
var express = require('express');
var app = express();
//render "Hello world"
app.get('/', function (req, res) {
res.send('Hello World!');
});
//create web server on port 3000
app.listen(3000);
ทดลองรันไฟล์ด้วยคำสั่ง "nodejs server.js"
เปิด Browser เข้าผ่าน Url < 0.0.0.0:3000 > จะได้ผลลัพธ์ดังภาพ
สร้างไฟล์ index.html สำหรับแสดงผล โดยเพิ่มโค้ดดังนี้
<!DOCTYPE html>
<html>
<style>
html,body,div,td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}
header {
font-family: 'Quicksand';
padding: 50px 10px;
color: #fff;
font-size: 25px;
text-align: center;
/*
* Note the use of the `main-color`
* variable and the `darken` function
*/
background-color: #fa5b4d;
border-bottom: 1px solid #df1806;
text-shadow: 0px -1px 0px #df1806;
}
</style>
<head>
<title>Home - My Site</title>
</head>
<body>
<header>
<font size="16">Temp&Lux</font>
</header>
</br></br></br>
<div class="container" align="center">
<div class="main-content">
<font size="6">Temperature:</font>
</br></br>
<div id="temp" style=" font-size: 26pt; color: #05A8FC;"></div>
<hr>
<font size="6">Luminosity:</font>
</br></br>
<div id="lux" style=" font-size: 26pt; color: #05A8FC;"></div>
</br>
</div></div>
</body>
</html>
แก้ไข้โค้ดใน server.js .เพื่อแสดงผลไฟล์ index.html ดังนี้
// แก้ไขในส่วนนี้
app.get('/', function (req, res) {
res.send('Hello World!');
});
//โดยแก้ไขเป็น
app.use(express.static(__dirname));
app.get('/', function (req, res) {
res.render('index.html')
});
ทำการรันไฟล์ server.js ใหม่ แล้วทดลองเข้าด้วย url > 0.0.0.0:3000 จะได้ผลลัพธ์ดังภาพ
ทดลองส่งค่าไปยัง web ด้วย Socket.io
ทำการเพิ่มโค้ดใช้งาน Socket.io ลงในไฟล์ server.js ดังนี้
// socket.io listening port 5555
var io = require('socket.io').listen(5555);
// connect client print "node connect" on teminal
io.sockets.on('connection', function (socket) {
console.log("node connect!");
- });
แก้ไขโค้ดส่วนรับค่าจาก UDP Port เพื่อส่งค่าที่ได้ผ่าน Socket.io ไปยัง Web
// แก้ไขโค้ดในส่วนนี้จาก
server.on('message', function (message, remote) {
console.log(remote.address + ':' + remote.port +' - ' + message);
});
// แก้ไขเป็น
server.on('message', function (msg) {
io.sockets.emit('mqtt',String(msg));
- });
เพิ่มโค้ดในไฟล์ index.html เพื่อเชื่อมต่อ web เข้ากับ Socket.io โดยในที่นี้จำเป็นต้องทราบ IP ของเซิฟเวอร์ หรือคือเครื่องที่ทำการรันไฟล์ server.js นั้นเอง โดยเพิ่มโค้ดลงในไฟล์ดังนี้
<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<script type="text/javascript">
// แก้ไข ip เป็น ip ของเครื่องที่ทำการรันไฟล์ server.js
var socket = io.connect('ws://192.168.1.3:5555');
socket.on('connect', function () {
socket.on('mqtt', function (msg) {
console.log(msg);
var json = msg,
obj = JSON.parse(json); // method parses a string as JSON
document.getElementById("temp").innerHTML = obj.temp+' °C';
document.getElementById("lux").innerHTML = obj.lux+' lx';
});
});
</script>
ทำการรันไฟล์ server.js ใหม่ แล้วทดลองเข้าด้วย url > 0.0.0.0:3000 จะได้ผลลัพธ์ดังภาพ
