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.

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

: 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 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 fonksiyonunu kullanırız.

socket.send('Gönderilecek mesaj')

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

socket.close()

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

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

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

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

Hepsi bu kadar.

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.