Node.js İle Socket.io Kullanarak Paylaşımlı Canlı Not Defteri Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce bilgisayarınızda Node.js ve npm (Node Package Manager) yüklü olmalıdır. Proje dizininizi oluşturun ve gerekli paketleri yüklemek için terminalinizi kullanın. 2026 yılı itibarıyla güncel LTS sürümü olan Node.js 22+ kullanmanız önerilir.

Proje klasörünüzü oluşturduktan sonra terminalde şu komutları çalıştırarak bağımlılıkları yükleyin:

mkdir canli-not-defteri
cd canli-not-defteri
npm init -y
npm install express socket.io

Bu komutlar, projenizin temelini atar, package.json dosyasını oluşturur ve sunucu tarafında gerekli olan express (web sunucusu çatısı) ve socket.io (gerçek zamanlı iletişim kütüphanesi) paketlerini projenize dahil eder.

Sunucu Tarafı Yapılandırması

Sunucu tarafında, hem HTTP isteklerini karşılayacak bir Express uygulaması hem de WebSocket bağlantılarını yönetecek bir Socket.io örneği oluşturacağız. server.js adında bir dosya oluşturun ve temel sunucu kurulumunu yapın.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

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

app.use(express.static('public'));

io.on('connection', (socket) => {
    console.log('Bir kullanıcı bağlandı: ' + socket.id);

    socket.on('not-degisti', (yeniIcerik) => {
        socket.broadcast.emit('not-guncelle', yeniIcerik);
    });
});

server.listen(3000, () => {
    console.log('Sunucu http://localhost:3000 adresinde çalışıyor.');
});

Burada socket.broadcast.emit metodu kritik öneme sahiptir. Bu metod, mesajı gönderen kişi hariç diğer tüm bağlı istemcilere veriyi iletir. Böylece not defterinde yazan kişinin ekranında bir döngü oluşmasını engellemiş oluruz.

İstemci Tarafı Arayüzü

Kullanıcıların notlarını yazabileceği basit bir HTML arayüzü oluşturmamız gerekiyor. public adında bir klasör oluşturun ve içine index.html dosyasını ekleyin. Bu dosya, Socket.io istemci kütüphanesini içermelidir.

    Canlı Not Defteri


    
    
    

Burada /socket.io/socket.io.js yolu, Socket.io sunucusu tarafından otomatik olarak sunulur; herhangi bir dosya indirmenize gerek yoktur.

Gerçek Zamanlı Veri Senkronizasyonu

Şimdi public/client.js dosyasını oluşturarak istemci tarafındaki mantığı yazalım. Kullanıcı metin alanına her tuş vuruşu yaptığında, bu değişikliği sunucuya bildirmemiz gerekiyor.

const socket = io();
const notAlani = document.getElementById('notAlani');

notAlani.addEventListener('input', (e) => {
    const icerik = e.target.value;
    socket.emit('not-degisti', icerik);
});

socket.on('not-guncelle', (yeniIcerik) => {
    notAlani.value = yeniIcerik;
});

Bu kod bloğu, input olayını dinler. Kullanıcı her karakter girdiğinde sunucuya not-degisti olayını gönderir. Sunucu ise bu veriyi alıp diğer kullanıcılara dağıtır. socket.on('not-guncelle') ise sunucudan gelen güncel veriyi not alanına yerleştirir.

Performans ve Veri Yönetimi Karşılaştırması

Gerçek zamanlı uygulamalarda veri iletim yöntemlerini anlamak için aşağıdaki tabloyu inceleyebilirsiniz:

Güvenlik ve Üretim Ortamı Uyarıları

Kritik Uyarı: Bu uygulama bir eğitim örneğidir. Üretim ortamında (production) XSS (Cross-Site Scripting) saldırılarını önlemek için kullanıcıdan gelen veriyi mutlaka temizlemeli (sanitize) ve doğrulamalısınız. Ayrıca, WebSocket bağlantılarını yetkilendirmek için JWT (JSON Web Token) kullanmayı ihmal etmeyin.

Not defterindeki verilerin kaybolmaması için sunucu tarafında bir veritabanı (örneğin MongoDB veya Redis) kullanmanız ve not-degisti olayı tetiklendiğinde veriyi veritabanına kaydetmeniz önerilir.

Sıkça Sorulan Sorular

Socket.io neden standart WebSocket yerine tercih edilir?

Socket.io, bağlantı koptuğunda otomatik olarak yeniden bağlanma (reconnection) özelliği sunar ve WebSocket desteklemeyen tarayıcılar için otomatik olarak HTTP uzun sorgulama (polling) yöntemine geri döner.

Çok sayıda kullanıcı aynı anda yazarsa ne olur?

Bu durumda "Race Condition" (yarış durumu) oluşabilir. Bunu önlemek için "Debounce" tekniği kullanmalı veya veritabanı üzerinde bir sürüm kontrolü (versioning) mekanizması kurmalısınız.

Uygulamayı nasıl ölçeklendirebilirim?

Birden fazla sunucu kullanıyorsanız, Socket.io'nun "Redis Adapter" özelliğini kullanarak tüm sunucuların birbirleriyle senkronize olmasını sağlayabilirsiniz.

Veri güvenliğini nasıl sağlarım?

İstemciden gelen veriyi dompurify gibi kütüphanelerle temizleyerek XSS saldırılarını engelleyebilir, bağlantı sırasında token doğrulama yaparak yetkisiz erişimleri kısıtlayabilirsiniz.

Bu projeyi mobil cihazlarda çalıştırabilir miyim?

Evet, Node.js sunucunuzu bir IP adresi üzerinden yayına alırsanız, tarayıcı üzerinden mobil cihazlardan da aynı not defterine erişebilirsiniz.

Sonuç

Node.js ve Socket.io kullanarak paylaşımlı canlı not defteri yapmak, gerçek zamanlı web geliştirmenin temellerini öğrenmek için harika bir başlangıçtır. Bu projeyi geliştirmek için bir sonraki adım olarak, kullanıcıların kimlik doğrulaması yapabileceği bir giriş ekranı ekleyebilir veya notları kalıcı hale getirmek için bir MongoDB bağlantısı kurabilirsiniz. Yazılım geliştirme sürecinde, her zaman güvenli kod yazmayı ve kullanıcı deneyimini ön planda tutmayı unutmayın.

Yasal Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Uygulamanızın canlı ortama alınmadan önce güvenlik denetimlerinden geçirilmesi ve veri gizliliği standartlarına uygun hale getirilmesi geliştiricinin sorumluluğundadır.