HTML5 WebSocket

Sunucu ve istemci arasında karşılıklı veri alışverişine imkan veren ve HTML5 ile gelen Websocket protokolü ve kullanımı ile ilgili bilgiler yer alıyor.

Websocket nedir?

Websocket IETF tarafından RFC 6455 ile kuralları belirlenmiş sunucu ve istemci arasında karşılıklı, çift taraflı veya terminolojideki adıyla full duplex veri alışverişine imkan veren protokoldür.

Websocket protokolü HTTP, FTP, SMTP protokollerinde olduğu gibi iletişim için çeşitli kurallara sahiptir.

Neden Websocket

Sohbet, oyun ve gerçek zamanlı web uygulamaları sürekli olarak veri alışverişinde bulunur.

Ancak HTTP protokolü tek taraflı iletişim sağlayan bir protokoldür. Sunucu sadece istemciden gelen isteklere göre cevap verir.

İstemci sunucudaki değişikliğe yeni bir istek ile ulaşır.

Yeni bir istek HTTP protokolündeki kuralların tekrar edilmesine ve fazla trafik kullanımına neden olur.

Trafik kullanımı ve HTP protokolüyle gerçek zamanlı uygulamaların yönetilmesi maliyetli ve zor olduğundan dolayı websocket kullanılır.

Websocket nasıl kullanılır?

Websocket kullanımı için Websocket sunucusuna ve Websocket API destekleyen tarayıcıya ihtiyaç duyar.

Websocket sunucusu

Websocket bir protokol olduğundan çeşitli kurallara sahiptir.

RFC 6455 kuralları uygulayarak C, C++, C#, Java, Node.js, PHP gibi programlama dilleri ile Websocket sunucusu oluşturulabilir.

Websocket sunucunu oluşturmak için çeşitli kütüphanelerin kullanımı hız, güvenlik ve esneklik gibi sebeplerden dolayı faydalı olacaktır.

C++ için µWebSockets, .NET için SignalR, Java için Java-WebSocket, Node.js için Socket.IO kütüphaneleri kullanılabilir.

Websocket kullanımı

Websocket kullanımı için HTML5 ile birlikte gelen WebSocket API kullanılır.

WebSocket API içinde veri alışverişinde kullanılan çeşitli özellik, olay ve metotlara sahip WebSocket sınıfı yer alır.

Bağlantı kurmak

Websocket sunucusuna bağlanmak için sınıfın kurucusuna websocket adresinin yazılması yeterli olacaktır.

var ws = new WebSocket("ws://websocket-adresi:port");

var ws = new WebSocket("ws://echo.websocket.org");

NOT: Websocket bağlantı için ws:// veya wss:// ön ekini kullanır.

Bağlantı sağlandıktan sonra işlemler WebSocket API içindeki olaylar ile kontrol edilir.

onopen – Bağlantı sağlandığında tetiklenir.
onerror – Hata olduğunda tetiklenir.
onmessage – Sunucudan veri geldiğinde tetiklenir.
onclose – Bağlantı sonlandığında tetiklenir.

<script>
'use strict';
  var ws = new WebSocket("ws://echo.websocket.org");

  ws.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
  };
</script>

Veri göndermek

Sunucuya veri göndermek için WebSocket sınıfı içinde yer alan send metodu kullanılır.

Metod parametre olarak String, ArrayBuffer, Blob ve ArrayBufferView türünden değer alır.

<script>
'use strict';
  var ws = new WebSocket("ws://echo.websocket.org");

  ws.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
    ws.send("Merhaba ben Yusuf SEZER.");
  };
</script>

Veri almak

Websocket sunucusundan veri almak için onmessage olayına gönderilen MessageEvent sınıfındaki data özelliği kullanılır.

<script>
'use strict';
  var ws = new WebSocket("ws://echo.websocket.org");

  ws.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
    ws.send("Merhaba ben Yusuf SEZER.");
  };

  ws.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
  };
</script>

NOT: Veri gönderimi ve alımı sırasında çeşitli dönüşüm işlemlerine ihtiyaç duyulabilir.

Bağlantıyı kapatmak

Sunucu ve istemci arasındaki bağlantıyı kapatmak için WebSocket sınıfı içinde yer alan close metodu kullanılır.

Bağlantı kapatıldıktan sonra onclose olayı tetiklenir.

<script>
'use strict';
  var ws = new WebSocket("ws://echo.websocket.org");

  ws.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
    ws.send("Merhaba ben Yusuf SEZER.");
  };

  ws.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
    ws.close();
  };

  ws.onclose = function (event) {
    console.log("Bağlantı kapatıldı.");
  };
</script>

Bağlantı sırasında veya veri alışverişi sırasında herhangi bir hata oluştuğunda onerror olayı tetiklenir.

<script>
'use strict';
  var ws = new WebSocket("ws://echo.1websocket.org");

  ws.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
    ws.send("Merhaba ben Yusuf SEZER.");
  };

  ws.onerror = function (event) {
    console.log("Hata oluştu.");
  };

  ws.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
    ws.close();
  };

  ws.onclose = function (event) {
    console.log("Bağlantı kapatıldı.");
  };
</script>

Bağlantı WebSocket API içinde yer alan readyState özelliği ile kontrol edilebilir.

Websocket işlemlerinde en önemli kısım sunucudur.

Çünkü Websocket sunucusu tüm bağlantıların yönetiminden sorumludur.

Websocket ile ilgili işlemler yaparken çeşitli kütüphanelerin kullanımı faydalı olacaktır.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.