WebSocket, VueJS’te nasıl kullanılır? (Hazır paket kullanmadan)

Web uygulama geliştirirken, kullanıcının sayfayı yenilemesini beklemeksizin yeni bilgilerden haberdar olmasını gerektiren senaryolarla karşılaşırız. Bu durumlarda başvurduğumuz yöntemlerin başında WebSocket gelir.

WebSocket’in oluşturduğu iletişim kanalları sayesinde, kullanıcının herhangi bir istekte bulunmasını beklemeksizin, ekranına yeni bilgiyi gönderebiliriz. Yazışma (WhatsApp, Messenger vb.) uygulamalarının tamamı bu standart ile çalışır.

Live Demo: https://websocket-vuejs.netlify.app/

GitHub Repo: https://github.com/gayret/websocket-vuejs

Bir WebSocket kanalına nasıl bağlanılır?

İhtiyaç duyacağımız tek şey ws:// veya wss:// protokolü ile başlayan bir url. Bu url, ilgili kanala doğrudan erişmemizi sağlayacak.

WebSocket bağlantısı kurmak için çeşitli hazır paketler var ancak mevcut senaryoda üçüncü parti bir pakete ihtiyacımız yok. JavaScript’in sağladığı WebSocket adlı reserved class, tüm aksiyonlarımızı karşılayabiliyor.

const socket = new WebSocket('BURAYA WEBSOCKET URL')

Bu tanımlamayı yaptıktan sonra gelen response’ları yakalamak için onmessage fonksiyonunu kullanırız.

socket.onmessage = (event) => {
  state.responses.push(event.data)
}

Artık her yeni bilgi, state’imizdeki responses array’imize kaydedilir.

Mesaj göndermek için ise send fonksiyonunu kullanırız.

socket.send('Gönderilecek mesaj')

Bağlantıyı kapatmak için close fonksiyonunu kullanırız.

socket.close()

Bağlantının kapandığını yakalamak için onclose,

socket.onclose = () => {
  console.log('WebSocket closed')
  state.socketConnected = false
}

Yaşanabilecek hataları yakalamak için onerror fonksiyonunu kullanırız.

socket.onerror = (error) => {
  console.error(error)
}

Hepsi bu kadar.