WebSockets - Sunucu ile İletişim Kurma

Web, büyük ölçüde HTTP'nin istek / yanıt paradigması etrafında oluşturulmuştur. Bir müşteri bir web sayfası yükler ve ardından kullanıcı sonraki sayfaya tıklayana kadar hiçbir şey olmaz. 2005 civarında AJAX, web'i daha dinamik hale getirmeye başladı. Yine de, tüm HTTP iletişimi, sunucudan yeni verileri yüklemek için kullanıcı etkileşimi veya periyodik sorgulama gerektiren istemci tarafından yönlendirilir.

Sunucunun, yeni verilerin mevcut olduğunu bildiği anda verileri bir istemciye göndermesini sağlayan teknolojiler, epeydir ortalıkta. Gibi isimlerle giderler"Push" veya “Comet”.

İle long pollingistemci, sunucuya bir HTTP bağlantısı açar ve bu bağlantı yanıt gönderene kadar açık tutar. Sunucu gerçekten yeni verilere sahip olduğunda, yanıtı gönderir. Uzun oylama ve diğer teknikler oldukça iyi çalışıyor. Bununla birlikte, bunların tümü tek bir sorunu paylaşır, HTTP'nin ek yükünü taşır ve bu da onları düşük gecikmeli uygulamalar için uygun hale getirmez. Örneğin, tarayıcıda çok oyunculu bir nişancı oyunu veya gerçek zamanlı bileşeni olan başka bir çevrimiçi oyun.

Soketleri Web'e Getirme

Web Soket spesifikasyonu, bir web tarayıcısı ile bir sunucu arasında "soket" bağlantıları kuran bir API tanımlar. Meslekten olmayan terimlerle ifade etmek gerekirse, istemci ile sunucu arasında kalıcı bir bağlantı vardır ve her iki taraf da herhangi bir zamanda veri göndermeye başlayabilir.

Web soketi bağlantısı bir yapıcı kullanılarak kolayca açılabilir -

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

wsWebSocket bağlantıları için yeni URL şemasıdır. Ayrıca birde şu varwss, güvenli WebSocket bağlantısı için aynı şekilde https güvenli HTTP bağlantıları için kullanılır.

Bazı olay işleyicilerini bağlantıya hemen eklemek, bağlantının ne zaman açıldığını, gelen mesajların ne zaman alındığını veya bir hata olduğunu bilmenizi sağlar.

İkinci argüman isteğe bağlı kabul eder subprotocols. Bir dizi veya dizi olabilir. Her dize birsubprotocol ad ve sunucu, geçilenlerden yalnızca birini kabul eder subprotocolsdizide. Kabul edilmişsubprotocol WebSocket nesnesinin protokol özelliğine erişilerek belirlenebilir.

// 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);
};

Sunucu ile iletişim

Sunucuyla bağlantı kurar kurmaz (açık olay tetiklendiğinde), bağlantı nesnesinde send (mesajınız) yöntemini kullanarak sunucuya veri göndermeye başlayabiliriz. Eskiden yalnızca dizeleri desteklerdi, ancak en son spesifikasyonda artık ikili mesajlar da gönderebilir. İkili veri göndermek için Blob veya ArrayBuffer nesnesi kullanılır.

// 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);

Aynı şekilde, sunucu bize herhangi bir zamanda mesaj gönderebilir. Bu ne zaman olursa, onmessage geri araması tetiklenir. Geri arama, bir olay nesnesi alır ve gerçek mesaja dataözellik aracılığıyla erişilebilir .

WebSocket ayrıca en son spesifikasyonda ikili mesajlar alabilir. İkili çerçeveler Blob veya ArrayBuffer formatında alınabilir. Alınan ikili dosyanın formatını belirtmek için, WebSocket nesnesinin binaryType özelliğini 'blob' veya 'arraybuffer' olarak ayarlayın. Varsayılan biçim 'blob'dur.

// 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'in yeni eklenen bir başka özelliği de uzantılardır. Uzantıları kullanarak, sıkıştırılmış, çoklanmış vb. Çerçeveler göndermek mümkün olacaktır.

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

Kökenler Arası İletişim

Modern bir protokol olan çapraz kaynaklı iletişim, doğrudan WebSocket'te pişirilir. WebSocket, herhangi bir etki alanındaki taraflar arasında iletişimi sağlar. Sunucu, hizmetinin tüm istemciler için mi yoksa yalnızca iyi tanımlanmış etki alanlarında bulunanlar için mi kullanılabilir olduğuna karar verir.

Proxy Sunucular

Her yeni teknoloji, yeni bir dizi problemle birlikte gelir. WebSocket durumunda, çoğu şirket ağında HTTP bağlantılarına aracılık eden proxy sunucuları ile uyumluluktur. WebSocket protokolü, HTTP bağlantısını bir WebSocket bağlantısına "yükseltmek" için HTTP yükseltme sistemini (normalde HTTP / SSL için kullanılır) kullanır. Bazı proxy sunucuları bundan hoşlanmaz ve bağlantıyı keser. Bu nedenle, belirli bir istemci WebSocket protokolünü kullansa bile, bir bağlantı kurmak mümkün olmayabilir. Bu, sonraki bölümü daha da önemli hale getirir :)

Sunucu Tarafı

WebSocket'i kullanmak, sunucu tarafı uygulamaları için tamamen yeni bir kullanım modeli oluşturur. LAMP gibi geleneksel sunucu yığınları, HTTP istek / yanıt döngüsü etrafında tasarlanırken, genellikle çok sayıda açık WebSocket bağlantısıyla iyi başa çıkmazlar. Çok sayıda bağlantıyı aynı anda açık tutmak, düşük performans maliyetiyle yüksek eşzamanlılık sağlayan bir mimari gerektirir.