WebSockets - Mesaj Gönderin ve Alın
Messageolay genellikle sunucu bazı verileri gönderdiğinde gerçekleşir. Sunucu tarafından istemciye gönderilen mesajlar, düz metin mesajları, ikili veriler veya resimler içerebilir. Veriler her gönderildiğinde,onmessage fonksiyon ateşlendi.
Bu olay, bir istemcinin sunucuya kulağı görevi görür. Sunucu her veri gönderdiğinde,onmessage olay ateşlendi.
Aşağıdaki kod parçacığı, Web Soketi protokolünün bağlantısını açmayı açıklamaktadır.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}
Web Soketleri yardımıyla ne tür verilerin aktarılabileceğini de hesaba katmak gerekir. Web soket protokolü, metin ve ikili verileri destekler. Javascript açısından,text bir dize olarak ifade edilirken, ikili veriler şu şekilde temsil edilir ArrayBuffer.
Web soketleri aynı anda yalnızca bir ikili biçimi destekler. İkili verilerin beyanı aşağıdaki gibi açıkça yapılır -
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;
Teller
Dizelerin, XML ve JSON gibi okunabilir biçimlerle ilgilenen yararlı olduğu düşünülmektedir. Her ne zamanonmessage olay ortaya çıktığında, müşterinin veri türünü kontrol etmesi ve buna göre davranması gerekir.
Veri türünü Dize olarak belirlemek için kod parçacığı aşağıda belirtilmiştir -
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}
JSON (JavaScript Nesne Gösterimi)
Bilgisayarlar arasında insan tarafından okunabilir verileri aktarmak için hafif bir formattır. JSON yapısı, anahtar / değer çiftlerinden oluşur.
Misal
{
name: “James Devilson”,
message: “Hello World!”
}
Aşağıdaki kod, bir JSON nesnesinin nasıl işleneceğini ve özelliklerinin nasıl çıkarılacağını gösterir -
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}
XML
XML'de ayrıştırma, teknikler tarayıcıdan tarayıcıya farklılık gösterse de zor değildir. En iyi yöntem, jQuery gibi üçüncü taraf kitaplığı kullanarak ayrıştırmaktır.
Hem XML hem de JSON'da, sunucu, istemci tarafında ayrıştırılan bir dize olarak yanıt verir.
ArrayBuffer
Yapılandırılmış bir ikili veriden oluşur. Ekteki bitler, pozisyonun kolayca izlenebilmesi için bir sırayla verilmiştir. ArrayBuffers, görüntü dosyalarını saklamak için kullanışlıdır.
ArrayBuffers kullanarak veri almak oldukça basittir. OperatörinstanceOf eşit operatör yerine kullanılır.
Aşağıdaki kod, bir ArrayBuffer nesnesinin nasıl işleneceğini ve alınacağını gösterir -
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}
Demo Uygulaması
Aşağıdaki program kodu, Web Soketleri kullanılarak nasıl mesaj gönderilip alınacağını gösterir.
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>
Çıktı aşağıda gösterilmiştir.