websocket & html5
DESCRIPTION
Websocket & HTML5 my projectTRANSCRIPT
รายงานโครงการ
การสงขอมลผาน WebSocket ถง Server
เพอลดภาระงาน Client และรองรบการน าไปประมวลผลหลายภาษา
จดท าโดย
B5304516 นายภรเดช สดส
เสนอ
ผชวยศาสตราจารย ดร.ปรเมศวร หอแกว
รายงานประกอบรายวชา 423422 โครงการวศวกรรมคอมพวเตอร 2 ภาคการศกษาท 2/2555
มหาวทยาลยเทคโนโลยสรนาร จ.นครราชสมา
สารบญ
เรอง หนา
บทท 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
แผนผงการท างานของระบบ
1
*.bmp
>>command
>>doing….
>>write file
*.Temp
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
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
บทท 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
โดย 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
จะพบขอสงเกตคอถงแมวาการท า 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
โดยไดมการก าหนดใหหากตอนสมครใชงานผใชไดใส code ทอยในฐานขอมลไดตรงกบ
codepromo จะท าการแปลงขอมล class จาก “member” ซงโปรแกรมจ าไมก าหนดสทธให
เพมขอมล เปน “admin” ซงสามารถเพมขอมลได
2.3 ก าหนด Protocol
Protocol คอขอตกลงรวมกนในการตดตอสอสาร ระหวางสองฝายเพอใหมความเขาใจในการ
ใชงานไดตรงกน และลดขอผดพลาดในการสอสาร ดงนนในโครงการนเมอมการตดตอสอสารกน
ระหวางสองฝายจงจ าเปนทจะตองม Protocol มาก าหนดการใชงาน ซงไดก าหนด Protocol ใน
การใชงานไวดงน
ฝง Client สงถงฝง Server
RegHeader|[email protected]
RegHeader คอ บอกวาเปนสวนของการลงทะเบยนผใช แลวคนดวย ‘|’ แบงกรณเปน
[email protected] คอ Email ทใชสมคร [email protected]
Password คอ password ทตองการ
Code คอ รหสในการใชงานทจะเอาไปตรวจสอบในฐานขอมลวาไดสทธใดในการเขาใช
Login คอ บอกวาเปนสวนของการเขาใชงาน แลวคนดวย ‘|’ แบงกรณเปน
[email protected] คอ Email ทใชสมคร [email protected]
Password คอ password ทกรอกในขนตอนการสมคร
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
ฝง 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
2.4.2 การลงทะเบยนเพอขอบญชผใชงาน
ในการใชงานจ าเปนตองมบญชผใชเพอใชในการจดการการเขาถงขอมลตามสทธทตนเองมอย
ดงนนจงไดใชระบบสมครสมาชกอางองกบฐานขอมลดงทกลาวไวแลวในตอนตน และขนตอนนจะ
แสดงใหเหนถงการสมครสมาชกเพอขอบญชผใชงาน
เมอเขาหนาแรก และ Server เชอมตอกบ Client เรยบรอยแลว ผใชงานจ าเปนตองมบญช
ผใชในการเขาใชงาน สามารถสมครไดโดยกดปม Register ระบบสมครสมาชจะเปลยนหนาเปน
หนาสมครสมาชก ใหกรอกขอความ E-mail , Password ทตรงกนทงสองชอง และ Code หากม
Code ทสามารถเพมสทธการใชงาน หากไมทราบใหใชตามทระบบตงคาเรมตนใหในกรณนคอ
“SUT” หรอคาอนๆกได และเมอสมครสมาชกเรยบรอยแลวทานสามารถกดทรปกญแจเพอ
กลบไปทหนาลงชอเขาใชงาน
รป 4.แสดงขนตอนการสมครสมาชก
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
หากการเขาใชงานผดพลาด ระบบจะแจงเตอนดงรปท 7 และ
ถาระบบสามารถเขาใชงานได จะเปลยนหนาใชงานเปนหนาดง
รปท 8 เพอสามารถใชงานระบบในขนตอนตอไปได
รป 7.แสดงเขาใชงานระบบสมาชกผดพลาด
ชแจงวาใหเลอกโปรแกรมทจะด าเนนการ
จากฝงขวามอ แลวโปรแกรมทถกเลอกจะ
ปรากฏบรเวณน
เลอกโปรแกรมใชงาน
หากทานมสทธ “admin” สามารถกดปม
เมอกดปม Init Camera แลว web browser
จะถามความยนยอมใหใชการเขาถงอปกรณ ใหกด “อนญาต”
ขอความแสดงสถานะการท างาน
รป 8.แสดงการเรยกใชงานโปรแกรม
15
เมอกดปม “>>ShoT<<” แลวจะด าเนนการหยดภาพ
ขณะทกดปมและแสดงภาพปจจบนในกลองเลก เพอ
กรณทผใชงานไมตองการภาพเดมสามารถกดเปลยน
ภาพทปมนไดอกครง
รป 9.แสดงภาพรวมของการใชงาน
เมอกดปม “Send” ระบบจะท าการน าภาพและจดทถก
เขยนในภาพ รวมถงขอมลทจ าเปนในการก าหนด
Protocol สรางเปน Protocol แลวสงไปยง Server
เมอกดปม “+Capture” ระบบจะท าการเพมภาพ
ปจจบนเขาไปในระบบเพมจากทมอยเดม โดยไมทงภาพ
เดมไป
รป 10.แสดงแผนผงการใชงานปมตาง
16
จากรปท 10 แสดงใหเหนวธการก าหนดคาใหระบบ เพอทระบบจะไดสงตอขอมลนไปสราง
Protocol และสงใหเครอง Server ด าเนนการตอไป โดยก าหนดใหตองใสขอมล Slot คาเรมตนท
1 และ Point Mark เรมตนท 4 และเมอด าเนนการก าหนดจดเสรจแลวเทานนจงจะสามารถกด
ปม Send ได
ระบจ านวนกลมของขอมล ระบจ านวนจดตอหนงชดขอมล ระบต าแหนงของ Mouse ในภาพ
รป 11.แสดงก าหนดขอมล
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
โดยสามารถให Server เรยกใชงานไฟลดงกลาวเมอสนสดกระบวนการท างาน เพอสงกลบไปให
Client ตอไป
จากแผนผงทใชในการอธบายการด าเนนการฝง Server สามารถสงวน Business logic ไวไดฝง
ผใชงานสามารถไดใชฮารดแวรและซอรฟแวรททนสมยโดยไมตองจ าเปนตองปรบเปลยนการใช
งานสวนของผใชเลย ท าใหสะดวกในการปรบปรงผลตภณฑและบรการใหทนสมย จะเหนวา
หลกการนเปนหลกการทคลายคลงกบการท างานของระบบ Cloud computing ซงเปน
เทคโนโลยทไดถกน ามาใชจนเปนทนยมในปจจบนเพอลดภาระคาใชจายของผใชงาน และสามารถ
แบงปนทรพยากรทมประสทธภาพสงใหผใชงานสามารถใชงานไดโดยไมจ าเปนตองครอบครอง
อปกรณนนไวเปนสวนบคคล
รป 12.แสดงตวอยางของไฟลทไดจากการประมวลผล
19
บทท 3 : สรปและขอเสนอแนะ
3.1 ขอบกพรอง หรอขอจ ากดของระบบ
ระบบทจดท าขนในโครงการนมขอจ ากดเชน ไมสามารถรองรบการท างานของซอรฟแวรฝง
Client ทตางกนไดอยางสมบรณเนองจากขอจ ากดของ web browser ซงปจจบนกไดมการ
พยายามยกขอเสนอทจะใหการใชงานค าสงทจ าเปนไดกลายเปนมาตรฐานของ W3C (World
Wide Web Consortium) เพอทจะใหทก web browser ใชงานไดครบถวนทกค าสงได และลด
ปญหาซงเกดมานานของ JavaScript ทมปญหาหากเขาเวบบางเวบซงไมสนบสนนการท างาน
และปญหาการอานไฟลทถกเกบลงซงอยในรปของไฟล ซงหากเราอานหรอเขยนแลวอาจจะเกด
ขอผดพลาดจากการอานหรอไฟล เนองมาจากชดอกขระของไฟลถกแทนดวยตวอกษรท
compiler แปลภาษาวาเปนขอความทเปนค าสงของโปรแกรม ดงนนจงตองแกปญหาดวยการอาน
หรอเขยนไฟลแบบ binary เพอลดขอผดพลาดจากการอานไฟลประเภทน
รป 13.แสดงตวอยางขอมลของไฟลทมการถอดรหสดวย Base64 จะเหนวาม
อกขระทอาจจะท าใหโปรแกรมเขาใจวาเปนค าสงของโปรแกรมอยดวย และ
สงเกตวาอาจจะมเสยงออกจากเครองคอมพวเตอร ขณะทสงใหแสดงขอมลออก
ทางหนาจอ เนองจากอกขระนนถกอางองในตามราง ASCII เปน Beep code
20
3.2 ขอเสนอแนะ
เนองจากการใชงานท างานผาน WebSocket ผใชงานจงควรทจะศกษาการท างานของ
Protocol ของอกฝงใหเขาใจ เพอสามารถทจะสงขอมลซงปกตจะเปนชดอกขระ สงไปใหอกฝงจง
ตองศกษาขอมลการท างานของ WebSocket และขอจ ากดในการรบสงขอมลไวดวย เพราะการ
รบสงขอมลหากมชดอกขระทยาวเกนไปอาจมการตความผดเพยน หรอท าใหอกฝงมการใชงาน
memory เกนจนเกดการ overflow ไดอกดวย
โครงการนจดท าขนเพอทดลองวจยเครอขายเทานนจงไมมการตรวจสอบความปลอดภยของ
ขอมลเทาทควร ไมมการปรบปรงประสทธภาพของระบบ และไมมการคนจ านวน Client เพอให
Server น ากลบไปใชใหม ทงนหากตองการน าไปใชงานจรงกสามารถเพมสวนนเขาไปเพอใหเกด
ประสทธภาพมากขน
3.3 สรป
การใชงานการประมวลผลโดย
สงไปประมวลผลทอกฝงหนง ไดถก
พฒนาจนมประสทธภาพเพมสงขน
กอใหเกดผลใหอปกรณฝงผใชไม
จ าเปนตองเปลยนใหม ซงเปนการ
สนเปลองทรพยากรของหนวยงาน และการท าระบบงานประเภทนยงกอใหเกดการลดขอจ ากด
ของอปกรณเชน ขนาด ความรอน ประสทธภาพ และผลกระทบตอมนษยหรอสงแวดลอม ของ
อปกรณฝงผใชงานท าใหสามารถผลตใหมขนาดเลกลง ลดอปกรณทไมจ าเปน และเพมความเรวใน
การประมวลผล
ในอนาคตอนใกล เราอาจจะเหนอปกรณทมขนาดเลก ประสทธภาพสง ภายใตการท างานโดย
ผานเครอขายคอมพวเตอรทขยายขอบขายการใชงาน และมความเรวในการใชงานทสงขน และสง
ผลลพธทไดกลบมาทผใช ไดแบบ Real time มากขน
รป 14.ตวอยางแวนตาทถกดดแปลงใหเปนแวนตาอเลกทรอนกส
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/