Websocket & HTML5 my project

1. รายงานโครงการ
การส่งข้อมูลผ่าน WebSocket ถึง Server
เพื่อลดภาระงาน Client และรองรับการนาไปประมวลผลหลายภาษา
จัดทาโดย
B5304516 นายภูริเดช สุดสี
เสนอ
ผู้ช่วยศาสตราจารย์ ดร.ปรเมศวร์ ห่อแก้ว
รายงานประกอบรายวิชา 423422 โครงการวิศวกรรมคอมพิวเตอร์ 2 ภาคการศึกษาที่ 2/2555
มหาวิทยาลัยเทคโนโลยีสุรนารี จ.นครราชสีมา

2. สารบัญ
เรื่อง หน้า
บทที่ 1 : บทนา
1.1 ที่มาและความสาคัญของโครงการ 4
1.2 หลักการและเหตุผล 4
1.3 วัตถุประสงค์ 5
1.4 เครื่องมือที่ใช้ 5
บทที่ 2 : หลักการทางาน
2.1 การเริ่มต้นใช้งาน WebSocket API 6
2.2 กาหนดฐานข้อมูล 8
2.3 กาหนด Protocol 9
2.4 การใช้งานระบบ 11
บทที่ 3 : สรุปและข้อเสนอแนะ
3.1 ข้อบกพร่อง หรือข้อจากัดของโปรแกรม 19
3.2 ข้อเสนอแนะ 20
3.3 สรุป 20
บทที่ 4 : บรรณานุกรม
4.1 บรรณานุกรม 21

3. แผนผังการทางานของระบบ
1
*.bmp
>>command
>>doing….
>>write file
*.Temp

4. 4
บทที่ 1 : บทนา
1.1 ที่มาและความสาคัญของโครงการ
ปัจจุบันโทรศัพท์แบบ Smartphone, Tablet และคอมพิวเตอร์เข้ามามีบทบาทอย่างมากใน
ชีวิตประจาวันของเรา ซึ่งการใช้งานอุปกรณ์เหล่านี้ได้มีการพัฒนาความสามารถในการประมวลผล
มากขึ้น แต่ก็ยังไม่เพียงพอกับความต้องการในการประมวลผลบางอย่างเช่นสมการทาง
คณิตศาสตร์ระดับ หรือการประมวลผลภาพ 3 มิติ เป็นต้น ซึ่งการประมวลผลดังกล่าวจาเป็นต้อง
ใช้อุปกรณ์ที่มีประสิทธิภาพสูง และภาษาที่ใช้ในการเขียนโปรแกรมที่นามาใช้ก็มีความเหมาะสม
แตกต่างกันออกไป ทั้งนี้ยังรวมไปถึง Algorithms ที่ถูกใช้งานอาจจะเป็นส่วนสาคัญที่ผู้ให้บริการ
ไม่ต้องการแจกจ่ายไปกับซอฟต์แวร์ ได้เพื่อป้องกันการเสียประโยชน์ทางการค้าจากการ
ลอกเลียนแบบ
ในปัจจุบันการเข้าถึงเครือข่ายอินเทอร์เน็ตมีการปรับปรุงให้มีความเร็วสูงขึ้น และยังมีการ
ให้บริการส่งข้อมูลความเร็วสูง 3G/4G ซึ่งอุปกรณ์อิเล็กทรอนิกส์ประเภทใหม่ๆที่ผลิตขึ้นในปัจจุบัน
ก็รองรับมาตรฐานดังกล่าวแล้ว และหากมีการนา Socket ซึ่งสามารถใช้งานได้โดยไม่สนใจรูปแบบ
ภาษาหรือ Platform ผ่านระบบอินเทอร์เน็ตมาใช้ แล้วจะช่วยให้ลดภาระการประมวลผลฝั่ง
ผู้รับบริการ และฝั่งผู้ให้บริการก็จะคงสงวนความลับของ Business Logic ไว้ได้ ดั้งนั้นจึงใช้วิธีการ
ให้ผลลัพธ์ที่ผู้รับบริการต้องการกลับไปเท่านั้น จึงส่งผลดีกับทั้งผู้ให้บริการและผู้รับบริการ
1.2 หลักการและเหตุผล
Socket คือกลุ่มของ IP และ Port ที่ใช้ระบุถึงตัวตนของอุปกรณ์ที่ใช้งานในเครือข่าย โดย
Socket จะมีการทางานเป็นคู่ โดยต้องตกลงวิธีการกาหนด Protocol กันไว้ในทั้งสองฝั่งของ
Socket และเมื่อมีการยืนยันตัวตนแบบ CHAP (Challenge-Handshake Authentication
Protocol) อย่างถูกต้อง จึงจะถือว่าอุปกรณ์ทั้งคู่เกิดการริเริ่มเชื่อมต่อกัน (Establishing)

