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

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.

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

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

Safa Gayret

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