WebSockets - การสื่อสารกับเซิร์ฟเวอร์

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

เทคโนโลยีที่ช่วยให้เซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ในช่วงเวลาที่มันรู้ว่ามีข้อมูลใหม่มาระยะหนึ่งแล้ว พวกเขาไปตามชื่อเช่น"Push" หรือ “Comet”.

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

นำซ็อกเก็ตไปยังเว็บ

ข้อกำหนดของเว็บซ็อกเก็ตกำหนด API ที่สร้างการเชื่อมต่อ "ซ็อกเก็ต" ระหว่างเว็บเบราว์เซอร์และเซิร์ฟเวอร์ ในแง่ของคนธรรมดามีการเชื่อมต่ออย่างต่อเนื่องระหว่างไคลเอนต์และเซิร์ฟเวอร์และทั้งสองฝ่ายสามารถเริ่มส่งข้อมูลได้ตลอดเวลา

การเชื่อมต่อเว็บซ็อกเก็ตสามารถเปิดได้โดยใช้ตัวสร้าง -

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

wsคือสคีมา URL ใหม่สำหรับการเชื่อมต่อ WebSocket นอกจากนี้ยังมีwssเพื่อการเชื่อมต่อ WebSocket ที่ปลอดภัยในลักษณะเดียวกัน https ใช้สำหรับการเชื่อมต่อ HTTP ที่ปลอดภัย

การแนบตัวจัดการเหตุการณ์บางอย่างเข้ากับการเชื่อมต่อทันทีช่วยให้คุณทราบเมื่อการเชื่อมต่อถูกเปิดได้รับข้อความขาเข้าหรือมีข้อผิดพลาด

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

// When the connection is open, send some data to the server
connection.onopen = function () {
   connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
   console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
   console.log('Server: ' + e.data);
};

การสื่อสารกับเซิร์ฟเวอร์

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

// Sending String
connection.send('your message');

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);

for (var i = 0; i < img.data.length; i++) {
   binary[i] = img.data[i];
}

connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector('input[type = "file"]').files[0];
connection.send(file);

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

WebSocket ยังสามารถรับข้อความไบนารีในข้อมูลจำเพาะล่าสุด เฟรมไบนารีสามารถรับได้ในรูปแบบ Blob หรือ ArrayBuffer ในการระบุรูปแบบของไบนารีที่ได้รับให้ตั้งค่าคุณสมบัติ binaryType ของอ็อบเจ็กต์ WebSocket เป็น 'blob' หรือ 'arraybuffer' รูปแบบเริ่มต้นคือ 'หยด'

// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
   console.log(e.data.byteLength); // ArrayBuffer object if binary
};

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

// Determining accepted extensions
console.log(connection.extensions);

การสื่อสารข้ามแหล่งกำเนิด

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

พร็อกซีเซิร์ฟเวอร์

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

ฝั่งเซิร์ฟเวอร์

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