HTML5: 2013

วันนี้มีลูกเล่นที่น่าสนใจมานำเสนออีกแล้วครับ อ่านจากชื่อตอนแล้วใครนึกออกบ้างเอ่ย

พูดถึง Notification ทุกคนน่าจะนึกถึง facebook หรือ window live messenger ใช่ครับเราจะทำประมาณนั้น

Notication API หรือชื่อเต็มคือ Web Notification API เป็น API ที่ทำให้เราสามารถสร้าง notification ไว้เด้งขึ้นมาบนเดสก์ท็อปของผู้ใช้ได้นั่นเอง เหมือน window live messenger เลยเชียวหละ ซึ่งประโยชน์เช่นคอยแสดงราคาทองทุกครั้งเมื่อมีการเปลี่ยนแปลง ช่วงนี้ยิ่งฮ็อตๆ อยู่ครับ

วันนี้จะมาเสนอ Notification API ของ WebKit ครับ ซึ่งรันได้บน chrome นั่นเอง ซึ่งมี 2 อินเทอร์เฟซ สำหรับใช้งาน

1. NotificationCenter ซึ่งใช้ในการร้องขอ permission ในการใช้งาน Notification API , คงสถานะของการอนุญาตและสร้าง Notification ซึ่งมี method ให้ใช้งานดังนี้

- Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) ใช้ในการสร้าง notification โดยระบุ icon , title และ body ครับ

- Notification createHTMLNotification(in DOMString url) ใช้ในการสร้าง Notification แบบหน้า HTML ครับ คือโยน url ของหน้าที่ต้องการใช้เป็น notification ลงไปเลยนั่นเอง

- Int checkPermission(); ใช้สำหรับเรียกดูระดับการใช้งานว่าอนุญาตรึเปล่า

- void requestPermission([in Fuction callback]) ใช้สำหรับขอคำยินยอมในการใช้ Notification API ครับ

Demo
   window.webkitNotifications.createNotification(‘icon.png’,’My Title’,’My Notification’);

2. Notification คือตัว notification ที่เราสามารถนำมาแสดงได้เลยผ่านเมธอดตามด้านล่างครับ

- show() ใช้สำหรับแสดง notification บนเดสก์ท็อปของผู้ใช้
- cancel() ใช้ในการลบ notification ออกจากเดสก์ท็อปหรอคิว

ต่อไปเป็น event ที่เราสามารถเล่นได้ครับ

- ondisplay : ตอนแสดงบนเดสก์ท็อป
- onclose : ตอนปิด notification ทั้งจากคลิกปิดเอง และจาก cancel()
- onerror : เมื่อเกิดข้อผิดพลาด

มาเล่นกันดีกว่าโค้ดอยู่ด้านล่างครับ รันใน chrome ได้เท่านั้นครับ

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>Notification API</title>

   <script type="text/javascript">
       var notificationCount = 0;

       function setPermission(){

           if(webkitNotifications){
               window.webkitNotifications.requestPermission();
           }else{
               alert("Not Support Nofication API");
           }
       }

       function fireNotification(){
           notificationCount++;

           var notification = webkitNotifications.createNotification(null,'Number : '+notificationCount, 'This is Notification '+notificationCount);

           notification.show();
       }
   </script>
</head>
<body>
   <p>Click set permission to allow notifications, then fire a notification</p>
   <section>
       <button id="setPermission" onclick="setPermission();">Set Permission</button>
       <button id="fireNotification" onclick="fireNotification();">Fire Notification</button>
   </section>
</body>
</html>

ผลลัพธ์

ความรู้จาก HTML5 Developer's Cookbook ครับผม

คราวนี้เรามาเริ่มการใช้ HTML5 เพื่อใช้ในการเขียน application จริงๆ จังๆ ซักทีแล้วนะครับ เป็นส่วนเริ่มต้นในการใช้เพื่อทำเกมครับ

Web Socket
สำหรับคนที่เคยเขียนโปรแกรมแบบ Client-Server นั้น จะค่อนข้างคุ้นเคยกับคำว่า Server Socket ซึ่งเป็นการเปิด port ที่ Server เป็น TCP ซึ่ง client ก็ติดต่อโดยอ้างถึง ip ของ Server และ Port และทำการเชื่อมการติดต่อเพิ่มเริ่มส่งข้อมูล

ซึ่ง Web Socket ก็สร้างขึ้นมาจากไอเดียนั้นเช่นเดียวกัน แต่การติดต่อนั้นเชื่อมผ่าน URI แทน ในการติดต่อจะมีการ upgrade connection จากธรรมดาเป็น upgrade ซึ่งทำให้สามารถติดต่อแบบ stateful หรือ รับส่งได้พร้อมกันได้