5. 5
WebSocket เป็นการใช้งานการรับส่งข้อมูลจากฝั่งผู้ส่งและฝั่งผู้รับข้อมูล โดยมีพื้นฐานการ
รับส่งข้อมูลแบบ Socket แต่ปรับปรุงโดยการใช้เครือข่าย Internet มาอานวยความสะดวก โดย
WebSocket จะมีการส่งข้อมูลแบบ Full Duplex บน Protocol TCP และ WebSocket API ก็
ยังเป็นมาตรฐานของ W3C อีกด้วย
1.3 วัตถุประสงค์
1.เพื่อศึกษาการส่งข้อมูลผ่าน Socket
2.เพื่อศึกษาหลักการส่งข้อมูลโดยใช้ WebSocket API
3.เช้าใจกระบวนการทางานของ Socket
4.สามารถประยุกต์การใช้งาน WebSocket รับและส่งข้อมูล
5.สามารถกาหนดรูปแบบ Protocol ได้
1.4 เครื่องมือที่ใช้
1.โปรแกรม Microsoft Visual Studio 2012
2.Chrome (web browser) , HTML5 (Language) , JavaScript (Language)
3.Libwebsockets (C/C++ Library)
4.Canvas2Image(JavaScript Library)
5.MySQL Server 5.5 (Library) , MySQL Connector C++ 1.1.1 (Library)

6. 6
บทที่ 2 : หลักการทางาน
2.1 การเริ่มต้นใช้งาน WebSocket API
การใช้งาน WebSocket นั้นทางฝั่ง Client ต้องทาการสร้างตัวแปรของ WebSocket ขึ้นมา
ก่อน โดยใช้คาสั่ง new WebSocket(); ใน JavaScript
และทางฝั่ง Server ก็จาเป็นที่จะต้องสร้างการเชื่อมต่อ เพื่อที่จะริเริ่มการเชื่อมต่อแบบ
WebSocket API ซึ่งมีการกาหนดการยืนยันตัวตนแบบ CHAP (Challenge-Handshake
Authentication Protocol) โดยมีการกาหนดรูปแบบของการ Handshaking ดังนี้
GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:
s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
ฝั่ง Client ร้องขอการยืนยันตัวตน ฝั่ง Server ตอบสนองคาร้องขอ
ประเภทของ URL
ws คือ Connection ที่ไม่เข้ารหัส
wss คือ Connection ที่เข้ารหัส
[ (IP Server) : (Port) ]
ชื่อของ Protocol
รูป 1. แสดงรายละเอียด Parameter ที่ส่งให้ object connect

7. 7
โดย Sec-WebSocket-Accept เกิดจาก
โดย method ของ object WebSocket ที่ใช้บ่อยก็คือ
onopen ใช้กาหนดว่าเมื่อเชื่อมต่อได้แล้วจะให้ดาเนินการอะไร
onclose ใช้กาหนดว่าเมื่อปิดการเชื่อมต่อแล้วจะให้ดาเนินการอะไร
onerror ใช้กาหนดว่าหากการเชื่อต่อผิดพลาดจะให้ดาเนินการอย่างไร
onmessage ใช้กาหนดว่าเมื่อ มีข้อความจากฝั่ง Server แล้วให้ดาเนินการอย่างไร
send ใช้ส่งข้อความถึงฝั่ง Server ใช้หลังจากการริเริ่มการเชื่อมต่อแล้ว
เอา dGhlIHNhbXBsZSBub25jZQ== จาก Client
ต่อท้ายด้วย GUID ของเครื่อง Server
=
dGhlIHNhbXBsZSBub25jZQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11
ทาการเข้ารหัสแบบ SHA-1 สตริงที่ได้จากการต่อท้ายด้วย GUID
b37a4f2cc0624f1690f64606cf385945b2bec4ea เป็น Hex
แปลง Hex หนึ่งครั้ง แล้วเข้ารหัสแบบ Base64
s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
รูป 2.แสดงการเชื่อมต่อของฝั่ง Server ใน
ขั้น Handshaking ของ WebSocket API
กับฝั่ง Server คือ Libwebsockets

