1. Home
  2. HTML5 WebSocket

บทช่วยสอน HTML5 WebSocket ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ คุณสมบัติ WebSocket,เหตุการณ์ WebSocket,วิธี WebSocket,เช่น WebSocket,pywebsocket การติดตั้ง,

HTML5 WebSocket

HTML5 WebSocket เป็นจุดเริ่มต้นให้บริการโดยการสื่อสารแบบ full-duplex กว่าโปรโตคอล TCP เชื่อมต่อเดียว

ใน WebSocket API ที่เบราว์เซอร์และเซิร์ฟเวอร์เพียงเพื่อกระทำการจับมือกันแล้วระหว่างเบราเซอร์และเซิร์ฟเวอร์ในการก่อตัวของอย่างรวดเร็วติดตาม คุณสามารถถ่ายโอนข้อมูลโดยตรงระหว่างกัน

เบราว์เซอร์ส่งไปยังเซิร์ฟเวอร์ผ่านคำขอ JavaScript เพื่อสร้างการเชื่อมต่อ WebSocket การเชื่อมต่อจะจัดตั้งขึ้นไคลเอ็นต์และเซิร์ฟเวอร์ที่สามารถเชื่อมต่อโดยตรงกับการแลกเปลี่ยนข้อมูลผ่านทาง TCP

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

WebSocket API ต่อไปนี้จะใช้ในการสร้างวัตถุ 

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

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

คุณสมบัติ WebSocket

เหล่านี้เป็นวัตถุแอตทริบิวต์ WebSocket สมมติว่าเราใช้รหัสดังกล่าวข้างต้นในการสร้างวัตถุซ็อกเก็ต:

คุณสมบัติ ลักษณะ
Socket.readyState

คุณลักษณะอ่านอย่างเดียวreadyState แสดงสถานะการเชื่อมต่อสามารถมีค่าต่อไปนี้:

  • 0 - แสดงให้เห็นว่าการเชื่อมต่อยังไม่ได้รับการจัดตั้งขึ้น

  • 1 - แสดงให้เห็นการเชื่อมต่อจะจัดตั้งขึ้นก็สามารถติดต่อสื่อสาร

  • 2 - แสดงให้เห็นว่าการเชื่อมต่อถูกปิด

  • 3 - แสดงให้เห็นว่าการเชื่อมต่อได้ถูกปิดการเชื่อมต่อหรือไม่สามารถเปิดได้

Socket.bufferedAmount

คุณลักษณะอ่านอย่างเดียวbufferedAmount ได้รับการส่ง () จะอยู่ในคิวรอการโอน แต่ยังไม่ได้ออก UTF-8 ไบต์ข้อความ

เหตุการณ์ WebSocket

นี่คือวัตถุเหตุการณ์ WebSocket สมมติว่าเราใช้รหัสดังกล่าวข้างต้นในการสร้างวัตถุซ็อกเก็ต:

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

วิธี WebSocket

นี่คือวิธีการที่วัตถุ WebSocket สมมติว่าเราใช้รหัสดังกล่าวข้างต้นในการสร้างวัตถุซ็อกเก็ต:

ทาง ลักษณะ
Socket.send ()

ใช้การเชื่อมต่อในการส่งข้อมูล

Socket.close ()

ปิดการเชื่อมต่อ

เช่น WebSocket

โปรโตคอลธรรมชาติ WebSocket เป็นโปรโตคอล TCP-based

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

HTML และ JavaScript ไคลเอ็นต์

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

เนื้อหาของแฟ้ม w3big_websocket 

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>本教程(w3write.com)</title>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中th.");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收th.");
               };
				
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭th."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

pywebsocket การติดตั้ง

ก่อนที่จะดำเนินโครงการดังกล่าวข้างต้นเราต้องสร้างบริการ WebSocket การสนับสนุน จาก pywebsocket mod_pywebsocket ดาวน์โหลดหรือใช้คำสั่ง Git การดาวน์โหลด: 

git clone https://github.com/google/pywebsocket.git

สนับสนุน mod_pywebsocket สภาพแวดล้อมหลามจำเป็น

mod_pywebsocket ของ Apache ใช้นามสกุลเว็บซ็อกเก็ตขั้นตอนการติดตั้งมีดังนี้

  • Unzip ไฟล์ที่ดาวน์โหลดมา

  • ป้อนไดเรกทอรีpywebsocket

  • เรียกใช้: 

    $ python setup.py build
$ sudo python setup.py install

  • ดูเอกสาร: 

    $ pydoc mod_pywebsocket

เปิดบริการ

รันคำสั่งต่อไปนี้ในpywebsocket ไดเรกทอรี / mod_pywebsocket:

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

คำสั่งดังกล่าวจะเปิดบริการหมายเลขพอร์ต 9998 ใช้ -w เพื่อตั้ง echo_wsh.py จัดการไดเรกทอรีอยู่

ตอนนี้เราสามารถเปิดไฟล์ w3big_websocket คุณสร้างขึ้นก่อนหน้านี้ในเบราว์เซอร์ Chrome หากเบราว์เซอร์ของคุณสนับสนุน WebSocket () คลิก "Run WebSocket" คุณสามารถเห็นกระบวนการทั้งหมดขั้นตอนของหน้าต่าง pop-up กระบวนการ Gif สาธิตแต่ละ

เมื่อเราหยุดให้บริการก็จะปรากฏขึ้น "ปิดการเชื่อมต่อ thth "

บทแนะนำยอดนิยม

Contact US

HTML5 WebSocket
10/30