Express.js ile Socket.io Kullanımının Temelleri

Express.js ile Socket.io Kullanımının Temelleri


Web uygulamalarında gerçek zamanlı etkileşim sağlamak, geliştiricilerin sıklıkla karşılaştığı zorluklardan biridir. Express.js, Node.js için minimal ve esnek bir web uygulama çerçevesidir. Socket.io ise, web soketleri aracılığıyla gerçek zamanlı, iki yönlü ve olay tabanlı iletişimi kolaylaştırır. Bu makalede, Express.js ile Socket.io’nun nasıl entegre edileceğini ve basit bir gerçek zamanlı uygulamanın nasıl geliştirileceğini keşfedeceğiz.

Socket.io ile Gerçek Zamanlı İletişim Kurmak

Socket.io, istemciler ve sunucular arasında gerçek zamanlı iki yönlü iletişim kurulmasına olanak tanır. Kurulumu oldukça basit olup, Express.js ile bir arada kullanıldığında güçlü uygulamalar geliştirebilirsiniz. İlk olarak, gerekli kütüphaneleri projemize ekleyelim. Öncelikle, terminalden aşağıdaki komutu kullanarak Express.js ve Socket.io’yu yükleyin.

npm install express socket.io

Basit Bir Uygulama Oluşturma

Şimdi, basit bir Express.js sunucusu oluşturalım ve Socket.io ile entegre edelim. Aşağıdaki kod örneği, bir sunucu oluşturur ve istemciden gelen bağlantıları dinler:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('Yeni bir kullanıcı bağlandı');
    socket.on('disconnect', () => {
        console.log('Kullanıcı ayrıldı');
    });
});

server.listen(3000, () => {
    console.log('Sunucu 3000 portunda çalışıyor');
});

Yukarıdaki örnekte, basit bir Express sunucusu oluşturduk ve Socket.io ile gerçek zamanlı bağlantılar dinliyoruz. Kullanıcılar bağlandığında veya ayrıldığında konsola mesaj yazdırıyoruz. Şimdi, bu sunucu ile etkileşimde bulunacak bir HTML dosyası oluşturalım.

<!DOCTYPE html>
<html>
<head>
    <title>Socket.io ile Express.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <script>
        const socket = io();
    </script>
</head>
<body>
    <h1>Express.js ile Socket.io Kullanımı</h1>
</body>
</html>

Sonuç ve İleri Adımlar

Express.js ile Socket.io’nun entegrasyonu, web uygulamalarınıza güçlü ve dinamik bir yapı kazandırır. Bu makalede, temel bir sunucu kurarak kullanıcıların bağlantı durumlarını nasıl izleyebileceğinizi gösterdik. Gerçek zamanlı uygulamalar yazarken, Socket.io’nun sunduğu olayları ve özellikleri keşfetmek, projelerinizi bir üst seviyeye taşıyacaktır. Deneyim kazandıkça, özel olaylar, veri gönderimi ve istemci-sunucu iletişimi gibi gelişmiş konulara da adım atabilirsiniz.