Node.js ile Socket.IO Kullanımı
#Socket.IO, #Websocket, #Realtime, #Data streaming
Socket.IO nedir?
Websocket altyapısı kullanan ancak websocket olmayan bir realtime enginedir. Tüm dillere community tarafından entegre edildiğinden ve esnek kullanım sağladığından modern altyapılar için kullanımı uygundur.
Socket.IO iki yönlü, canlı zamanlı ve olaylar üzerine çalışan bir iletişim sağlar. Her platformda, tarayıcıda veya cihazda güvenilirlik ve hız olarak eşitliği gözetir.
Socket.IO’ya başlangıç
Öncelikle socket sunucumuzu oluşturarak başlamalıyız. Bu işlemi yapmak için bir klasör oluşturun içine gidin ve ardından “npm init” komutunu çalıştırınız, sorulan soruları istediğiniz şekilde yanıtlayarak projenizi oluşturun. Ardından gereken bağımlılıkların kurulumunu yapmamız gerekmekte. Bu işlem için girmemiz gereken komut:
npm install express socket.io node-fetch xml2js
Bu komutun ardından express, socket.io, fetch ve xml2js kurulumu gerçekleşecektir. Makalemizde döviz kurlarını 5 saniyede bir yenileyen bir proje oluşturacağız.
Klasörünüz içerisinde index.js dosyasını oluşturunuz ve içeriğini bu şekilde giriniz.
const express = require("express")
const fetch = require("node-fetch")
const xml = require('xml2js').parseString
const app = express()
const http = require("http").createServer(app)
const io = require("socket.io")(http)
const ZAMAN = 5000
var Data
let fetchCurrency = async () => {
try {
let response = await fetch('https://www.tcmb.gov.tr/kurlar/today.xml')
let text = await response.text()
xml(text, (e, output) => {
Data = output.Tarih_Date.Currency[0]
})
} catch (e) {
console.log(e)
}
}
let currencyPoller = async () => {
await fetchCurrency()
setTimeout(async () => {
await fetchCurrency()
console.log(`Sunucuda data yenilendi.`)
currencyPoller()
}, ZAMAN);
}
currencyPoller()
http.listen(3000, () => {
console.log(`I'm alive!`)
})
Öncelikle bu kodlarda ne yaptığımızdan bahsedelim. Başlangıçta paketlerimizi require ettik ve ne kadar sürede bir yayın yapacağımızı bir sabit değişken ile belirttim. Ardından her kullanıcı için verinin ayrı şekilde stream edilmesini istemediğimden ötürü global bir değişken oluşturdum. fetchCurrency fonksiyonumuzda ise TCMB sunucularından XML verisini alıp bunu JSON’a değiştirdim, ardından dönen veriyi global değişkenimize aktardım. currencyPoller fonksiyonumuz ise bir özyinelemeli fonksiyon olup kod çalıştığından itibaren zaman sabitimiz kadar aralıklarla veri değişkenimizi yenileyecektir.
Şimdi “node index.js” yazarak çalıştıralım ve terminalde “I’m alive” yazısını gördüğümüzden emin olalım. Yazıyı gördükten sonra browserimizden localhost:3000 adresine gidip istek alabiliyor muyuz görelim. Eğer iki işlemimiz de başarılı ise artık başlayabiliriz.
Canlı Zamanlı Döviz Kuru Kontrolü Yapımı
Node.js taraflı veri gönderimi
Yukarıda gördüğünüz kısımda Node.js projemizin temelini oluşturmuştuk. Şimdi sokete yayın yapmamız için gereken kısma başlayabiliriz.
io.on("connection", (socket) => {
console.log(`Yeni bir bağlantı yapıldı.`)
let socketPoller = () => {
socket.emit('currency-data', Data)
setTimeout(() => {
socket.emit('currency-data', Data)
console.log(`Bağlantıya veri gönderimi yapıldı.`)
socketPoller()
}, ZAMAN);
}
socketPoller()
socket.on("disconnect", () => {
console.log(`Bağlantı koptu.`)
})
})
Bu kod bloğunu konuşarak başlayalım. Gözümüze çarpması gereken kritik kısımlar io.on fonksiyonu, socket.emit fonksiyonlarıdır. io.on fonksiyonu bağlantı geldiğinde yapılacak eylemler dizisini tetikler. Buranın içerisine yazacağımız kodlar sadece ve sadece bağlantı geldiyse çalışacaktır.
socket.emit fonksiyonu ise ilk argüman olarak bir emit ismi almaktadır. Bu ismi siz belirleyip karşı clientte de bu isme göre dinleme yapacaksınız. İkinci argüman ise göndermek istediğiniz veri olmalıdır. Kodda biraz önce veri çekerken yaptığımız sürekli gönderim işlemini implemente ettik.
Bu kod bloğumuzu currencyPoller() satırının hemen ardına ekleyebiliriz. Şimdi clientte dinleme işlemine geçelim.
Client taraflı dinleme işlemi
Client tarafında dinlemek için öncelikle veriler.html diye bir dosya oluşturunuz. Ardından soket kodumuzun alt kısmına şu satırları ekleyiniz.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/veriler.html');
});
Bu kod localhost:3000 adresine eriştiğimizde veriler.html dosyasının render edilmesini sağlayacaktır. Ardından veriler.html dosyasının içeriğini aşağıdaki gibi düzenleyiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canlı zamanlı USD kuru</title>
</head>
<body>
<div id="currency">
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
var socket = io();
socket.on('currency-data', function (data) {
$("#currency").html(
`Dolar kuru: ${data.ForexSelling}<br>Yenilendiği tarih: ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
)
});
});
</script>
</body>
</html>
Burada gözümüze çarpması gereken kısım script taglarımızın içerisidir. var socket = io() komutu ile soket bağlantımızı açtık. Ardından clientte currency-data verimizi socket.on komutunu kullanarak dinlemeye başladık. Dinlediğimiz veriyi basit bir şekilde jQuery kullanarak ekrana yazdırdım ve güncellendiği belli olsun diye saati ekledim.
Bu işlemler bittikten sonra node index.js yazınız ve browserinizden localhost:3000 adresini takip ediniz.
Projenin bitmiş halini şu adresten ziyaret edebilirsiniz: https://github.com/dogukanoksuz/realtime-currency
Eğer canlı halini videolu görmek istiyorsanız:
Anlatımımı takip ettiğiniz için teşekkür ederim. Eğer socket.io’da ilerlemek istiyorsanız iyi bir başlangıç yaptınız ancak buradaki bilgilerle sınırlı kalmayın! Emit cheatsheet’e göz atın, ayrıca Türkçe çevirisi de sitemde mevcut! Buraya tıklayarak gidebilirsiniz. namespace konusuna bakın, roomlara bakın, clientten de servera nasıl mesaj gönderebildiğinizi deneyin. Daha fazla detay öğrenmek için https://socket.io/docs/ adresini ziyaret edebilirsiniz. Yazdığınız soket uygulamalarını test etmek için ise https://socketserve.io adresini ziyaret edebilirsiniz. Sorularınızı yorum bölümünde yanıtlıyor olacağım.