SiamWebCity.com รับสร้างเว็บไซต์ครบวงจร
เลือกภาษา ภาษาอังกฤษ   
หน้าแรก
web
โปรโมทเว็บ
web
รับทำเว็บไซต์
web
สอนทำเว็บ
web
Domain 299บ.
web
ติดต่อเรา
web
 
รับทำเว็บไซต์ครบวงจร รับพัฒนาแอพพลิเคชั่น สำหรับ Facebook iPad iPhone Android รับอบรมการสร้างเว็บไซต์ โปรโมทเว็บไซต์ ดูแลเว็บไซต์ แก้ไขเว็บไซต์ : เริ่มต้นติดต่อที่เรา ที่เหลือเราเป็นผู้จัดการเพื่อท่าน : เราเป็นมากกว่าเครื่องมือที่ช่วยฝ่าวิกฤตเศรษฐกิจ
รายการ
เกี่ยวกับเรา
ทำไมต้องเลือกเรา
ผลงานที่ผ่านมา
เตรียมตัวก่อนทำเว็บ
รับดูแลเว็บไซต์
แอพ Facebook iPhone
โปรแกรมmlm สำเร็จรูป
เช่าโฮสติง
บริการหลังการขาย
เงื่อนไขการรับบริการ
ร่วมงานกับเรา
คำถามที่พบบ่อย
ติดต่อเรา

ฟรีบทความ
คู่มือการใช้งาน  คู่มือการใช้งาน
VDO สอน Dreamweaver  VDO สอน Dreamweaver
Bitcoin บิทคอยน์  Bitcoin บิทคอยน์
PHP MySQL  VDO  เบื้องต้น  PHP MySQL VDO เบื้องต้น
PHP MySQL  เกร็ดความรู้  PHP MySQL เกร็ดความรู้
jQuery  jQuery
HTML5  HTML5
ASP net   MS SQL  ASP net MS SQL
facebook app  facebook app
JSP  JSP
Oracle  Oracle
CSS  CSS
Google  Google
iphone ipad iphone itune ios  iphone ipad iphone itune ios
SEO  SEO
SQL Server  SQL Server
AJAX  AJAX
รดน้ำอัตโนมัติ  สปริงเกอร์  รดน้ำอัตโนมัติ สปริงเกอร์
คอมพิวเตอร์   อินเตอร์เน็ต  คอมพิวเตอร์ อินเตอร์เน็ต
JavaScripts  JavaScripts
cloud computing  cloud computing
xhtml  xhtml
Photoshop  Photoshop
RSS Feed  RSS Feed
wordpress  wordpress
Computer  Computer
MLM ขายตรง ขยายสายงาน  MLM ขายตรง ขยายสายงาน
NUTT's blog  NUTT's blog
ทีวีดิจิตอล DVB T2  ทีวีดิจิตอล DVB T2
Bootstrap CSS  Bootstrap CSS

รับสอน PHP, MySQL, HTML, CSS, Javascripts, FTP, Dreamweaver,PHPMyAdmin, Appserv, WMSEVER, php-Nuke , Joomla, SMF, Oscommerce, Phpbb, Paypal, Adwordsมาเรียนการสร้างเว็บกัน
บริการสอน แนะนำ Adwords , PHP, MySQL, HTML, FTP, SMF, PHPMyAdmin, Dreamweaver, Oscommerce, Photoshop, Flash...

test speed
Display Pagerank
ดูสถิติเว็บไซต์

HTML5 Application กับ WebSockets และ Web Workers



HTML5 > HTML5 Application กับ WebSockets และ Web Workers



คราวนี้เรามาเริ่มการใช้ 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



ผลลัพธ์ครับ




Short URL click! Facebook Share
<< Back : เข้าชม 5,672 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ webboard Seeding รับจ้างโพสต์ โปรโมทเว็บไซต์ webUB.com



