Flutter ตัวอย่างการส่งค่า html ออกมาโดยผ่าน Node JS ส่งค่ามา EP.5
ก่อนจะไปต่อ flutter เพื่อเอาค่า json ที่ได้เอามาแสดงบน List<array>
มาทำความเข้าใจเพิ่มเติมของตัว node js ว่าทำอะไรได้บ้างนะครับ เราเข้าใจแล้วว่า node js สามารถสร้าง server ออกมาผ่าน port ที่ต้องการได้แล้ว เราก็ยังสามารถส่งค่าที่เป็น html หรือ รูปแบบเป็นแบบ html ออกได้เช่นกัน ก่อนจะแปลงให้เป็น json อยางที่เราต้องการ
ตามรูปนี้
โดยไปสร้างไฟล์ html ขึ้นมาสัก 1 ไฟล์ชื่ออะไรก็ได้ ยกตัวอย่างชื่อ demohtml.html โดยภายในไฟล์นี้มี โค้ดตามนี้
———-
<!DOCTYPE html>
<html>
<body>
<h1>Hello by I’m ARM</h1>
<p>xxxxxxxxxxxxxxxxxxxxxxxx</p>
<br>
<font color=”blue”>welcome</font>
<hr size=’1′></hr>
</body>
</html>
———-
เป็นรูปแบบ html นะครับ
ต่อมาไปสร้างไฟล์ js กัน ตั้งชื่อว่า myhtml_service.js แล้วใส่โค้ดตามนี้
——-
var http = require(‘http’);
var fs = require(‘fs’);
var server = http.createServer(function(req, resp){
console.log(“Request for demo file received.”);
fs.readFile(“demohtml.html”,function(error, data){
if (error) {
resp.writeHead(404);
resp.write(‘Contents you are looking for-not found’);
resp.end();
} else {
resp.writeHead(200, {
‘Content-Type’: ‘text/html’
});
resp.write(data.toString());
resp.end();
}
});
});
server.listen(3000, ‘192.168.1.238’);
console.log(‘Server running at http://192.168.1.238:3000/’);
——-
โดยสังเกตุว่าจะ มีฟังชัน require ดึง class ของ html กับ fs เข้ามาใช้งานด้วยนะครับ
โดยสั่ง createServer() ได้เลย
แล้วสร้างตัวแปร fs เพื่ออ่านค่าไฟล์ demohtml.html ที่เราสร้างไว้มาใช้งาน แล้วค่อยสร้าง server เขียน Head(200) หากไม่พบ error ของขั้นตอนการอ่านไฟล์ demohtml.html นะครับ ก็จะ return เป็นโครงสร้าง html ได้เลย
แล้วสั่งรันไฟล์ myhtml_service.js ทดสอบดู โดยอย่าลืมเปิด port 3000 ด้วยนะครับเพื่อทดสอบการทำงาน
คำสั่งรันไฟล์ js
———-
# node –inspect myhtml_service.js
———-
กด enter ก็จะได้สถานะว่า node js รันได้หรือไม่
แล้วเราก็ไปเปิด browser ดู
ก็จะได้ออกมาแบบนี้
ประมาณนี้น้องๆเพื่อน ๆก็น่าจะพอมองออก เพื่อนำไปประยุกต์ใช้ ต่อยอดเอานะครับ
หรืออีกกรณี หากต้องการเอา URL ที่มีอยู่แล้วไปเปิดผ่าน node js ก็ทำได้เช่น
ยกตัวอย่างเว็บแสดงราคาน้ำมันละกัน กำลังมาแรงในกระแสเลย เพราะน้ำมัน ราคาลง (ดีใจสุดๆ เพราะผมใช้รถยนต์…ต้องเติมน้ำมันทุกๆ เดือน )
อยากแรกเลยสร้างไฟล์ index.html ขึ้นมาแล้วใส่โค้ดตามนี้นะ
<iframe frameborder=0 width=”195″ height=”360″ scrolling=”no” src=http://www.pttplc.com/th/getoilprice.aspx></iframe>
โดยมี url ของ ปตท. อยู่แล้ว เอามาใช้งานได้เลย คือ http://www.pttplc.com/th/getoilprice.aspx
ที่นี้ก็ไปสร้างไฟล์ myptt_service.js แล้วใส่โค้ด js ตามนี้ครับ
โดยเปิด port 3000 ด้วยนะ เวลาสั่งรันก็จะได้ตามนี้
ที่นี้เวลาเอา url 192.168.1.238:3000 ก็จะได้ตามรูปนี้
ก็จะได้แบบนี้ อ้า เพื่อนๆ พอนึกออกแล้วใช่ไหม ก็เอาโค้ดนี้ไปติดเว็บท่านได้เลย
คิดว่าน้องๆ เพื่อนๆ น่าจะเข้าใจมากขึ้นนะครับ
หวังว่าจะเป็นประโยชน์นะครับ
ฝากกด Like กดแชร์ต่อให้ท่านอื่นๆ ได้ทราบด้วยนะครับ แล้วพบกันใหม่ครับ
