Lab 1
HTML -> HTML
ในการทดลองนี้จะให้เบราว์เซอร์สองตัว (บนเครื่องเดียวกันหรือต่างเครื่องก็ได้) สื่อสารกันผ่าน NETPIE REST APIโดยเป็นการเขียนโปรแกรมด้วย HTML และ Javascript โดยเบราว์เซอร์ตัวแรกส่งคำสั่ง PUT และเบราว์เซอร์ตัวที่สองส่งคำสั่ง GET
สร้างไฟล์ SetLampStatus.htmlดังนี้
SetLampStatus.html
<html>
<body>
<script>
var APPID= "YOURAPPID"; //enter your appid
var KEY = "YOURKEY"; //enter your key
var SECRET = "YOURSECRET"; //enter your secret
var Topic = "/LampStatus"; //choose any topic name
function PressButtonOn(){
var url = 'https://api.netpie.io/topic/'+APPID+Topic+'?retain&auth=' +KEY+':'+SECRET;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('PUT',url,true);
xmlHttp.send('ON');
window.alert(url);//for debugging purpose
}
function PressButtonOff(){
var url = 'https://api.netpie.io/topic/'+APPID+Topic+'?retain&auth=' +KEY+':'+SECRET;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('PUT',url,true);
xmlHttp.send('OFF');
window.alert(url); //for debugging purpose
}
</script>
<center>
<button onclick="PressButtonOn()" id = "ButtonOn">ON</button>
<button onclick="PressButtonOff()" id = "ButtonOff">OFF</button>
</center>
</body>
</html>
Double click ที่ไฟล์ SetLampStatus.html เลือกเปิดบนเว็บเบราว์เซอร์ เช่น IE จะเห็นหน้าต่างแบบนี้
สร้างไฟล์ GetLampStatus.html ดังนี้
GetLampStatus.html
<html>
<body>
<script>
var APPID= "YOURAPPID"; //enter your appid
var KEY = "YOURKEY"; //enter your key
var SECRET = "YOURSECRET"; //enter your secret
var Topic = "/LampStatus";
function GetButtonStatus(){
var url = 'https://api.netpie.io/topic/'+APPID+Topic+'?auth=' +KEY+':'+SECRET;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.status == 200 && xmlHttp.readyState==4){
document.body.className = 'ok';
var result = xmlHttp.responseText;
window.alert(result);
} else {
document.body.className = 'error';
}
}
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
</script>
<center>
<button onclick="GetButtonStatus()" id = "Button">Check Lamp Status</button>
</center>
</body>
</html>
เปิดไฟล์ GetLampStatus.html บนเว็บเบราว์เซอร์อีกตัว เช่น Google Chrome หรือ Firefox หรือ เปิดเว็บเบราว์เซอร์บนเครื่องของเพื่อน จะเห็นหน้าต่างแบบนี้
กดปุ่ม Check Lamp Status สังเกตผลลัพธ์ที่ได้ จะอยู่ในรูปแบบ JSON Array ซึ่งประกอบด้วย
[ชื่อ Resource, ข้อความ Payload, LastUpdate, retain] เช่น
[{"topic":"/YOURAPPID/LampStatus","payload":"ON","lastUpdated":1471760882,"retain":true}]
| KEY ที่ใส่ในไฟล์ SetLampStatus.html และ GetLampStatus.html ควรสร้างเป็น Session Key สามารถใช้ KEY เดียวกันทั้งสองไฟล์หรือจะใช้ KEY ที่แตกต่างกันก็ได้ |
|---|
ทดลองเพิ่มเติม
1.พิมพ์ URL ลงใน Address Bar โดยตรง https://api.netpie.io/topic/YOURAPPID/LampStatus?auth=YOURKEY:YOURSECRET สังเกตผลลัพธ์ที่ได้
2.แก้ไขไฟล์ SetLampStatus.html โดย retainparameter ออกสังเกตผลลัพธ์ที่ได้จากคำสั่ง GET
3.แก้ไขไฟล์ SetLampStatus.html และ GetLampStatus.html โดยเปลี่ยนชื่อ Topic เป็น /LampStatus/bedroom สังเกตผลลัพธ์ที่ได้จากคำสั่ง GET
4.แก้ไขไฟล์ SetLampStatus.html และ GetLampStatus.html เปลี่ยนจากการใช้ Topic เป็น Postbox
| Topicname และ Postboxname สามารถตั้งเป็นชื่อใดๆ ที่ต้องการ สามารถเรียกใช้ได้ภายใน AppID ที่กำหนดเท่านั้น |
|---|