Sorun: Düşük gecikmeli istemci-sunucu ve sunucu-istemci bağlantıları
Web büyük ölçüde HTTP'nin istek/yanıt paradigması olarak bilinen etrafında inşa edilmiştir. İstemci bir web sayfası yüklüyor ve kullanıcı sonraki sayfayı tıklayana kadar hiçbir şey olmuyor. 2005 yılı civarında AJAX, web'i daha dinamik hale getirmeye başladı. Yine de tüm HTTP iletişimleri istemci tarafından yönlendiriliyordu. Bu da sunucudan yeni veri yüklemek için kullanıcı etkileşimi veya periyodik yoklama gerektiriyordu.
Sunucunun uzun zamandır yeni verilerin mevcut olduğunu bildiği anda istemciye veri göndermesini sağlayan teknolojiler. Bunlar "Push" veya "Comet" gibi adlarla adlandırılır. Sunucu tarafından başlatılan bir bağlantı izlenimi yaratmaya yönelik en yaygın saldırılardan biri uzun yoklama olarak adlandırılır. Uzun yoklama ile istemci, sunucuya bir HTTP bağlantısı açarak yanıt gönderene kadar açık tutar. Sunucu gerçekten yeni verilere sahip olduğunda yanıtı gönderir (diğer teknikler Flash, XHR çok parçalı istekleri ve htmldosyaları olarak adlandırılır). Uzun yoklama ve diğer teknikler oldukça iyi sonuç veriyor. Onları her gün Gmail sohbeti gibi uygulamalarda kullanıyorsunuz.
Ancak tüm bu geçici çözümlerin ortak bir sorunu vardır: HTTP'nin ek yükünü taşırlar. Bu da düşük gecikmeli uygulamalara uygun değildir. Tarayıcıdaki çok oyunculu birinci şahıs nişancı oyunlarını veya gerçek zamanlı bileşeni olan başka bir online oyunu düşünün.
WebSocket ile tanışın: Yuvalar artık web'de
WebSocket spesifikasyonu, bir web tarayıcısı ile sunucu arasında "socket" bağlantıları kuran bir API'yi tanımlar. Kısaca açıklamak gerekirse: İstemci ile sunucu arasında kalıcı bir bağlantı vardır ve her iki taraf da istedikleri zaman veri göndermeye başlayabilir.
Başlarken
WebSocket yapıcısını çağırarak bir WebSocket bağlantısı açabilirsiniz:
var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);
ws: dikkat edin. Bu, WebSocket bağlantıları için yeni URL şemasıdır. Güvenli HTTP bağlantılarında https: kullandığı şekilde güvenli WebSocket bağlantısı için de wss: vardır.
Bağlantıya hemen bazı etkinlik işleyiciler eklemek; bağlantının ne zaman açıldığını, gelen iletileri aldığını veya bir hata olduğunu bilmenize olanak tanır.
İkinci bağımsız değişken isteğe bağlı alt protokolleri kabul eder. Bu, bir dize veya dizelerden oluşan bir dizi olabilir. Her dize bir alt protokol adını temsil etmelidir ve sunucu, dizideki iletilen alt protokollerden yalnızca birini kabul eder. Kabul edilen alt protokol, WebSocket nesnesinin protocol özelliğine erişilerek belirlenebilir.
Alt protokol adları, IANA kaydındaki kayıtlı alt protokol adlarından biri olmalıdır. Şubat 2012 itibarıyla, şu an için yalnızca bir alt protokol adı (sabun) tescil edilmiştir.
// 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);
};
Sunucuyla iletişim kurma
Sunucuyla bağlantı kurar kurmaz (open etkinliği tetiklendiğinde) bağlantı nesnesinde send('your message') yöntemini kullanarak sunucuya veri göndermeye başlayabiliriz. Eskiden yalnızca dizeleri destekliyordu ancak son spesifikasyonda artık ikili mesajlar da gönderebiliyor. İkili veri göndermek için Blob veya ArrayBuffer nesnesini kullanabilirsiniz.
// 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 ileti gönderebilir. Bu durumda onmessage geri çağırması tetiklenir. Geri çağırma bir etkinlik nesnesi alır ve asıl iletiye data özelliği aracılığıyla erişilebilir.
WebSocket, en son spesifikasyondaki ikili mesajları da alabilir. İkili program çerçeveleri, Blob veya ArrayBuffer biçiminde alınabilir. Alınan ikili programın biçimini belirtmek için WebSocket nesnesinin ikiliType özelliğini "blob" veya "arraybuffer" olarak ayarlayın. Varsayılan biçim "blob"dur. (Gönderme sırasında ikiliType parametresini hizalamanız gerekmez.)
// 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 diğer özelliği de uzantılardır. Uzantılar kullanılarak, sıkıştırılmış, Multiplex vb. kareler gönderilebilir. Sunucu tarafından kabul edilen uzantıları, açık etkinlikten sonra WebSocket nesnesinin uzantı özelliğini inceleyerek bulabilirsiniz. Şubat 2012 itibarıyla henüz resmi olarak yayınlanmış bir uzantı spesifikasyonu yoktur.
// Determining accepted extensions
console.log(connection.extensions);
Kaynaklar arası iletişim
Modern bir protokol olan çapraz kaynaklı iletişim doğrudan WebSocket'e işlendi. Yine de yalnızca güvendiğiniz istemci ve sunucularla iletişim kurduğunuzdan emin olmanız gerekir, ancak WebSocket herhangi bir alandaki taraflar arasında iletişimi etkinleştirir. Sunucu, hizmetini tüm istemciler için mi yoksa yalnızca iyi tanımlanmış bir dizi alan adında bulunan istemciler için mi kullanılabilir hale getireceğine karar verir.
Proxy sunucular
Her yeni teknoloji yeni sorunları beraberinde getirir. WebSocket söz konusu olduğunda, çoğu şirket ağındaki HTTP bağlantılarında aracılık yapan proxy sunucularıyla uyumluluk söz konusudur. WebSocket protokolü, bir WebSocket bağlantısı için HTTP bağlantısını "yükseltmek" için HTTP yükseltme sistemini (normalde HTTP/SSL için kullanılır) kullanır. Bazı proxy sunucuları bunu beğenmez ve bağlantıyı kesecek. Dolayısıyla, belirli bir istemci WebSocket protokolünü kullansa bile bağlantı kurmak mümkün olmayabilir. Bu, sonraki bölümü daha da önemli hale getiriyor :)
WebSockets'i hemen kullanın
WebSocket henüz yeni bir teknolojidir ve tüm tarayıcılarda tam olarak uygulanmamıştır. Ancak şu anda WebSocket'i, WebSocket mevcut olmadığında yukarıda bahsedilen yedeklerden birini kullanan kitaplıklarla kullanabilirsiniz. Bu alanda oldukça popüler hale gelen bir kitaplık olan socket.io, bir istemci ve protokolün sunucu uygulamasını içerir ve yedekleri içerir (socket.io henüz Şubat 2012'den itibaren ikili mesajlaşmayı desteklememektedir). Ayrıca, istemcilere WebSocket mesajları göndermek için bir HTTP API sağlayarak herhangi bir web ortamına kolayca entegre edilebilen PusherApp gibi ticari çözümler de vardır. Ek HTTP isteği nedeniyle, yalın WebSocket ile karşılaştırıldığında her zaman ekstra ek yük olacaktır.
Sunucu tarafı
WebSocket'in kullanılması, sunucu tarafı uygulamalar için yepyeni bir kullanım kalıbı oluşturur. LAMP gibi geleneksel sunucu yığınları, HTTP istek/yanıt döngüsü etrafında tasarlanmış olsa da genellikle çok sayıda açık WebSocket bağlantısında iyi performans göstermez. Aynı anda çok sayıda bağlantıyı açık tutmak için düşük performans maliyetiyle yüksek eşzamanlılık alan bir mimari gerekir. Bu tür mimariler genellikle iş parçacığı (iş parçacığı) şeklinde veya engellemeyen KS olarak tasarlanır.
Sunucu tarafı uygulamalar
- Node.js
- Java
- Ruby
- Python
- Erlang
- C++
- .NET
Protokol sürümleri
WebSocket'in kablo protokolü (el sıkışma ve istemci ile sunucu arasındaki veri aktarımı) artık RFC6455 olarak değiştirildi. En yeni Chrome ve Android için Chrome, ikili mesajlaşma dahil olmak üzere RFC6455 ile tamamen uyumludur. Ayrıca, Firefox sürüm 11'de, Internet Explorer sürüm 10'da uyumlu olacaktır. Eski protokol sürümlerini kullanmaya devam edebilirsiniz, ancak güvenlik açığı olduğu bilindiği için bu sürümlerin kullanılması önerilmez. WebSocket protokolünün eski sürümleri için sunucu uygulamalarınız varsa bunu en son sürüme yükseltmenizi öneririz.
Kullanım alanları
İstemci ile sunucu arasında gerçekten düşük bir gecikmeye ve neredeyse gerçek zamanlı bağlantıya ihtiyacınız olduğunda WebSocket'i kullanın. Bu süreçte, etkinlik sıraları gibi teknolojilere yeniden odaklanarak sunucu tarafı uygulamalarınızı oluşturma şeklinizi yeniden değerlendirmeyi içerebileceğini unutmayın. Kullanım alanlarından bazıları şunlardır:
- Çok oyunculu online oyunlar
- Sohbet uygulamaları
- Canlı spor sohbet şeridi
- Sosyal medya akışlarını gerçek zamanlı güncelleme
Demolar
- Sabitleme
- Benimle Boya
- Pixelatr
- Kesik çizgi
- Devasa çok oyunculu online çapraz bulmaca
- Ping sunucusu (yukarıdaki örneklerde kullanılmıştır)
- HTML5demo örneği