İnternet uygulamalarının geliştirilmesi sırasında, kullanıcılara anlık ve güncel bilgiler sunmak oldukça önemlidir. HTML Server-Sent Events (SSE) API, bu ihtiyacı karşılamak için kullanılan bir teknolojidir. Bu yazıda, SSE’nin temel konseptlerini anlatacak ve örnek kod bloklarıyla nasıl kullanılacağınızı göstereceğiz.
SSE Nedir?
Server-Sent Events, bir web sunucusu ile tarayıcı arasında tek yönlü bir iletişim protokolüdür. Sunucu, tarayıcıya doğrudan HTTP bağlantısı üzerinden belirli olayları gönderir. Bu, tarayıcının anında ve sürekli olarak güncel bilgileri almasını sağlar.
SSE API Kullanımı
SSE API kullanımı oldukça basittir. İlk adım olarak, tarayıcıda bir EventSource nesnesi oluşturmanız gerekir. Bu nesne, sunucudan olayları dinlemek için kullanılır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
<script>
const eventSource = new EventSource('/sse-endpoint');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log('Received Data:', data);
// Burada gelen veriyi işleyebilirsiniz.
};
eventSource.onerror = function(error) {
console.error('EventSource failed:', error);
};
</script>
</body>
</html>
Bu örnekte, tarayıcı, ‘/sse-endpoint’ üzerinden sunucudan gelen olayları dinler. Sunucu, bu endpoint üzerinden olayları göndermeye başladığında, tarayıcı tarafında onmessage fonksiyonu tetiklenecek ve gelen veriyi işleyebilirsiniz.
Sunucu Tarafı (Node.js ve Express Kullanarak)
Sunucu tarafında, SSE kullanabilmek için özel başlıklar ve düzenli olarak veri gönderme işlemleri gerçekleştirilmelidir.
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/sse-endpoint', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Örneğin, her saniyede bir rastgele veri gönderme
const intervalId = setInterval(() => {
const data = { message: 'Hello, SSE!' };
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
// Bağlantı sona erdiğinde interval'ı temizle
req.on('close', () => {
clearInterval(intervalId);
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Bu örnekte, ‘/sse-endpoint’ üzerinden SSE sağlamak için gerekli başlıkları ayarlayan ve belirli bir aralıkta rastgele veri gönderen bir Express uygulaması görülmektedir.
HTML SSE API, web uygulamalarında gerçek zamanlı bilgi alışverişi sağlamak için güçlü bir araçtır. Bu teknoloji, kullanıcı deneyimini zenginleştirmek ve anlık güncellemelerle etkileşimi artırmak için kullanılabilir. Umarım bu örnekler, SSE API’nin nasıl kullanılacağına dair size başlangıç noktası sağlar.