About
Posts
Projects
Tags

Websocket ve Go

websocket go react
Yayınlanma Tarihi:

Giriş

Bu aslında aldığım bir dersin ödev sunumu olacaktı fakat iptal oldu ben de blog yazısı olarak paylaşmaya karar verdim. Bu rehberde WebSocket teknolojisinin Go ve React ile nasıl kullanıldığını göstereceğim.

WebSocket Nedir?

WebSocket, iki yönlü iletişim sağlayan bir iletişim protokolüdür. Bu protokol, web uygulamaları arasında gerçek zamanlı veri akışı sağlar. Bu sayede sunucu ve istemci arasında sürekli bir bağlantı kurulur ve veri akışı sağlanır.

Kullanım Alanları Neler?

  • Çevrimiçi oyunlar
  • Anlık sohbet uygulamaları
  • Gerçek zamanlı veri analizi
  • Canlı yayınlar
  • Birazdan göreceğimiz gibi ekip çalışması uygulamaları

Terimler ve Kavramlar

alt text

WebSocket protokolünde ping, handshake ve heartbeat gibi kavramlar, bağlantının sağlıklı bir şekilde devam etmesini sağlamak ve bağlantıdaki olası problemleri önlemek için kullanılır. Bu terimler arasındaki farklar şu şekildedir:

1. Handshake (El Sıkışma)

WebSocket bağlantısı başlatılmadan önce, client ile server arasında bir handshake işlemi gerçekleştirilir. Bu işlem, client’ın server’a WebSocket protokolünü kullanarak bağlantı kurma talebini ilettiği ve server’ın da bu talebi onayladığı bir süreçtir.

  • Client WebSocket bağlantısı başlatmak için bir HTTP isteği gönderir ve bu istekte Upgrade başlığını kullanarak protokolü WebSocket olarak değiştirme talep eder.
  • Server bu isteği alır, WebSocket protokolünü destekliyorsa yanıt olarak 101 Switching Protocols durum kodu gönderir ve bağlantı WebSocket olarak güncellenir.

Örnek bir handshake isteği:

# Client tarafından gönderilen istek
GET /notifications HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
# Server'dan alınan yanıt
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

2. Ping

Ping, server ve client arasındaki bağlantıyı test etmek için kullanılan bir mesaj türüdür. Bu mesaj, bağlantının aktif olduğunu ve her iki tarafın da birbirini duyabildiğini doğrulamak amacıyla gönderilir.

  • WebSocket protokolünde, server belirli aralıklarla client’a ping mesajı gönderir.
  • Client, bu ping mesajına pong yanıtı vererek bağlantıyı canlı tutar.
  • Eğer belirli bir süre boyunca ping/pong mesajları alınmazsa, bağlantının kopmuş olduğu düşünülerek bağlantı sonlandırılabilir.

3. Heartbeat

Heartbeat, WebSocket bağlantısının sürekliliğini sağlamak için kullanılan bir yöntemdir. Ping/pong mesajlarının bir türüdür ve aktif bağlantının doğruluğunu korumak amacıyla belirli aralıklarla gönderilir. Bir nevi “Yaşıyor musun?” sorusudur.

  • Heartbeat, genellikle server tarafından otomatik olarak gönderilir ve client’ın yanıt verip vermediği kontrol edilir.
  • Eğer client, belirli bir süre boyunca yanıt vermezse, server bağlantıyı sonlandırabilir.

4. Close

WebSocket bağlantısının sonlandırılması için kullanılan bir mesaj türüdür. Bu mesaj, server veya client tarafından gönderilerek bağlantının kapatılmasını sağlar.

Kısaca

  • Handshake: Bağlantının başlatılması ve WebSocket protokolüne geçiş işlemi.
  • Ping/Pong: Bağlantının aktif olduğunu kontrol etmek için gönderilen mesajlar.
  • Heartbeat: Bağlantının sürekliliğini sağlamak için düzenli aralıklarla yapılan ping/pong işlemleri.
  • Close: Bağlantının sonlandırılması için gönderilen mesaj.

Bu mekanizmalar, WebSocket bağlantılarının sağlıklı ve sürdürülebilir olmasını sağlamak için önemlidir.

ws ve wss Protokolleri

WebSocket protokolü, iki farklı protokol üzerinden çalışabilir:

  • ws (WebSocket): Standart WebSocket protokolüdür ve genellikle HTTP üzerinden çalışır.
  • wss (WebSocket Secure): Güvenli bir bağlantı sağlamak için kullanılan WebSocket protokolüdür ve genellikle HTTPS üzerinden çalışır.

Bu protokoller arasındaki fark, bağlantının güvenli olup olmadığına bağlıdır. Güvenli olmayan bağlantılar için ws://, güvenli bağlantılar için wss:// protokolü kullanılır. Örneğin: ws://codeaman.dev ve wss://codeaman.dev.

Go ile WebSocket Uygulaması

Bu demoda Go ile backend tarafını, React ile frontend tarafını oluşturdum.

Demonun reposuna buradan ulaşabilirsiniz.

WebSocket Demo

Bu demoda gorilla/websocket paketi kullanıldı. Bu paket, WebSocket bağlantılarını yönetmek ve mesajları işlemek için kullanılır. Ayrıca, React tarafında da WebSocket API’si kullanıldı.

Bu demoda 3 tip mesajımız var. Bunlar

  • clientCount: Bağlı olan client sayısını günceller.
{"type":"clientCount","clientCount":4}
  • canvasRequest: Yeni bir client bağlandığında aktif kullanıcılardan güncel canvas verisini ister.
{"type":"canvasState","clientId":"1...","data":"data:image/png;base64,i..."}
  • draw: Çizim yapılmasını sağlar.
{"color":"#000000","endX":484,"endY":202,"startX":450,"startY":202}

Kurulum

git clone https://github.com/code-a-man/ws-canvas-demo.git
cd ws-canvas-demo
npm install
cd backend
go mod download
cd ..
npm run dev

// TODO: Detaylı kod açıklamaları eklenecek.

Notlar

Yazının başında dediğim gibi bir sunum olacaktı fakat iptal olunca blog yazısı olarak paylaşmaya karar verdim. Kendi minik araştırmalarım ve denemelerim sonucunda bu rehberi oluşturdum. Umarım faydalı olmuştur.

Kaynaklar