Websocket Nedir? Nasıl Kullanılır? Avantajları Nelerdir? AJAX ve

Websocket Nedir? Nasıl Kullanılır? Avantajları Nelerdir? AJAX ve Axios ile Arasındaki Farklar Nelerdir?

Web Yazılım

509

05 Mart 2024 Salı - 13:00 (2 Ay önce)

WebSocket, birçok modern web tarayıcısı ve sunucu platformu tarafından desteklenen bir iletişim protokolüdür. Bu protokol, bir web tarayıcısıyla sunucu arasında çift yönlü iletişim kurmaya olanak tanır. Geleneksel HTTP protokolü, istemci tarafından sunucuya yapılan isteklerde "istek-cevap" modelini kullanırken, WebSocket ile sunucu, istemciye de veri gönderebilir. Bu, gerçek zamanlı uygulamaları ve interaktif web sitelerini desteklemek için oldukça önemlidir.

WebSocket, bir istemci ve sunucu arasında çift yönlü iletişim sağlar. Bu nedenle, WebSocket teknolojisi, istemci ve sunucu arasında çalışır. Ancak, bir sunucu tarafında WebSocket desteği olması gerekir. İstemci ve sunucu arasında bir bağlantı kurulduğunda, her iki taraf da veri gönderebilir ve alabilir. Bu nedenle, WebSocket kullanılarak gerçek zamanlı iletişim sağlamak için hem istemci hem de sunucu tarafında uygun uygulama kodları bulunmalıdır. Örneğin, bir web tarayıcısı istemci tarafında WebSocket kullanabilirken, bir web sunucusu sunucu tarafında WebSocket bağlantılarını kabul edebilir ve işleyebilir. Bu şekilde, WebSocket kullanılarak gerçek zamanlı iletişim sağlar.

WebSocket'in temel özellikleri şunlardır:

Tam Çift Yönlü İletişim: Hem istemci hem de sunucu, bağlantı kurulduktan sonra birbirlerine veri gönderebilirler.
Düşük Gecikme: WebSocket, HTTP gibi ekstra gereksiz başlık veri alışverişi olmadan doğrudan veri alışverişi yapar, bu nedenle daha düşük gecikmeye sahiptir.
Tek Bağlantı: Birden çok veri alışverişi için tek bir bağlantı kullanılabilir, bu da gereksiz bağlantı kurma maliyetlerini azaltır.
Protokol Genişlemesi: WebSocket, protokol uzantılarını kullanarak özelleştirilebilir ve genişletilebilir.

WebSocket, web tabanlı uygulamaların gerçek zamanlı iletişimini gerektiren bir dizi senaryoda kullanılır. Canlı sohbet uygulamaları, çevrimiçi oyunlar, finansal uygulamalar ve gerçek zamanlı analiz gibi uygulamalar için idealdir.

WebSocket'in kullanım senaryolarından bazıları:

Canlı Sohbet Uygulamaları: WebSocket, kullanıcıların gerçek zamanlı olarak iletişim kurabileceği canlı sohbet uygulamaları için idealdir. Mesajların hızlı bir şekilde gönderilip alınması, kullanıcı deneyimini artırır.
Gerçek Zamanlı Oyunlar: Çok oyunculu çevrimiçi oyunlar, oyuncular arasında hızlı ve sürekli veri alışverişi gerektirir. WebSocket, bu tür oyunlarda kullanıcı etkileşimini gerçek zamanlı olarak işlemek için idealdir.
Finansal Uygulamalar: Hisse senetleri, kripto para birimleri ve diğer finansal varlıkların fiyatları hızla değişir. Finansal uygulamalar, WebSocket'i kullanarak piyasa verilerini gerçek zamanlı olarak izleyebilir ve kullanıcılara anlık bildirimler gönderir.
Gerçek Zamanlı Analiz: Büyük veri işleme ve gerçek zamanlı analiz için WebSocket kullanılabilir. Örneğin, bir akış verisi analizi uygulaması, gelen verileri anlık olarak işleyebilir ve sonuçları kullanıcılara gösterir.
Uzaktan Kontrol ve İzleme: IoT (Nesnelerin İnterneti) cihazları ve endüstriyel kontrol sistemleri gibi uygulamalarda, cihazlarla sürekli olarak iletişim kurmak ve durumu izlemek için WebSocket kullanılabilir.
Sürükle ve Bırak Dosya Yükleme: WebSocket, sürükle ve bırak yöntemiyle dosya yükleme işlemlerini gerçek zamanlı olarak izlemek ve ilerlemeyi kullanıcılara göstermek için kullanılabilir.

Bu senaryolar WebSocket'in yalnızca birkaç örneğidir ve bu teknoloji, çeşitli alanlarda gerçek zamanlı iletişim gerektiren birçok farklı uygulama için uygun bir çözümdür.

WebSocket, AJAX ve Axios Kıyaslaması

WebSocket, AJAX ve Axios gibi diğer HTTP tabanlı iletişim yöntemlerinden farklı bir iletişim protokolüdür ve farklı kullanım senaryolarına sahiptir. İşte WebSocket'in AJAX ve Axios ile kıyaslanması:

Yakınlık ve Gerçek Zamanlı İletişim:
- WebSocket: Gerçek zamanlı iletişim için idealdir. Sunucu ve istemci arasında sürekli ve çift yönlü iletişim sağlar. Bu, canlı sohbet uygulamaları, gerçek zamanlı oyunlar gibi senaryolarda kullanılabilir.
- AJAX ve Axios: AJAX ve Axios gibi HTTP tabanlı teknolojiler, sunucu ile tek yönlü iletişim sağlarlar. İstemci, sunucuya bir istek gönderir ve sunucudan cevap alır. Bu, bir sayfayı yenilemeden veri alışverişi yapmak için kullanışlıdır ancak gerçek zamanlı iletişim için WebSocket kadar uygun değildir.
Veri Trafiği:
- WebSocket: Bağlantıyı kurduktan sonra gereksiz başlık verisi olmadan veri gönderir ve alır. Bu, daha düşük bir veri trafiği ve daha düşük gecikme sağlar.
- AJAX ve Axios: HTTP tabanlı iletişim, her istek için başlık verisi ekler. Bu, daha fazla veri trafiğine ve artan gecikmeye neden olabilir.
Bağlantı Yönetimi:
- WebSocket: Tek bir bağlantı üzerinden sürekli iletişim sağlar. Bağlantı bir kez kurulduğunda, istemci ve sunucu arasında veri alışverişi yapmak için tekrar tekrar bağlantı kurmaya gerek yoktur.
- AJAX ve Axios: Her istek için ayrı bir HTTP isteği yapılması gerektiğinden, bağlantı yönetimi daha karmaşıktır. Bu, gereksiz bağlantı maliyetlerine neden olabilir.
Desteklenen Platformlar:
- WebSocket: Modern web tarayıcıları ve sunucu platformları tarafından desteklenir. Ancak, bazı eski tarayıcılar ve sunucu platformları WebSocket'i desteklemez.
- AJAX ve Axios: Neredeyse tüm web tarayıcıları ve sunucu platformları tarafından desteklenir. Bu, daha geniş bir kullanılabilirlik sağlar.

Sonuç olarak, WebSocket, gerçek zamanlı iletişim gerektiren uygulamalar için idealdir, ancak HTTP tabanlı teknolojilere kıyasla daha spesifik bir kullanım alanına sahiptir. AJAX ve Axios gibi HTTP tabanlı teknolojiler, daha genel amaçlı veri alışverişi için daha yaygın olarak kullanılır.

Örnek Kullanım

Bir JavaScript istemcisinden bir WebSocket sunucusuna bağlanmayı ve mesajları alıp göndermeyi gösterir. Bu örnekte, Node.js kullanarak basit bir WebSocket sunucusu oluşturacağız ve ardından bir HTML dosyasında JavaScript kullanarak bu sunucuya bağlanacağız.

WebSocket Sunucusu (Node.js):

const WebSocket = require('ws');