8. 8
จะพบข้อสังเกตคือถึงแม้ว่าการทา Handshaking ในรูปแบบนี้จะคล้ายกับ HTTP Header แต่
การ Handshaking นี้ไม่ใช่ HTTP Header แต่อย่างใด เพียงแต่ใช้พื้นฐานของ HTTP Protocol
เพื่อ Upgrade ระดับการใช้งานเป็น WebSocket เท่านั้น
2.2 กาหนดฐานข้อมูล
โครงการนี้ใช้งานฐานข้อมูล MySQL โดยผ่าน MySQL Connector C++ 1.1.1 และใช้
MySQL Server 5.5 เป็น DBMS ที่ Port 3306 โดยมีคาสั่งภาษา C/C++ ดังนี้
mysql_real_connect(conn,”127.0.0.1”,”root”,”1234567890”,”project”,0,NULL,0);
ในฐานข้อมูลได้มีการกาหนด Schema ของฐานข้อมูลดังนี้
IP ของ MySQL Server
ชื่อผู้ใช้และรหัสผ่านสาหรับใช้งาน
project
code
member
Int[PK]:idcode
varchar:codepromo
Int[PK]:id
varchar[PK]:email
varchar:password
varchar:code
varchar:class
ชื่อตารางในฐานข้อมูลที่ต้องการใช้

9. 9
โดยได้มีการกาหนดให้หากตอนสมัครใช้งานผู้ใช้ได้ใส่ code ที่อยู่ในฐานข้อมูลได้ตรงกับ
codepromo จะทาการแปลงข้อมูล class จาก “member” ซึ่งโปรแกรมจาไม่กาหนดสิทธิ์ให้
เพิ่มข้อมูล เป็น “admin” ซึ่งสามารถเพิ่มข้อมูลได้
2.3 กาหนด Protocol
Protocol คือข้อตกลงร่วมกันในการติดต่อสื่อสาร ระหว่างสองฝ่ายเพื่อให้มีความเข้าใจในการ
ใช้งานได้ตรงกัน และลดข้อผิดพลาดในการสื่อสาร ดังนั้นในโครงการนี้เมื่อมีการติดต่อสื่อสารกัน
ระหว่างสองฝ่ายจึงจาเป็นที่จะต้องมี Protocol มากาหนดการใช้งาน ซึ่งได้กาหนด Protocol ใน
การใช้งานไว้ดังนี้
ฝั่ง Client ส่งถึงฝั่ง Server
RegHeader|EmailB5304516@g.sut.ac.th
RegHeader คือ บอกว่าเป็นส่วนของการลงทะเบียนผู้ใช้ แล้วคั่นด้วย ‘|’ แบ่งกรณีเป็น
EmailB5304516@g.sut.ac.th คือ Email ที่ใช้สมัคร B5304516@g.sut.ac.th
Password คือ password ที่ต้องการ
Code คือ รหัสในการใช้งานที่จะเอาไปตรวจสอบในฐานข้อมูลว่าได้สิทธิ์ใดในการเข้าใช้
Login คือ บอกว่าเป็นส่วนของการเข้าใช้งาน แล้วคั่นด้วย ‘|’ แบ่งกรณีเป็น
EmailB5304516@g.sut.ac.th คือ Email ที่ใช้สมัคร B5304516@g.sut.ac.th
Password คือ password ที่กรอกในขั้นตอนการสมัคร

10. 10
ฝั่ง Server เขียนลงไฟล์
และจะใช้ข้อมูลนี้เขียนลงในไฟล์ชื่อ test__.temp โดยช่องว่างก็คือเลขลาดับที่ Client เชื่อมต่อ
กับ server
โปรแกรมของ Server เขียนลงไฟล์
กาหนดชื่อไฟล์ที่โปรแกรมจะเขียนลงไว้เป็น test__P.bmp โดยช่องว่างก็คือรูปที่ 1,2,3,… ที่ถูก
ส่งเข้ามาจากฝั่ง Client
[psec][1]Find Parking|pic1|0,0,285,121,1,349,121,2,349,163,3,286,163|Qk02EA4AA…..
psec คือ ส่วนของหัวไฟล์
1 คือ ID ของโปรแกรม
Find Parking คือ ชื่อของโปรแกรม
ที่เรียก
Pic1 คือ จานวนของรูปที่ส่งมา = 1 รูป
0 คือ จานวนชุดของจุด – 1
0,258,121 โดย
0 = ตาแหน่งจุดที่ – 1 (กรณีนี้คือจุดที่ 1 ได้ 1–1 = 0)
258 = ตาแหน่งในแนวแกน X ของจุดที่ 1
121 = ตาแหน่งในแนวแกน Y ของจุดที่ 1
ข้อมูลรูปภาพที่ถูกเข้ารหัสด้วย Base64
BM6……….
ข้อมูลรูปภาพที่อยู่ในรูปแบบของไฟล์ Bitmap

