Node.js – Socket.IO Client Tabanlı Özelleştirmeler

Gençay

8 yıl önce

Merhaba,

Web socket çalışmalarında yapısal olarak tüm süreçteki sorumluluk Node.js tarafından oluşturulan server’da üstlenilmiştir. İşte bu süreçte server’da bağlantıyla ilgili tüm olası durumlar(connect/disconnect vs.) ceyran ettiğinde alınacak refleksleri serverdan bağımsız bir şekilde client tabanlı belirleyebilmekteyiz. Bu içeriğimizde web socket çalışmalarında client tabanlı özelleştirmeleri inceliyor olacağız…

Backend

İlk olarak çalışmamızı örneklendireceğimiz backendi aşağıdaki gibi geliştirelim;

const socket = require("socket.io");
const http = require("http");

const server = http.createServer((request, response) => response.end("..."));
const io = socket.listen(server.listen(5000, () => console.log("Starting...")));

io.on("connection", socket => {
    console.log(`${socket.id} connected...`);
    socket.on("disconnect", () => console.log(`${socket.id} disconnected...`));
});

Client

Ardından client olarak kullanacağımız sayfamızın temellerini aşağıdaki gibi atalım;

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script>
        $(() => {
            const socket = io.connect("http://localhost:5000/");
        });
    </script>
</head>
<body>
    <ul id="message">
    </ul>
</body>
</html>

Şimdi ilk olarak bağlantı prosedürlerini ele alarak asıl konumuza başlayalım;

Client Tabanlı Bağlantı Prosedürleri

reconnectionAttempts
Web sokete yapılan bağlantı talebinin başarısız olduğu durumlarda kaç kez yeniden bağlantı denemesi yapılacağını belirtmektedir.
```
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionAttempts: 2
            });
        });
```
Ekran görüntüsünden de anlaşılacağı üzere belirtilen değer kadar tekrar connection denenecek, aksi halde tekrar sona erecektir.
Varsayılan olarak bir sınır tanımlanmadığından ekstra bildirim yapılmadığı sürece sonsuza kadar connection denemesi yapılacaktır.
reconnectionDelay
Bağlantı talebinin başarısız olduğu durumlarda saniye cinsinden ne kadar sürede bir connection tekrarı yapılacağını belirlemektedir.
```
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionDelay: 1,
            });
        });
```
reconnection
Socket’e yapılan ilk bağlantı talebinde bir başarısızlık söz konusuysa tekrar connectionların yapılıp yapılmayacağını belirleyen özelliktir. “true” ya da “false” değeri alır.
```
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnection: false
            });
        });
```

Durumsal Fonksiyonlar

Web socket yapılanmasında; başarısız bağlantı durumlarında yahut tekrar bağlantı kurma çalışmalarında süreçte hangi aksiyonun ceyran ettiğini takip edebilmek için sistem tarafından “emit” olarak tanımlanmış özel fonksiyonlar tetiklenmektedir. Şimdi gelin bu fonksiyonları inceleyelim;

reconnect_error
Bağlantı başarısızsa tetiklenecek fonksiyondur.

        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionAttempts: 10,
                reconnectionDelay: 1,
                reconnection: true
            });
            socket.on("reconnect_error", () => {
                alert("Hata alındı...");
            });
        });

reconnect_attempt
Başarısız bağlantı sonrası tekrar talepte bulunulan bağlantı esnasında tetiklenen fonksiyondur.
```
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionAttempts: 10,
                reconnectionDelay: 1,
                reconnection: true
            });
            socket.on("reconnect_attempt", () => {
                alert("Tekrar bağlanılıyor...");
            });
        });
```
reconnect
Başarısız bağlantı sonrası tekrar talepte bulunulan bağlantının başarılı olduğu durumda tetiklenir.
```
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionAttempts: 10,
                reconnectionDelay: 1,
                reconnection: true
            });
            socket.on("reconnect", () => {
                alert("Bağlantı başarılı...");
            });
        });
```

Serverın opsiyonel durumlarına nazaran client tabanlı alınabilecek reflekslerimizi incelemiş olduk. Şimdi aşağıdaki örnek çalışmayı inceleyerek, konumuzu noktalayalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script>
        $(() => {
            const socket = io.connect("http://localhost:5000/", {
                reconnectionDelay: 1,
                reconnection: true
            });

            socket.on("reconnect_error", () => {
                $("#message").prepend(`<li style="color:red;"><strong>Hata alındı...</strong></li>`);
            });
            socket.on("reconnect_attempt", () => {
                $("#message").prepend(`<li style="color:blue;"><strong>Yeniden bağlanılıyor...</strong></li>`);
            });
            socket.on("reconnect", () => {
                $("#message").prepend(`<li style="color:green;"><strong>Bağlantı başarılı...</strong></li>`);
            });
        });
    </script>
</head>
<body>
    <ul id="message">
    </ul>
</body>
</html>

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…