บทนำบทความ WebJX: คุณสมบัติใหม่ที่ยอดเยี่ยมใน HTML5 คือ WebSockets ซึ่งช่วยให้เราสามารถพูดคุยกับเซิร์ฟเวอร์โดยไม่ต้องมีคำขอ AJAX วันนี้บิงโกจะอนุญาตให้ทุกคนเรียกใช้ WebSocket ผ่านทางฝั่งเซิร์ฟเวอร์ของสภาพแวดล้อม PHP สร้างไคลเอนต์และส่งและรับข้อมูลฝั่งเซิร์ฟเวอร์ผ่านโปรโตคอล WebSockets WebSockets คืออะไร? WebSockets เป็นแบบสองทิศทางในอินเทอร์เฟซ (TCP)
คุณสมบัติใหม่ที่ยอดเยี่ยมใน HTML5 คือ WebSockets ซึ่งช่วยให้เราสามารถพูดคุยกับเซิร์ฟเวอร์ได้โดยไม่ต้องมีคำขอ AJAX วันนี้บิงโกจะอนุญาตให้ทุกคนเรียกใช้ WebSocket ผ่านทางฝั่งเซิร์ฟเวอร์ของสภาพแวดล้อม PHP สร้างไคลเอนต์และส่งและรับข้อมูลฝั่งเซิร์ฟเวอร์ผ่านโปรโตคอล WebSockets
WebSockets คืออะไร?
WebSockets เป็นเทคโนโลยีที่ดำเนินการสื่อสารแบบสองทิศทางบนอินเทอร์เฟซ (TCP) และประเภทเทคโนโลยีผลักดัน ในเวลาเดียวกัน WebSockets จะยังคงอยู่บนพื้นฐานของมาตรฐาน W3C จนถึงตอนนี้เบราว์เซอร์ Chrome และ Safari รุ่นล่าสุดได้รองรับ WebSockets แล้ว
WebSockets จะแทนที่อะไร?
WebSockets สามารถแทนที่การสำรวจระยะยาว (เทคโนโลยีการผลักดันเซิร์ฟเวอร์ PHP) ซึ่งเป็นแนวคิดที่น่าสนใจ ไคลเอนต์ส่งคำขอไปยังเซิร์ฟเวอร์ ตอนนี้เซิร์ฟเวอร์จะไม่ตอบสนองต่อข้อมูลที่ยังไม่ได้เตรียมไว้ มันจะเปิดการเชื่อมต่อไว้จนกว่าข้อมูลล่าสุดจะพร้อมที่จะส่ง หลังจากนั้นลูกค้าจะได้รับข้อมูลแล้วส่งคำขออื่น สิ่งนี้มีประโยชน์: ลดเวลาแฝงในการเชื่อมต่อทั้งสองและไม่จำเป็นต้องสร้างการเชื่อมต่อใหม่อีกครั้งเมื่อการเชื่อมต่อหนึ่งเปิดอยู่แล้ว แต่การโพลที่ยาวนานไม่ใช่เทคนิคแฟนซีและยังคงเป็นไปได้ที่การร้องขอจะหยุดลงดังนั้นจะต้องมีการเชื่อมต่อใหม่
แอปพลิเคชัน AJAX บางตัวใช้เทคโนโลยีที่กล่าวถึงข้างต้นซึ่งมักเกิดจากการใช้ทรัพยากรต่ำ
แค่คิดว่ามันจะดีแค่ไหนถ้าเซิร์ฟเวอร์จะเริ่มต้นและส่งข้อมูลไปยังลูกค้าที่ต้องการรับโดยไม่ต้องตั้งค่าพอร์ตการเชื่อมต่อล่วงหน้า! ยินดีต้อนรับสู่โลกแห่งเทคโนโลยีผลักดัน!
ขั้นตอนที่ 1: รับ WebSocket Server
บทช่วยสอนนี้จะมุ่งเน้นไปที่การสร้างไคลเอนต์มากกว่าการดำเนินการเซิร์ฟเวอร์
ฉันใช้ XAMPP ตาม Windows 7 เพื่อใช้งาน PHP ในเครื่อง PHPWebSockets เป็นเซิร์ฟเวอร์ PHP WebSocket (จากประสบการณ์ของฉันมีปัญหาเล็กน้อยเกี่ยวกับรุ่นนี้ฉันได้ทำการแก้ไขและอัปโหลดไฟล์ต้นฉบับเพื่อแบ่งปันกับคุณ) เวอร์ชันที่แตกต่างกันต่อไปนี้สามารถใช้ WebSocket ได้ หากไม่สามารถใช้งานได้คุณสามารถลองใช้เวอร์ชันอื่นหรืออ่านบทช่วยสอนต่อไปนี้ต่อไป
jwebsocket (Java)
เว็บซ็อกเก็ต-รูบี้ (ทับทิม)
ซ็อกเก็ต io-node (node.js)
เริ่มต้นเซิร์ฟเวอร์ Apache
ขั้นตอนที่ 2: แก้ไข URL และพอร์ต
ตามการติดตั้งก่อนหน้าของคุณแก้ไขเซิร์ฟเวอร์ต่อไปนี้เป็นตัวอย่างใน setup.class.php:
-
เรียกดูไฟล์และทำการเปลี่ยนแปลงตามความเหมาะสม
ขั้นตอนที่ 3: เริ่มสร้างไคลเอนต์
นี่คือไฟล์ client.php ของฉัน:
-
-
-
-
> เช่นลอง 'สวัสดี', 'ชื่อ', 'อายุ', 'วันนี้'>
> ตัดการเชื่อมต่อ >>
</html>
เราได้สร้างเทมเพลตพื้นฐาน: คอนเทนเนอร์บันทึกการแชทกล่องอินพุตอินพุตและปุ่มตัดการเชื่อมต่อ
ขั้นตอนที่ 4: เพิ่ม CSS บางส่วน
ไม่มีรหัสแฟนซีเพียงจัดการกับสไตล์ของแท็ก
ร่างกาย
สีเทา
-
ขั้นตอนที่ 5: กิจกรรม WebSocket
ก่อนอื่นลองทำความเข้าใจแนวคิดของกิจกรรม WebSocket:
กิจกรรม WebSocket:
เราจะใช้สามกิจกรรม WebSocket:
Onopen: เมื่อเปิดอินเทอร์เฟซ
OnMessage: เมื่อได้รับข้อความ
onClose: เมื่ออินเทอร์เฟซถูกปิด
เราจะบรรลุเป้าหมายนี้ได้อย่างไร?
ก่อนอื่นสร้างวัตถุ WebSocket
จากนั้นตรวจจับเหตุการณ์ดังนี้
ซ็อกเก็ต
-
ทำสิ่งนี้เมื่อเราได้รับข้อความ:
socket.msgmsg); //สุดยอด!
-
แต่เรายังคงพยายามหลีกเลี่ยงการใช้การแจ้งเตือนและตอนนี้เราสามารถรวมสิ่งที่เราได้เรียนรู้เข้ากับหน้าไคลเอนต์
ขั้นตอนที่ 6: JavaScript
ก่อนอื่นเราใส่รหัสลงในเอกสารฟังก์ชันพร้อมของ jQuery จากนั้นเราก็ต้องตรวจสอบว่าเบราว์เซอร์ของผู้ใช้รองรับ WebSocket หรือไม่ หากไม่รองรับเราจะเพิ่มลิงค์ไปยังหน้าเบราว์เซอร์ Chrome
-
หน้าต่าง
-
-
อย่างที่คุณเห็นหากเบราว์เซอร์ของผู้ใช้รองรับ WebSocket เราจะเรียกใช้ฟังก์ชัน Connect () นี่คือฟังก์ชั่นหลักเราจะเริ่มสร้างเปิดปิดและรับกิจกรรม
เราจะกำหนด URL บนเซิร์ฟเวอร์ของเรา
คุณอาจพบว่าทำไมไม่มี HTTP ใน URL? ใช่นี่คือ URL WebSocket ที่ใช้โปรโตคอลที่แตกต่างกัน นี่คือไดอะแกรมการแยก URL: