HTML5 - WebSockets

WebSockets เป็นเทคโนโลยีการสื่อสารแบบสองทิศทางรุ่นใหม่สำหรับเว็บแอปพลิเคชันที่ทำงานผ่านซ็อกเก็ตเดียวและเปิดเผยผ่านอินเทอร์เฟซ JavaScript ในเบราว์เซอร์ที่รองรับ HTML 5

เมื่อคุณได้รับการเชื่อมต่อ Web Socket กับเว็บเซิร์ฟเวอร์คุณสามารถส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์โดยเรียกไฟล์ send() วิธีการและรับข้อมูลจากเซิร์ฟเวอร์ไปยังเบราว์เซอร์โดยไฟล์ onmessage จัดการเหตุการณ์.

ต่อไปนี้เป็น API ที่สร้างวัตถุ WebSocket ใหม่

var Socket = new WebSocket(url, [protocal] );

นี่คืออาร์กิวเมนต์แรก url ระบุ URL ที่จะเชื่อมต่อ แอตทริบิวต์ที่สองโปรโตคอลเป็นทางเลือกและหากมีระบุโปรโตคอลย่อยที่เซิร์ฟเวอร์ต้องสนับสนุนเพื่อให้การเชื่อมต่อสำเร็จ

คุณสมบัติ WebSocket

ต่อไปนี้เป็นแอตทริบิวต์ของวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

ซีเนียร์	คุณสมบัติและคำอธิบาย
1	Socket.readyState แอตทริบิวต์ readyState แบบอ่านอย่างเดียวแสดงถึงสถานะของการเชื่อมต่อ สามารถมีค่าดังต่อไปนี้ - ค่า 0 แสดงว่ายังไม่ได้สร้างการเชื่อมต่อ ค่า 1 แสดงว่าการเชื่อมต่อถูกสร้างขึ้นและสามารถสื่อสารได้ ค่า 2 แสดงว่าการเชื่อมต่อกำลังดำเนินการปิดการจับมือกัน ค่า 3 แสดงว่าการเชื่อมต่อถูกปิดหรือไม่สามารถเปิดได้
2	Socket.bufferedAmount แอตทริบิวต์แบบอ่านอย่างเดียว bufferedAmount แสดงจำนวนไบต์ของข้อความ UTF-8 ที่ได้รับการจัดคิวโดยใช้เมธอด send ()

เหตุการณ์ WebSocket

ต่อไปนี้เป็นเหตุการณ์ที่เกี่ยวข้องกับวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

เหตุการณ์	จัดการเหตุการณ์	คำอธิบาย
เปิด	Socket.onopen	เหตุการณ์นี้เกิดขึ้นเมื่อสร้างการเชื่อมต่อซ็อกเก็ต
ข้อความ	Socket.onmessage	เหตุการณ์นี้เกิดขึ้นเมื่อไคลเอนต์ได้รับข้อมูลจากเซิร์ฟเวอร์
ข้อผิดพลาด	Socket.onerror	เหตุการณ์นี้เกิดขึ้นเมื่อมีข้อผิดพลาดในการสื่อสาร
ปิด	Socket.onclose	เหตุการณ์นี้เกิดขึ้นเมื่อปิดการเชื่อมต่อ

วิธี WebSocket

ต่อไปนี้เป็นวิธีการที่เกี่ยวข้องกับวัตถุ WebSocket สมมติว่าเราสร้างวัตถุ Socket ตามที่กล่าวไว้ข้างต้น -

ซีเนียร์	วิธีการและคำอธิบาย
1	Socket.send() วิธีการส่ง (ข้อมูล) ส่งข้อมูลโดยใช้การเชื่อมต่อ
2	Socket.close() จะใช้เมธอด close () เพื่อยุติการเชื่อมต่อที่มีอยู่

ตัวอย่าง WebSocket

WebSocket คือซ็อกเก็ต TCP แบบสองทิศทางมาตรฐานระหว่างไคลเอนต์และเซิร์ฟเวอร์ ซ็อกเก็ตเริ่มต้นจากการเชื่อมต่อ HTTP จากนั้น "อัปเกรด" เป็นซ็อกเก็ต TCP หลังจากการจับมือ HTTP หลังจากการจับมือแล้วฝ่ายใดฝ่ายหนึ่งสามารถส่งข้อมูลได้

HTML ฝั่งไคลเอ็นต์และโค้ด JavaScript

ในขณะที่เขียนบทช่วยสอนนี้มีเว็บเบราว์เซอร์เพียงไม่กี่เว็บที่รองรับอินเทอร์เฟซ WebSocket () คุณสามารถลองตัวอย่างต่อไปนี้กับ Chrome, Mozilla, Opera และ Safari เวอร์ชันล่าสุด

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

ติดตั้ง pywebsocket

ก่อนที่คุณจะทดสอบโปรแกรมไคลเอนต์ข้างต้นคุณต้องมีเซิร์ฟเวอร์ที่รองรับ WebSocket ดาวน์โหลด mod_pywebsocket-xxxtar.gz จากpywebsocketซึ่งมีจุดมุ่งหมายเพื่อให้ส่วนขยาย Web Socket สำหรับ Apache HTTP Server และติดตั้งตามขั้นตอนเหล่านี้

คลายซิปและคลายไฟล์ที่ดาวน์โหลด
เข้าไปข้างใน pywebsocket-x.x.x/src/ ไดเรกทอรี
$ python setup.py build
$ sudo python setup.py ติดตั้ง
จากนั้นอ่านเอกสารโดย -
- $ pydoc mod_pywebsocket

สิ่งนี้จะติดตั้งลงในสภาพแวดล้อม python ของคุณ

เริ่มเซิร์ฟเวอร์

ไปที่ไฟล์ pywebsocket-x.x.x/src/mod_pywebsocket โฟลเดอร์และเรียกใช้คำสั่งต่อไปนี้ -

$sudo python standalone.py -p 9998 -w ../example/

สิ่งนี้จะเริ่มการฟังเซิร์ฟเวอร์ที่พอร์ต 9998 และใช้ไฟล์ handlers ไดเร็กทอรีที่ระบุโดยอ็อพชัน -w ที่ echo_wsh.py ของเราอยู่

ขณะนี้ใช้เบราว์เซอร์ Chrome ให้เปิดไฟล์ html ที่คุณสร้างขึ้นในตอนเริ่มต้น หากเบราว์เซอร์ของคุณรองรับ WebSocket () คุณจะได้รับการแจ้งเตือนว่าเบราว์เซอร์ของคุณรองรับ WebSocket และสุดท้ายเมื่อคุณคลิกที่ "เรียกใช้ WebSocket" คุณจะได้รับข้อความ Goodbye ที่ส่งโดยสคริปต์เซิร์ฟเวอร์