11. 11
ฝั่ง Server ส่งถึงฝั่ง Client
2.4 การใช้งานระบบ
2.4.1 การตรวจสอบสถานะ Server
ในการทดลองนี้ Server ถูกกาหนดในสามารถรองรับ Client ได้เพียง 100 การเชื่อมต่อและ
จะไม่คืนจานวนการเชื่อมต่อเพื่อให้ Server นากลับไปให้ Client ใช้งานนอกจากจะเรียกใช้งาน
Server ใหม่อีกครั้ง
จะเห็นว่าเมื่อ Server และ Client มีการริเริ่มเชื่อมต่อกันเกิดขึ้นแล้ว จะปรากฏแถบสถานะที่
Server สามารถรับ Client ได้เรืองแสงขึ้นมา และแถบวิ่งแสดงสถานะจานวนที่เหลือที่รองรับ
Client ได้ แถบนี้ลดลงเรื่อยๆ เมื่อมีจานวนการเชื่อมต่อเพิ่มขึ้น
[serverload]10
[serverload] 10 คือ ข้อความที่ส่งไปบอก Client ว่ามี Client เชื่อมต่อมาแล้ว 10 ครั้ง
correct คือ ข้อความที่ส่งไปบอก Client ว่าเข้าใช้ในสิทธิ์ “member”
correctadmin เมื่อเข้าใช้ในสิทธิ์ “Admin”
incorrect คือ ความความที่ส่งไปบอก Client ว่าการไม่สามารถเข้าถึงสิทธิ์การใช้งาน
รูป 3.แสดงการทางานของ Server

12. 12
2.4.2 การลงทะเบียนเพื่อขอบัญชีผู้ใช้งาน
ในการใช้งานจาเป็นต้องมีบัญชีผู้ใช้เพื่อใช้ในการจัดการการเข้าถึงข้อมูลตามสิทธิ์ที่ตนเองมีอยู่
ดังนั้นจึงได้ใช้ระบบสมัครสมาชิกอ้างอิงกับฐานข้อมูลดังที่กล่าวไว้แล้วในตอนต้น และขั้นตอนนี้จะ
แสดงให้เห็นถึงการสมัครสมาชิกเพื่อขอบัญชีผู้ใช้งาน
เมื่อเข้าหน้าแรก และ Server เชื่อมต่อกับ Client เรียบร้อยแล้ว ผู้ใช้งานจาเป็นต้องมีบัญชี
ผู้ใช้ในการเข้าใช้งาน สามารถสมัครได้โดยกดปุ่ม Register ระบบสมัครสมาชิจะเปลี่ยนหน้าเป็น
หน้าสมัครสมาชิก ให้กรอกข้อความ E-mail , Password ที่ตรงกันทั้งสองช่อง และ Code หากมี
Code ที่สามารถเพิ่มสิทธิ์การใช้งาน หากไม่ทราบให้ใช้ตามที่ระบบตั้งค่าเริ่มต้นให้ในกรณีนี้คือ
“SUT” หรือค่าอื่นๆก็ได้ และเมื่อสมัครสมาชิกเรียบร้อยแล้วท่านสามารถกดที่รูปกุญแจเพื่อ
กลับไปที่หน้าลงชื่อเข้าใช้งาน
รูป 4.แสดงขั้นตอนการสมัครสมาชิก