// WebSocket sunucusunu oluştur
const wss = new WebSocket.Server({ port: 8080 });

// Yeni bir bağlantı geldiğinde
wss.on('connection', function connection(ws) {
console.log('Yeni bir bağlantı oluşturuldu.');

// İstemciden gelen mesajları dinle
ws.on('message', function incoming(message) {
console.log('İstemciden mesaj alındı:', message);

// Gelen mesajı geri gönder
ws.send('Sunucudan alındı: ' + message);
});
});

WebSocket İstemcisi (HTML ve JavaScript):

const socket = new WebSocket('ws://localhost:8080');

// Sunucudan gelen mesajları dinle
socket.onmessage = function(event) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += ' ' + event.data + ' ';

};

// Mesaj gönderme işlevi
function sendMessage() {
const inputField = document.getElementById('messageInput');
const message = inputField.value;
socket.send(message);
inputField.value = ''; // input alanını temizle
}

Yukarıdaki örnek, bir WebSocket sunucusu oluşturur ve istemci tarafında bir HTML dosyası içinde JavaScript kullanarak bu sunucuya bağlanır. Kullanıcı, bir metin giriş kutusuna mesajlarını girip "Mesajı Gönder" düğmesine tıkladığında, istemci bu mesajı sunucuya gönderir ve sunucudan gelen yanıtı ekranda gösterir.

Paribu BTC Verileri Yayın Yapan Mini Socket Server

"use strict";

process.title = 'btc paribu';

var webSocketsServerPort = 1337;

var webSocketServer = require('websocket').server;
var http = require('http');
var axios = require('axios');
var uuid = require('uuid');

axios.defaults.timeout = 180000;

var clients = [];

/**
* HTTP server
*/
var server = null;

function createServer() {
server = http.createServer(function (request, response) { });

server.listen(webSocketsServerPort, function () {
console.log((new Date()) + " Server is listening on port " + webSocketsServerPort);
});
var wsServer;

wsServer = new webSocketServer({
httpServer: server
});

wsServer.on('request', function (request) {
var connection = request.accept(null, request.origin);
var _cnnuuid = add_connection(connection);

connection.on('message', function (message) {
if (message.type === 'utf8') { // accept only text

}
});
connection.on('close', function (connection) {
clean_disconnect_cnn();
});
});
} // createserver

function add_connection(_cnn) {
let _cnnuuid = null;

try {
_cnnuuid = uuid.v4();
clients.push({ uuid: _cnnuuid, cnn: _cnn });

if (clients.length > 60){
serverreset();
}
} catch (error) {
console.error(error);
}

return _cnnuuid;
}

function getData() {
if (clients.length > 0 || clients.length == 0) {

axios.get('https://paribu.com/ticker')
.then(function (response) {
console.log((new Date()) + " Sended Data (Client : " + clients.length + ")");

sendData(response);

})
.catch(function (error) {
console.log("error https://paribu.com/ticker ");

setTimeout(() => {
getData();
}, 3000);

function clean_disconnect_cnn() {
if (clients.length == 0) return;
let disconnected = clients.filter(function (e) {
return !e.cnn.connected;
});

if (disconnected.length > 0) {
clients = clients.filter(function (e) { return e.cnn.connected; });

}
}

function sendData(_senddata) {
try {
if (_senddata != null && _senddata.data != undefined && _senddata.data != null) {
let jsondata = JSON.stringify(_senddata.data);

if (clients.length > 0) {
for (let i = 0; i < clients.length; i++) {
try {
if (clients[i].cnn.connected) {
clients[i].cnn.send(jsondata);
}
} catch (error) {
console.error(error);
}
}
}
} else {
console.log("not data received");
}
} catch (error) {
console.log(error);
}

setTimeout(() => { getData(); }, 5000);
}

createServer();
getData();

setInterval(() => {
serverreset();
}, 1000 * 60 * 2); // 2dk da bir restart

function serverreset(){
try {
clients.forEach(element => {
element.cnn.close();
});
} catch (error) {}

server.close();
clients = [];
console.log("server closed");
server = null;

createServer();
}