Lab 3

Room Chat

ในการทดลองนี้แสดงตัวอย่างการสื่อสารกันระหว่าง Web Browsers ผ่าน NETPIE ที่มีการใช้งานที่ซับซ้อนกว่าเดิม เป็นการทบทวนการใช้ Function Call ต่างๆ ใน HTML5 Microgear Library (https://github.com/netpieio/microgear-html5/blob/master/README.th.md\) เพื่อเปลี่ยน Web Browser ให้เป็น Microgear และทำการสื่อสารอัพเดทข้อมูลกัน มีขั้นตอนดังนี้

1.ศึกษาจากไฟล์ room_client.html และ room_server.html เพื่อทบทวน Function Call ต่างๆ ที่ระบุไว้ใน HTML5 Microgear Library

2.เปิดไฟล์ room_client.html ด้วย Text Editor และแก้ไขที่บรรทัด var slot = your_number; โดยให้เปลี่ยนเป็นหมายเลขที่แต่ละท่านได้รับ แล้วทำการ Save File

3.คลิกเพื่อเปิดไฟล์ room_client.html และ room_server.html ด้วย Browser ศึกษาการสื่อสารกันระหว่าง Browser ทั้งฝั่ง Client และ ฝั่ง Server และดูการแสดงผลดังแสดงในรูปที่ 1

room_client.html

<script src="https://cdn.netpie.io/microgear.js"></script><!-- Microgear library -->

<script>
    const APPID = "demobillboard"     //Application ID ของอุปกรณ์ที่เชื่อมต่อNETPIE
    const KEY = "M0mqAyedJm1ywVD";    // Key ของอุปกรณ์ที่เชื่อมต่อNETPIE
    const SECRET = "moHzrlTv1Xu0k286LzxkoTiRn";//Secret ของอุปกรณ์ที่เชื่อมต่อNETPIE

    const ALIAS = "htmlgear";        // ชื่ออุปกรณ์ที่เชื่อมต่อNETPIE
    var slot = 30;             // slot number

    var microgear = Microgear.create({
    key: KEY,
    secret: SECRET,
    alias : ALIAS
    });

    function getColor(){
    return '#' + Math.random().toString(16).slice(2, 8).toUpperCase();
    }

    microgear.on('message',function(topic,msg) { //ตรวจพบข้อความที่ส่งมายังอุปกรณ์
    //กำหนดข้อความให้แสดงผลในtag id ชื่อdata
    document.getElementById("data").innerHTML = msg; 
    });

    microgear.on('connected', function() { //ตรวจสอบเมื่อเชื่อมต่ออุปกรณ์กับNETPIE
    microgear.setAlias(ALIAS);  //กำหนดชื่ออุปกรณ์ที่เชื่อมต่อกับNETPIE
    document.getElementById("data").innerHTML = "Now I am connected with netpie...";         // แสดงข้อความเมื่อเชื่อมต่ออุปกรณ์กับNETPIE

    setInterval(function() {     // กำหนดให้ทำงานตลอดเวลาทุกๆ5000ms
        var color = getColor();
     // ส่งข้อความไปยังอุปกรณ์ชื่อhtmlgear ด้วยNETPIE
        microgear.publish("/billboard/slot/"+slot,color);
        document.getElementById("data").innerHTML = "Publish color : "+color;
        document.body.style.backgroundColor=color;    
        },5000);
    });

    microgear.on('disconnected', function() {    //ตรวจสอบเมื่อตัดการเชื่อมต่ออุปกรณ์กับNETPIE
    document.getElementById("data").innerHTML = "Now I am disconnected with netpie...";         // แสดงข้อความเมื่อตัดการเชื่อมต่ออุปกรณ์กับNETPIE
    });

// ตรวจพบอุปกรณ์ที่เชื่อมต่อNETPIE ด้วยAPPID เดียวกัน
    microgear.on('present', function(event) {    
        console.log(event);
    });

//ตรวจพบเหตุการณ์ที่อุปกรณ์เคยเชื่อมต่อNETPIE ด้วยAPPID เดียวกันหายไป
    microgear.on('absent', function(event) {            console.log(event);
    });

    microgear.connect(APPID);  // เชื่อมอุปกรณ์กับNETPIE
</script>

<div id="data">_____</div>

room_server.html

<script src="https://cdn.netpie.io/microgear.js"></script><!-- Microgear library -->

<style>
    #rgb {
        width:100%;
        font-size: 50px;
        vertical-align: middle;
    }
    .box {
        float: left;
        border: 1px solid black;
        margin-right: 50px;
        margin-bottom: 20px;
    }
    .boxcolor{
        width: 250px;
        padding: 10px;
        display: inline-block;
        color: #FFF;
        background-color: #FFF;
    }
    .right {
        text-align: center;
        width: 150px;
        padding: 10px;
        display: inline-block;
        color: #FFF;
        background-color: #000;
    }    
