Node.js ile WebSocket Kullanarak Gerçek Zamanlı Uygulama Geliştirme

Gerçek zamanlı uygulamalar, kullanıcıların anında güncellemeler almasını sağlar ve etkileşimi artırır. WebSocket, bu tür uygulamalar geliştirmek için ideal bir teknolojidir. Node.js ile WebSocket kullanarak, yüksek performanslı ve ölçeklenebilir gerçek zamanlı uygulamalar geliştirebilirsiniz. Bu yazıda, Node.js ve WebSocket kullanarak temel bir gerçek zamanlı sohbet uygulaması nasıl oluşturulur, adım adım anlatacağız.

Gerekli Araçlar ve Kurulum

1. Node.js ve NPM

Öncelikle, Node.js ve npm (Node Package Manager) bilgisayarınıza kurulu olmalıdır. Kurulum için Node.js resmi web sitesini ziyaret edebilirsiniz.

2. Proje Dizini Oluşturma

Yeni bir proje dizini oluşturun ve içine geçin:

mkdir websocket-chat
cd websocket-chat

3. Node.js Projesi Başlatma

Yeni bir Node.js projesi başlatın:

npm init -y

4. Gerekli Paketlerin Yüklenmesi

WebSocket desteği için ws paketini ve basit bir HTTP sunucusu için express paketini yükleyin:

npm install express ws

WebSocket Sunucusu Oluşturma

1. Sunucu Dosyasının Oluşturulması

Proje dizininde server.js adında bir dosya oluşturun ve aşağıdaki kodları ekleyin:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
    console.log('New client connected');

    ws.on('message', (message) => {
        console.log(`Received message => ${message}`);
        // Gelen mesajı tüm bağlı istemcilere gönder
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

server.listen(8080, () => {
    console.log('Server started on port 8080');
});

Basit İstemci Uygulaması Oluşturma

1. İstemci Dosyasının Oluşturulması

Proje dizininde index.html adında bir dosya oluşturun ve aşağıdaki kodları ekleyin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input type="text" id="messageInput" placeholder="Enter message">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const ws = new WebSocket('ws://localhost:8080');

        ws.onmessage = (event) => {
            const messages = document.getElementById('messages');
            const message = document.createElement('li');
            message.textContent = event.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            const input = document.getElementById('messageInput');
            ws.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

Sunucuyu Çalıştırma

Proje dizininde, terminal üzerinden sunucuyu başlatın:

node server.js

Uygulamayı Test Etme

Tarayıcınızda index.html dosyasını açın ve farklı sekmelerde birkaç istemci bağlantısı oluşturun. Mesaj gönderdiğinizde, tüm bağlı istemciler anında güncellemeleri alacaktır.

Sonuç

Bu yazıda, Node.js ve WebSocket kullanarak temel bir gerçek zamanlı sohbet uygulamasının nasıl geliştirileceğini öğrendik. Bu temel uygulamayı geliştirerek, daha karmaşık ve özellikli gerçek zamanlı uygulamalar oluşturabilirsiniz. WebSocket ile ilgili daha fazla bilgi edinmek ve özelliklerini keşfetmek için WebSocket API belgelerine göz atabilirsiniz.