13. 13
2.4.3 การเข้าใช้งาน
การเข้าใช้งานซอฟต์แวร์ นี้ สามารถเข้าใช้งานได้
ผ่านทาง web browser บางตัวเท่านั้นจึงจะทางาน
ได้ครบกระบวนการอย่างถูกต้อง ซึ่งตัวอย่างนี้ได้เข้า
ใช้งานด้วย Google Chrome รุ่น 25.0.1364.5
dev-m ทั้งนี้เนื่องจากบางคาสั่งภายใน core engine
ของ web browser บางตัว นั้นไม่ครอบคลุมถึงการ
ใช้งานในคาสั่งที่ถูกเพิ่มโดยผู้พัฒนา แต่ไม่ได้เป็น
มาตรฐานของ W3C ที่ควบคุมมาตรฐานขั้นพื้นฐาน
ของเว็บและคาสั่งพื้นฐานของ web browser
การใช้งานสามารถทาได้โดยการกรอก Email ที่ใช้ในการสมัคร และรหัสผ่านลงไปในช่อง
กรอกข้อความ
รูป 6.แสดงเข้าใช้งานระบบสมาชิก
รูป 5.แสดงการทดสอบด้วย Platform ที่ต่างกัน

14. 14
หากการเข้าใช้งานผิดพลาด ระบบจะแจ้งเตือนดังรูปที่ 7 และ
ถ้าระบบสามารถเข้าใช้งานได้ จะเปลี่ยนหน้าใช้งานเป็นหน้าดัง
รูปที่ 8 เพื่อสามารถใช้งานระบบในขั้นตอนต่อไปได้
รูป 7.แสดงเข้าใช้งานระบบสมาชิกผิดพลาด
ชี้แจงว่าให้เลือกโปรแกรมที่จะดาเนินการ
จากฝั่งขวามือ แล้วโปรแกรมที่ถูกเลือกจะ
ปรากฏบริเวณนี้
เลือกโปรแกรมใช้งาน
หากท่านมิสิทธิ์ “admin” สามารถกดปุ่ม
เมื่อกดปุ่ม Init Camera แล้ว web browser
จะถามความยินยอมให้ใช้การเข้าถึงอุปกรณ์ ให้กด “อนุญาต”
ข้อความแสดงสถานะการทางาน
รูป 8.แสดงการเรียกใช้งานโปรแกรม

15. 15
เมื่อกดปุ่ม “>>ShoT<<” แล้วจะดาเนินการหยุดภาพ
ขณะที่กดปุ่มและแสดงภาพปัจจุบันในกล่องเล็ก เพื่อ
กรณีที่ผู้ใช้งานไม่ต้องการภาพเดิมสามารถกดเปลี่ยน
ภาพที่ปุ่มนี้ได้อีกครั้ง
รูป 9.แสดงภาพรวมของการใช้งาน
เมื่อกดปุ่ม “Send” ระบบจะทาการนาภาพและจุดที่ถูก
เขียนในภาพ รวมถึงข้อมูลที่จาเป็นในการกาหนด
Protocol สร้างเป็น Protocol แล้วส่งไปยัง Server
เมื่อกดปุ่ม “+Capture” ระบบจะทาการเพิ่มภาพ
ปัจจุบันเข้าไปในระบบเพิ่มจากที่มีอยู่เดิม โดยไม่ทิ้งภาพ
เดิมไป
รูป 10.แสดงแผนผังการใช้งานปุ่มต่าง

16. 16
จากรูปที่ 10 แสดงให้เห็นวิธีการกาหนดค่าให้ระบบ เพื่อที่ระบบจะได้ส่งต่อข้อมูลนี้ไปสร้าง
Protocol และส่งให้เครื่อง Server ดาเนินการต่อไป โดยกาหนดให้ต้องใส่ข้อมูล Slot ค่าเริ่มต้นที่
1 และ Point Mark เริ่มต้นที่ 4 และเมื่อดาเนินการกาหนดจุดเสร็จแล้วเท่านั้นจึงจะสามารถกด
ปุ่ม Send ได้
ระบุจานวนกลุ่มของข้อมูล ระบุจานวนจุดต่อหนึ่งชุดข้อมูล ระบุตาแหน่งของ Mouse ในภาพ
รูป 11.แสดงกาหนดข้อมูล