ซึ่งมีจุดเด่นในด้านการที่เป็น stateful เพราะทำให้ client กับ server ติอต่อกันได้ตลอดเวลา โดยไม่จำเป็นต้อง polling เพื่อเช็คว่ามีข้อมูลรึยัง แต่จะส่งเมื่อมีข้อมูลจริงๆ นั่นเองครับ

ตัวอย่างโค้ด

var socket = new WebSocket(ws://websockets.org:8787/echo);
socket.onopen = function(evt) { console.log("Socket opened");};
socket.onclose = function(evt) {console.log("Socket closed");};
socket.onmessage = function(evt){console.log(evt.data);};
socket.onerror = function(evt) {console.log("Error: "+evt.data);};
socket.send("Hello World!");

จากโค้ดเป็นการสร้าง WebSocket เพื่อไว้สำหรับคุยกับ echo server และมีการกำหนด callback function เมื่อเกิดเหตุการณ์ต่างๆ เช่น opened, closed, receive a message, หรือแม้กระทั่งเมื่อเกิด error ขึ้น จากนั้นเราก็ส่งค่า Hello World! ไปยัง server และให้ browser แสดงคำว่า Hello World จากการรับค่ากลับจาก server ครับ

ซึ่ง Server ของ WebSocket หากลองค้นหาดูแล้ว จะพบว่ามีการ implement เป็นหลายภาษาอย่างแพร่หลายแล้วครับ หาหยิบจับมาใช้ได้เช่น

PHP
https://code.google.com/p/phpwebsocket/

Java
http://jwebsocket.org/

Tutorial
http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/?search_index=2

Web Worker
Web Worker เด๋วมาดูโค้ด demo กันก่อนนะครับจะได้เข้าใจมากขึ้น ผมจะเขียนโด้ดในการแสดงเวลาปัจจุบันนะครับ

// demo1.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Worker example</title>
</head>
<body>
    <p>The time is now: <span id="result" /></p>
    <script>
        var worker = new Worker('worker.js');
        worker.onmessage = function (event) {
        document.getElementById('result').innerText = event.data;
        };
    </script>
</body>
</html>

---------------------------------------

// worker.js
setInterval(function() {
    postMessage(new Date());
}, 2000);

Web Worker รับค่าเป็น javascript file เพื่อเป็นตัวกำหนดการทำงานนะครับ var worker = new Worker('worker.js');

worker.js เป็น function การทำงานจริงๆ ครับ ซึ่งเราสั่งให้ setInterval ทุกๆ 2 วินาที และให้ทำการ postMessage(new Date()) ซึ่งเป็นการส่งค้าให้กับ Worker ที่อยู่ในหน้าหลักที่สร้าง listener method onmessage ไว้ เพื่อให้แสดงข้อมูลวันที่ครับ

listener ของ Web Worker
- onmessage ซึ่งใช้สำหรับการรับข้อมูลที่ส่งจาก postMessage
- onerror ใช้ในการรับ ข้อมูล error ครับ
ตัวอย่าง worker.onerror = function errorHandler(e) {
             console.warn(e.message, e);
        }

และการปิด Web Worker เราสามารถทำได้โดยเรียกฟังก์ชั่น worker.terminate(); ครับ
การใช้งาน Web Worker ทางที่ดียังไงก็ควรที่จะใช้ setInterval หรือ sleep ไว้ครับ ไม่งั้น cpu จะกินเยอะมากและเครื่องอาจจะค้างได้ครับ

ประเภทของ Web Worker
- Inline Worker คือใช้สำหรับหน้าเดียว ก็คือตามตัวอย่างนั่นเองครับ
      worker = new Worker('worker.js');

- Shared Worker คือใช้ร่วมกันหลายหน้า เพื่อให้หลายหน้ามีการแสดงข้อมูลที่ตรงกันได้
sharedWorker = new SharedWorker(sharedEchoWorker.js');

วิธีรัน example นี้
เนื่องจาก worker ใช้ postMessage ซึ่งเด๋วเราจะได้เจอกันอีกเยอะเลยครับ ซึ่งมีข้อจำกัดอยู่ที่ว่าต้องอยู่ใน domain เดียวกันเท่านั้น หากเราสร้างไฟล์และรันบน browser เลยจะเกิด security error ขึ้นครับ ถ้าจะทดสอบให้ใส่ใน appserv แล้วรันผ่าน localhost ครับ และจะเห็นการแสดงเวลาอย่างสวยงามครับ

ความรู้จาก Addison Wesley Learning HTML5 Game Programming Sep 2011 และ Pro HTML5

ผลลัพธ์ครับ

HTML5

วันพฤหัสบดีที่ 25 เมษายน พ.ศ. 2556

HTML5 :Notification API

วันอังคารที่ 19 มีนาคม พ.ศ. 2556

HTML5 Application : Lession 1 WebSockets and Web Workers