Lab 2

HTMLChat

ในการทดลองนี้ จะแสดงตัวอย่างการสื่อสารกันระหว่าง WebBrowser 2 ตัว ผ่าน NETPIE โดยดัดแปลงมาจาก Lab 1 ดังนี้

1.สร้าง Application Key ใหม่ 2 ค่าภายใต้แอปพลิเคชั่น AppID เดียวกัน

2.สร้างไฟล์ HTML ขึ้นมาใหม่ 2 ไฟล์ (alice.html และ bob.html) โดยใช้โค้ดที่แสดงข้างล่าง สังเกตว่าความแตกต่างของทั้งสองไฟล์อยู่ที่เพียงตัวแปร MYNAME และ YOURNAME เท่านั้นที่สลับที่กัน

alice.html

<script src="https://cdn.netpie.io/microgear.js"></script>

<script>
    const APPID  =  “YOUR_APPID”;                
    const KEY    = “KEY_1”;
    const SECRET = “SECRET_1”;

    const MYNAME = "alice";        // ชื่อของตัวเอง
    const YOURNAME = "bob";         // ชื่อของเพื่อนที่จะคุยด้วย

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

    microgear.on('message',function(topic,msg) {
        document.getElementById("data").innerHTML = msg;
    });

    microgear.on('connected', function() {
        microgear.setAlias(MYNAME);     // ตั้งชื่อตัวเอง
        document.getElementById("data").innerHTML = "Now I am connected with netpie..."; 

        setInterval(function() {
            // ใช้ฟังก์ชั่นchatในการส่งข้อความหาเพื่อน
            microgear.chat(YOURNAME,"Hello from "+MYNAME+" at "+Date.now());
        },1000);
    });
    microgear.on('disconnected', function() {
        document.getElementById("data").innerHTML = "Now I am disconnected with netpie...";
    });

    microgear.connect(APPID);
</script>

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

bob.html

<script src="https://cdn.netpie.io/microgear.js"></script>

<script>
    const APPID  = “YOUR_APPID”;                
    const KEY    = “KEY_2”;
    const SECRET = “SECRET_2”;

    const MYNAME   = "bob";           // ตั้งชื่อของตัวเอง
    const YOURNAME = "alice";        // ตั้งชื่อของเพื่อนที่จะคุยด้วย

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

    microgear.on('message',function(topic,msg) {
        document.getElementById("data").innerHTML = msg;
    });

    microgear.on('connected', function() {
        microgear.setAlias(MYNAME);         // ตั้งชื่อตัวเอง
        document.getElementById("data").innerHTML = "Now I am connected with netpie..."; 
        setInterval(function() {

            // chat หาเพื่อน
            microgear.chat(YOURNAME,"Hello from "+MYNAME+" at "+Date.now());
        },1000);
    });
    microgear.on('disconnected', function() {
        document.getElementById("data").innerHTML = "Now I am disconnected with netpie...";
    });

    microgear.connect(APPID);
</script>

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

3.ใส่ APPID (เหมือนกันในทั้งสองไฟล์) และ แต่ละคู่ KEY กับSECRET ลงในแต่ละไฟล์

4.Save ไฟล์ทั้งสองไฟล์ แล้วดับเบิ้ลคลิกหรือคลิกขวาเพื่อเปิดไฟล์ทั้งสองด้วย Browser

5.ผลลัพธ์ที่ได้ในหน้าต่างที่เปิดขึ้นมาจาก alice.html จะเป็นดังนี้

Hello from bob at xxxxxxxxxx

และข้อความในหน้าต่างที่เปิดขึ้นมาจาก bob.html จะเป็นดังนี้

Hello from alice at yyyyyyyyyyy

โดย xxxxxxxxx และ yyyyyyyyy เป็น Unix Time ที่จะเพิ่มขึ้นเรื่อยๆ ทุก 1000 ms