![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](https://image.slidesharecdn.com/uejaxlzcsmasusmscwm6-140626071927-phpapp02/85/Websocket-HTML5-6-320.jpg)
![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
ชื่อตารางในฐานข้อมูลที่ต้องการใช้](https://image.slidesharecdn.com/uejaxlzcsmasusmscwm6-140626071927-phpapp02/85/Websocket-HTML5-8-320.jpg)
![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](https://image.slidesharecdn.com/uejaxlzcsmasusmscwm6-140626071927-phpapp02/85/Websocket-HTML5-10-320.jpg)
![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](https://image.slidesharecdn.com/uejaxlzcsmasusmscwm6-140626071927-phpapp02/85/Websocket-HTML5-11-320.jpg)
Websocket & HTML5
- 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
- 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/