Socket.IO ile Typing Indicator Nasıl Yapılır

Gerçek zamanlı sohbet uygulamaları geliştirirken kullanıcıların mesaj yazarken diğerlerine "yazıyor" bilgisini göstermek önemli bir kullanıcı deneyimi sunar. Socket.IO ile typing indicator yani "yazıyor bildirimi" işlevini kolayca hayata geçirebilirsiniz. Bu makalede, Socket.IO ile typing indicator nasıl yapılır adım adım anlatılmaktadır.

Socket.IO ile Typing Indicator Mantığı

Socket.IO, istemci ve sunucu arasında çift yönlü anlık veri iletişimine olanak sağlar. Typing indicator eklemenin temel mantığı, bir kullanıcının yazmaya başladığını ve/veya durduğunu bildiren olayları göndermek ve ilgili kullanıcıya gösterecek şekilde istemcide bu olayları dinlemekten geçer. Böylece gerçek zamanlı olarak "kullanıcı yazıyor" bilgisini gösterebiliriz.

Sunucu Kodunu Hazırlama

Öncelikle bir Node.js ortamında Socket.IO kurulu olduğundan emin olun. Sunucu tarafında typing indicator olayı için aşağıdaki gibi bir yapı kullanabilirsiniz:

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);

io.on('connection', (socket) => {
    socket.on('typing', (username) => {
        socket.broadcast.emit('typing', username);
    });
    socket.on('stopTyping', (username) => {
        socket.broadcast.emit('stopTyping', username);
    });
});

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

İstemci Kodunda Typing Indicator

İstemci tarafında kullanıcı metin kutusuna yazmaya başladığında veya yazmayı bıraktığında ilgili olayları tetiklemek gerekir. Socket.IO istemci kütüphanesini sayfanıza ekleyin ve ardından aşağıdaki örneği inceleyin:

<input type="text" id="message" placeholder="Mesajınızı yazın..." />
<div id="typing-indicator" style="display:none; color:gray;"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();
    const input = document.getElementById('message');
    const indicator = document.getElementById('typing-indicator');
    let typing = false;
    let timeout;
    
    input.addEventListener('input', () => {
        if(!typing){
            socket.emit('typing', 'KullanıcıAdınız');
            typing = true;
        }
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            socket.emit('stopTyping', 'KullanıcıAdınız');
            typing = false;
        }, 1000);
    });

    socket.on('typing', (username) => {
        indicator.textContent = username + ' yazıyor...';
        indicator.style.display = '';
    });
    socket.on('stopTyping', (username) => {
        indicator.style.display = 'none';
    });
</script>

Typing Indicator için Dikkat Edilecekler

Kodda typing ve stopTyping olaylarını kullandık. Her kullanıcı kendine ait bir kullanıcı adı kullanmalı ve bu bilgiler sunucuya doğru iletilmelidir. Zaman aşımı ile ilgili işlemler, kullanıcının kısa bir süre (örneğin 1 saniye) yazmayı bırakması durumunda indicator'ı otomatik olarak gizler.

Sonuç

Özetle, Socket.IO ile typing indicator yapmak oldukça pratiktir ve gerçek zamanlı sohbet uygulamalarında kullanıcı deneyimini artırır. Socket.IO ile typing indicator nasıl yapılır sorusunun cevabını teknik detaylarla bu yazıda bulabilirsiniz. Kendi projelerinizde kolayca entegre etmek için yukarıdaki örnek kodları kullanabilirsiniz.