17. 17
2.4.4 การดาเนินการในฝั่ง Server
การดาเนินการในฝั่ง Server เมื่อ Server ไดรับข้อมูลที่ส่งเข้ามาแล้วจะทาการตรวจสอบว่า
เป็นข้อมูลประเภทใด โดยใช้ Protocol ที่กาหนดไว้ในขั้นตอนการสื่อสารแล้ว โดยการทางานใน
ฝั่งของ Server จะสามารถอธิบายได้โดยใช้แผนภาพดังนี้
1
Server รับข้อมูลจาก Client เข้ามาแล้วทาการ ตรวจสอบ
สิทธิการเข้าถึง รวมถึงอนุญาตใช้งานโปรแกรมต่างๆ ตาม
สิทธิ์ของผู้ใช้เท่านั้น และยังใช้ตรวจสอบสถานะของ
Server และใช้รันโปรแกรมอื่นๆ ที่ลงทะเบียนไว้กับ
Server
*.Temp ไฟล์ชั่วคราวที่เขียนไว้เพื่อให้โปรแกรมที่ลงทะเบียนไว้กับ
Server สามารถเรียกใช้งานได้
>>command
>>doing….
>>write file
*.bmp
โปรแกรมที่ลงทะเบียนไว้กับ Server ถูกเรียกขึ้นมาใช้งาน
โดย Server จะส่ง Parameter ให้โปรแกรมทราบว่า
โปรแกรมจะต้องไปเรียกไฟล์ใดขึ้นมาใช้
ภาพที่ได้จากการทางานของโปรแกรม

18. 18
โดยสามารถให้ Server เรียกใช้งานไฟล์ดังกล่าวเมื่อสิ้นสุดกระบวนการทางาน เพื่อส่งกลับไปให้
Client ต่อไป
จากแผนผังที่ใช้ในการอธิบายการดาเนินการฝั่ง Server สามารถสงวน Business logic ไว้ได้ฝั่ง
ผู้ใช้งานสามารถได้ใช้ฮาร์ดแวร์และซอร์ฟแวร์ที่ทันสมัยโดยไม่ต้องจาเป็นต้องปรับเปลี่ยนการใช้
งานส่วนของผู้ใช้เลย ทาให้สะดวกในการปรับปรุงผลิตภัณฑ์และบริการให้ทันสมัย จะเห็นว่า
หลักการนี้เป็นหลักการที่คล้ายคลึงกับการทางานของระบบ Cloud computing ซึ่งเป็น
เทคโนโลยีที่ได้ถูกนามาใช้จนเป็นที่นิยมในปัจจุบันเพื่อลดภาระค่าใช้จ่ายของผู้ใช้งาน และสามารถ
แบ่งปันทรัพยากรที่มีประสิทธิภาพสูงให้ผู้ใช้งานสามารถใช้งานได้โดยไม่จาเป็นต้องครอบครอง
อุปกรณ์นั้นไว้เป็นส่วนบุคคล
รูป 12.แสดงตัวอย่างของไฟล์ที่ได้จากการประมวลผล

19. 19
บทที่ 3 : สรุปและข้อเสนอแนะ
3.1 ข้อบกพร่อง หรือข้อจากัดของระบบ
ระบบที่จัดทาขึ้นในโครงการนี้มีข้อจากัดเช่น ไม่สามารถรองรับการทางานของซอร์ฟแวร์ฝั่ง
Client ที่ต่างกันได้อย่างสมบูรณ์เนื่องจากข้อจากัดของ web browser ซึ่งปัจจุบันก็ได้มีการ
พยายามยกข้อเสนอที่จะให้การใช้งานคาสั่งที่จาเป็นได้กลายเป็นมาตรฐานของ W3C (World
Wide Web Consortium) เพื่อที่จะให้ทุก web browser ใช้งานได้ครบถ้วนทุกคาสั่งได้ และลด
ปัญหาซึ่งเกิดมานานของ JavaScript ที่มีปัญหาหากเข้าเว็บบางเว็บซึ่งไม่สนับสนุนการทางาน
และปัญหาการอ่านไฟล์ที่ถูกเก็บลงซึ่งอยู่ในรูปของไฟล์ ซึ่งหากเราอ่านหรือเขียนแล้วอาจจะเกิด
ข้อผิดพลาดจากการอ่านหรือไฟล์ เนื่องมาจากชุดอักขระของไฟล์ถูกแทนด้วยตัวอักษรที่
compiler แปลภาษาว่าเป็นข้อความที่เป็นคาสั่งของโปรแกรม ดังนั้นจึงต้องแก้ปัญหาด้วยการอ่าน
หรือเขียนไฟล์แบบ binary เพื่อลดข้อผิดพลาดจากการอ่านไฟล์ประเภทนี้
รูป 13.แสดงตัวอย่างข้อมูลของไฟล์ที่มีการถอดรหัสด้วย Base64 จะเห็นว่ามี
อักขระที่อาจจะทาให้โปรแกรมเข้าใจว่าเป็นคาสั่งของโปรแกรมอยู่ด้วย และ
สังเกตว่าอาจจะมีเสียงออกจากเครื่องคอมพิวเตอร์ ขณะที่สั่งให้แสดงข้อมูลออก
ทางหน้าจอ เนื่องจากอักขระนั้นถูกอ้างอิงในตามราง ASCII เป็น Beep code