</style>

<div id="data">_____</div>
<p/>
<div id="rgb"></div>

<script>
    var numberbox = 30;
    var htmlbox = "";

    for(var i=0; i<numberbox; i++){
        htmlbox+='<div class="box"><div class="right">'+(i+1)+'</div><div class="boxcolor" id="'+(i+1)+'">'+i+'</div></div>';
    }
    document.getElementById("rgb").innerHTML = htmlbox;

    const APPID = "demobillboard";  // Application ID ของอุปกรณ์ที่เชื่อมต่อNETPIE
    const KEY = "M0mqAyedJm1ywVD";  // Key ของอุปกรณ์ที่เชื่อมต่อNETPIE
    const SECRET = "moHzrlTv1Xu0k286LzxkoTiRn";//Secret ของอุปกรณ์ที่เชื่อมต่อNETPIE

    const ALIAS = "billboard";      // ชื่ออุปกรณ์ที่เชื่อมต่อNETPIE

    var microgear = Microgear.create({
        key: KEY,
        secret: SECRET,
        alias : ALIAS
    });

    microgear.on('message',function(topic,msg) { // ตรวจพบข้อความที่ส่งมายังอุปกรณ์
    console.log(topic+" : "+msg);
    if(topic.indexOf("/demobillboard/billboard/slot")!=-1){
      if(msg.startsWith('#') || msg.startsWith('rgb(')){
        var m = topic.split("/demobillboard/billboard/slot/");
        document.getElementById(m[1]).style.color = msg;
        document.getElementById(m[1]).style.backgroundColor =msg;
        }
    }
    });

    microgear.on('connected', function() {    // ตรวจสอบเมื่อเชื่อมต่ออุปกรณ์กับNETPIE
    microgear.setAlias(ALIAS);        // กำหนดชื่ออุปกรณ์ที่เชื่อมต่อกับNETPIE
            // แสดงข้อความเมื่อเชื่อมต่ออุปกรณ์กับNETPIE
        document.getElementById("data").innerHTML = "Now I am connected with netpie...";         
        microgear.subscribe("/billboard/slot/+");
    });

microgear.on('disconnected', function() {    // ตรวจสอบเมื่อตัดการเชื่อมต่ออุปกรณ์กับNETPIE
       // แสดงข้อความเมื่อตัดการเชื่อมต่ออุปกรณ์กับNETPIE
    document.getElementById("data").innerHTML = "Now I am disconnected with netpie...";         
    });

//ตรวจพบอุปกรณ์ที่เชื่อมต่อกับNETPIE ด้วยAPPID เดียวกัน
microgear.on('present', function(event) {    
    console.log(event);
    });

// ตรวจพบว่าอุปกรณ์ที่เคยเชื่อมต่อกับNETPIE ด้วยAPPID เดียวกันหายไป
    microgear.on('absent', function(event) {
         console.log(event);
    });
    microgear.connect(APPID);  // เชื่อมอุปกรณ์กับNETPIE
</script>

การแสดงผลที่ Web Browser ที่เปิดไฟล์ room_server.html

แบบฝึกหัด

1.ในไฟล์ room_client.html อธิบายความหมายของ Function Call นี้

microgear.publish("/billboard/slot/"+slot,color);

2.ในไฟล์ room_server.html อธิบายความหมายของ Function Call นี้

microgear.subscribe("/billboard/slot/+");