websocket+sockjs+stompjs คำอธิบายโดยละเอียดและโค้ดตัวอย่าง

เมื่อเร็ว ๆ นี้ มีข้อกำหนดของโปรเจ็กต์ให้ใช้ websocket ในตอนแรกฉันคิดว่ามันง่ายมาก แต่เมื่อฉันพบปัญหาและเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ ฉันพบว่า websocket นั้นไม่ง่ายอย่างที่คิด บนไคลเอนต์

ทุกคนคุ้นเคยกับโปรโตคอลการถ่ายโอน http ไฮเปอร์เท็กซ์เป็นอย่างดี เวอร์ชัน 2.0 หลายเวอร์ชันที่เริ่มต้นจาก http1.1 ได้เปิด Keep-Alive ไว้เป็นค่าเริ่มต้นเพื่อรักษาความต่อเนื่องในการเชื่อมต่อ พูดง่ายๆ ก็คือ เมื่อเปิดหน้าเว็บ การเชื่อมต่อ TCP ระหว่างไคลเอ็นต์และเซิร์ฟเวอร์ที่ใช้ในการส่งข้อมูล http จะไม่ใช่ ใช้งานได้นานขึ้นจะถูกปิดหากลูกค้าเข้าถึงหน้าเว็บบนเซิร์ฟเวอร์นี้อีกครั้ง จะยังคงใช้การเชื่อมต่อที่สร้างขึ้นนี้ต่อไป ซึ่งจะช่วยลดการใช้ทรัพยากรและการเพิ่มประสิทธิภาพ แต่ Keep-Alive ยังมีการจำกัดเวลาและยังมีไคลเอนต์ที่สามารถเริ่มต้นคำขอเพื่อรับข้อมูลที่ส่งคืนเท่านั้นและไม่สามารถรับได้ สำหรับข้อมูลที่ส่งไปในพื้นหลัง websocket จะเกิดขึ้น

Websocket เป็นหนึ่งในคุณสมบัติใหม่ของ HTML5 จุดประสงค์คือเพื่อสร้างวิธีการสื่อสารฟูลดูเพล็กซ์ระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ แก้ปัญหาการใช้ทรัพยากรมากเกินไปที่เกิดจากการตอบกลับคำขอ http และจัดเตรียมวิธีการนำไปใช้ใหม่สำหรับแอปพลิเคชันสถานการณ์พิเศษ เช่น แชท การซื้อขายหุ้น เกม และอุตสาหกรรมอื่น ๆ ที่มีความต้องการเรียลไทม์สูง

ทั้ง http และ websocket ขึ้นอยู่กับ TCP (Transmission Control Protocol) Websocket ถือเป็นส่วนเสริมของโปรโตคอล http

SockJS เป็นไลบรารี JavaScript เพื่อจัดการกับปัญหาที่เบราว์เซอร์จำนวนมากไม่รองรับโปรโตคอล WebSocket จึงได้ออกแบบ SockJs สำรอง SockJS เป็นการจำลองเทคโนโลยี WebSocket SockJS จะสอดคล้องกับ WebSocket API มากที่สุดเท่าที่จะเป็นไปได้ แต่หากไม่มีเทคโนโลยี WebSocket ก็จะตกเป็นวิธีการโพลโดยอัตโนมัติ

STOMP- โปรโตคอลข้อความเชิงข้อความอย่างง่าย - โปรโตคอลข้อความเชิงข้อความอย่างง่าย

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

กล่าวโดยสรุป WebSocket เป็นโปรโตคอลพื้นฐาน SockJS เป็นทางเลือกแทน WebSocket และโปรโตคอลพื้นฐาน และ STOMP เป็นโปรโตคอลชั้นบนที่ใช้ WebSocket (SockJS)

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

2. การใช้ WebSocket (SockJS) โดยตรงนั้นคล้ายกับการใช้ซ็อกเก็ต TCP ในการเขียนเว็บแอปพลิเคชันมาก เนื่องจากไม่มีโปรโตคอลระดับสูง เราจึงต้องกำหนดความหมายของข้อความที่ส่งระหว่างแอปพลิเคชัน และเรายังต้องแน่ใจว่าปลายทั้งสองข้างด้วย ของการเชื่อมต่อสามารถเป็นไปตามความหมายเหล่านี้

3. เช่นเดียวกับที่ HTTP เพิ่มเลเยอร์โมเดลการตอบสนองคำขอบนซ็อกเก็ต TCP STOMP จัดเตรียมเลเยอร์รูปแบบเส้นตามเฟรมที่ด้านบนของ WebSocket เพื่อกำหนดความหมายของข้อความ

ติดตั้ง sockjs-client และ stompjs โปรดใส่ใจที่นี่ ฉันพบใน stompjs: เวอร์ชัน ^2.3.3 ที่เมื่อแนะนำ stompjs จะไม่พบโมดูล net จะถูกรายงาน คุณต้องดำเนินการติดตั้ง npm ในไดเรกทอรีรากของโมดูล stompjs นี่เป็นปัญหาที่แปลก

โมดูลนำเข้า:

 นำเข้า SockJS จาก 'sockjs-client'; นำเข้า Stomp จาก 'stompjs'; // ฟังก์ชั่นการเชื่อมต่อ ให้หมายเลข = 1; ฟังก์ชั่นเชื่อมต่อใหม่ (socketUrl) { ให้ url = `$ {BASE_URL}/ws/sdfpoint`; // ที่อยู่การเชื่อมต่อ/ / สร้างวัตถุการเชื่อมต่อ (ยังไม่ได้เริ่มการเชื่อมต่อ) ให้ socket = new SockJS(url); // รับวัตถุไคลเอนต์ของโปรโตคอลย่อย STOMP ให้ stompClient = Stomp.over(socket); // เริ่มต้นการเชื่อมต่อ websocket ไปยังเซิร์ฟเวอร์และส่งเฟรม CONNECT stompClient.connect( {}, // คุณสามารถเพิ่มฟังก์ชันข้อมูลการรับรองความถูกต้องของไคลเอ็นต์ได้ ConnectCallback () { // ฟังก์ชันการโทรกลับเพื่อให้ประสบความสำเร็จ การเชื่อมต่อ // ช่องทางการสมัครสมาชิก stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, ฟังก์ชัน errorCallBack(ข้อผิดพลาด){ //เรียกหมายเลขฟังก์ชันอีกครั้งเมื่อการเชื่อมต่อล้มเหลว += 1; if(number<=10){ reconnect(url); } console.log('error',error) } }

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

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network