20. 20
3.2 ข้อเสนอแนะ
เนื่องจากการใช้งานทางานผ่าน WebSocket ผู้ใช้งานจึงควรที่จะศึกษาการทางานของ
Protocol ของอีกฝั่งให้เข้าใจ เพื่อสามารถที่จะส่งข้อมูลซึ่งปกติจะเป็นชุดอักขระ ส่งไปให้อีกฝั่งจึง
ต้องศึกษาข้อมูลการทางานของ WebSocket และข้อจากัดในการรับส่งข้อมูลไว้ด้วย เพราะการ
รับส่งข้อมูลหากมีชุดอักขระที่ยาวเกินไปอาจมีการตีความผิดเพี้ยน หรือทาให้อีกฝั่งมีการใช้งาน
memory เกินจนเกิดการ overflow ได้อีกด้วย
โครงการนี้จัดทาขึ้นเพื่อทดลองวิจัยเครือข่ายเท่านั้นจึงไม่มีการตรวจสอบความปลอดภัยของ
ข้อมูลเท่าที่ควร ไม่มีการปรับปรุงประสิทธิภาพของระบบ และไม่มีการคืนจานวน Client เพื่อให้
Server นากลับไปใช้ใหม่ ทั้งนี้หากต้องการนาไปใช้งานจริงก็สามารถเพิ่มส่วนนี้เข้าไปเพื่อให้เกิด
ประสิทธิภาพมากขึ้น
3.3 สรุป
การใช้งานการประมวลผลโดย
ส่งไปประมวลผลที่อีกฝั่งหนึ่ง ได้ถูก
พัฒนาจนมีประสิทธิภาพเพิ่มสูงขึ้น
ก่อให้เกิดผลให้อุปกรณ์ฝั่งผู้ใช้ไม่
จาเป็นต้องเปลี่ยนใหม่ ซึ่งเป็นการ
สิ้นเปลืองทรัพยากรของหน่วยงาน และการทาระบบงานประเภทนี้ยังก่อให้เกิดการลดข้อจากัด
ของอุปกรณ์เช่น ขนาด ความร้อน ประสิทธิภาพ และผลกระทบต่อมนุษย์หรือสิ่งแวดล้อม ของ
อุปกรณ์ฝั่งผู้ใช้งานทาให้สามารถผลิตให้มีขนาดเล็กลง ลดอุปกรณ์ที่ไม่จาเป็น และเพิ่มความเร็วใน
การประมวลผล
ในอนาคตอันใกล้ เราอาจจะเห็นอุปกรณ์ที่มีขนาดเล็ก ประสิทธิภาพสูง ภายใต้การทางานโดย
ผ่านเครือข่ายคอมพิวเตอร์ที่ขยายขอบข่ายการใช้งาน และมีความเร็วในการใช้งานที่สูงขึ้น และส่ง
ผลลัพธ์ที่ได้กลับมาที่ผู้ใช้ ได้แบบ Real time มากขึ้น
รูป 14.ตัวอย่างแว่นตาที่ถูกดัดแปลงให้เป็นแว่นตาอิเล็กทรอนิกส์

21. 21
บทที่ 4 : บรรณานุกรม
4.1 บรรณานุกรม
- (http://en.wikipedia.org/wiki/WebSocket. 2012)
- John McCutchan. (18 Nov 2012). Writing Your Own WebSocket Server.
http://www.altdevblogaday.com/2012/01/23/writing-your-own-websocket-server/
- (http://en.wikipedia.org/wiki/WebSocket. 2012)
- Jacob Seidelin. (20 Nov 2012). Saving Canvas data to image file.
http://www.nihilogic.dk/labs/canvas2image/
- I. Fette. (20 Nov 2012). The WebSocket Protocol. http://tools.ietf.org/html/rfc6455 , ISSN:
2070-1721
- Andy Green. (20 Nov 2012). Libwebsockets : C Websockets Server Library.
http://git.warmcat.com/cgi-bin/cgit/libwebsockets/