รับทำเว็บไซต์, ทำเว็บ, สร้างเว็บไซต์, รับทำเว็บ, รับออกแบบเว็บ, รับเขียนเว็บ, ออกแบบเว็บ, เว็บดีไซน์, รับสร้างเว็บ, เขียนเว็บไซต์, เว็บ, บริษัท ทำเว็บ, บริษัท สร้างเว็บ, บริษัท ออกแบบเว็บ, บริษัท เขียนเว็บ, ผลงานเว็บ, โฮสติ้ง,Design,Web,เว็บ,เว็บ โฮสติ้ง,เว็ป,โฮสติ้ง ราคาถูก,เว็บไซต์,จดโดเมน,เว็บโฮสติ้ง,Web Download,Web PHP,Flash MX,Graphic Design,Search Engine, Web, Design, Web Host,Web Hosting,Web Page,เขียนเว็บ,เขียนเว็บไซต์,จัดทำเว็บ,จัดทำเว็บไซต์,ทำเว็บ,ทำเว็บไซต์, โปรโมทเว็บ,ฟรี เว็บ,รับเขียนเว็บ,รับทำเว็บ,รับทำเว็บไซต์,รับออกแบบเว็บ,รับออกแบบเว็บไซ ต์,เว็บ สำเร็จรูป,เว็บดีไซน์,เว็ปไซต์, สร้างเว็บ,สร้างเว็บไซต์,ออกแบบ เว็บไซต์,ออกแบบเว็บ,ออกแบบเว็บไซต์,เขียนโปรแกรม,บริการเว็บโฮสติ้ง,ประชา สัมพันธ์เว็บ,รับจัดทำเว็บไซต์,รับสร้างเว็บ,เว็บโปรแกรม,เว็บสวย, บริการจัดทำเว็บไซต์,บริษัทรับจัดทำเว็บไซต์,ให้บริการจัดทำเว็บไซต์, มีประสบการณ์การจัดทำเว็บไซต์, งานบริการเว็บไซต์,ผลงานการเว็บไซต์,ผลงานเว็บไซต์,เว็บไซต์,เว็บไซต์ ปรัชญา "พอเพียง",เว็บไซต์ราคาที่ยุติธรรม,เว็บไซต์ระบบมาตรฐาน,เว็บไซต์ทุกงาน, เว็บไซต์ธุรกิจ, โปรโมทเว็บ,ประชาสัมพันธ์เว็บ,เว็บ,ออกแบบเว็บ,เขียนโปรแกรม,สร้างเว็บ,ออก แบบเว็บไซต์,ทำเว็บ,เว็บสวย,เขียนเว็บไซต์,ทำเว็บไซต์,รับทำเว็บ,รับออกแบบ เว็บ,เขียนเว็บ,รับเขียนเว็บ,รับทำเว็บไซต์,รับจัดทำเว็บไซต์,เว็บโฮสติ้ง, จัดทำเว็บ,เว็บโปรแกรม,เว็บไซต์,เว็บดีไซน์,รับออกแบบเว็บไซต์,สร้างเว็บไซ ต์,เว็บ,จดโดเมน,บริการเว็บโฮสติ้ง,จัดทำเว็บไซต์,โปรแกรมคอมพิวเตอร์

รับทำเว็บไซต์ : โปรโมทเว็บไซต์ : รับเขียนโปรแกรม : สอนสร้างเว็บ : จด Domain name 299บ. : เช่า Hosting : บริการดูแลเว็บไซต์ : รับซื้อ ขาย Rolex : Sitemap.xml
สปริงเกอร์

ข้อสอบ คลังข้อสอบ ระบบข้อสอบ โปรแกรมข้อสอบ ฟรี Exam.in.th
เว็บไซต์ในเครือข่าย: SiamWebCity.com webUB.com EXAM.in.th ข้อสอบ.ไทย ไอเดียแต่งบ้าน homeEST.com
Copyright © 2009-2019 SiamWebCity.COM. ® All rights reserved. หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321
E-mail, Google Talk : admin [at] siamwebcity.com, Skype: SiamWebCity.com
ขึ้นไปด้านบน