{"id":549,"date":"2012-12-30T13:01:45","date_gmt":"2012-12-30T10:01:45","guid":{"rendered":"http:\/\/ulviercan.com\/teknoblog\/?p=549"},"modified":"2015-01-05T18:43:07","modified_gmt":"2015-01-05T15:43:07","slug":"jquery-comet-programlama","status":"publish","type":"post","link":"https:\/\/www.ulviercan.com\/teknoblog\/jquery\/jquery-comet-programlama\/","title":{"rendered":"JQuery Comet Programlama"},"content":{"rendered":"

Farkl\u0131 ihtiya\u00e7lar, farkl\u0131 \u00e7\u00f6z\u00fcmleri beraberinde getiriyor. Kullan\u0131c\u0131lara sayfa de\u011fi\u015fmeden, sayfada olan de\u011fi\u015fiklikleri g\u00f6stermek i\u00e7in genellikle AJAX tekni\u011fini kulland\u0131k. AJAX’\u0131n yetersiz kald\u0131\u011f\u0131 bir durumdan bahsetmek istiyorum. Diyelim ki, anl\u0131k 100 bin online ziyaret\u00e7isi olan bir sitemiz ve buna ba\u011fl\u0131 bir sayfam\u0131z olsun. Sayfadaki baz\u0131 verileri, AJAX yard\u0131m\u0131 ile 5 saniyede bir de\u011fi\u015ftirmek istedik. Bunun sonucunda her 5 saniyede bir, istemciden sunucuya istek yollanacak. 100 bin istemci oldu\u011fu i\u00e7in tam 100 bin istek. \u00c7ok masrafl\u0131, sunucular\u0131n ba\u015f belas\u0131 bir durum. Peki bu durumu nas\u0131l optimize edebiliriz? Bu sorunun cevab\u0131 COMET programlama tekni\u011fidir.<\/p>\n

COMET sunucu ile istemci aras\u0131nda sonsuz s\u00fcreli bir ba\u011flant\u0131 a\u00e7\u0131larak yap\u0131l\u0131r. \u015eimdi anlataca\u011f\u0131m y\u00f6ntem twitter, facebook, gmail gibi b\u00fcy\u00fck organizasyonlarda kullan\u0131lan y\u00f6ntemle birebir ayn\u0131d\u0131r.<\/p>\n

COMET’in di\u011fer adlar\u0131: Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming ve HTTP server push<\/p>\n

\"chart\"<\/p>\n

Uygulama<\/h1>\n

Ufak bir kendi kendimize mesajla\u015fma uygulamas\u0131 \ud83d\ude42
\n[ \u0130ndirmek i\u00e7in t\u0131klay\u0131n\u0131z ]<\/a><\/p>\n

index.html<\/strong><\/p>\n

\r\n<html>\r\n<head>\r\n<title>Comet Programlama<\/title>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8" \/>\r\n<style>\r\n\tbody { margin:0px; padding:0px; overflow:hidden; }\r\n\t#msg { margin:0px; padding:10px;width : 700px; height:300px; overflow-y:scroll; border:1px solid #000; }\r\n\t#send{ width: 700px; height:100px; overflow-y:scroll; }\r\n<\/style>\r\n\r\n<script src="jquery.js"><\/script>\r\n\r\n<script type="text\/javascript" charset="utf-8">\r\n\r\n\/\/ COMET k\u0131sm\u0131\r\nvar timestamp = null;\r\nfunction comet() {\r\n\t$.ajax({\r\n\t\ttype : 'get',\r\n\t\turl  : 'oku.php?timestamp=' + timestamp,\r\n\t\tasync : true,\r\n\t\tcache : false,\r\n\r\n\t\tsuccess : function(data) {\r\n\t\t\t\t\tvar json = eval('(' + data + ')');\r\n\t\t\t\t\tif(json['msg'] == ''){\r\n\t\t\t\t\t\t$('#msg').html('Mesaj Yok!');\r\n\t\t\t\t\t}else {\r\n\t\t\t\t\t\t$('#msg').html(json['msg']);\r\n\t\t\t\t\t\t$('#msg').animate({scrollTop: $('#msg').get(0).scrollHeight},1000);\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttimestamp  = json['timestamp'];\r\n\t\t\t\t\tsetTimeout('comet()', 1000);\r\n\t\t},\r\n\t\terror : function(XMLHttpRequest, textstatus, error) {\r\n\t\t\t\t\talert(error);\r\n\t\t\t\t\tsetTimeout('comet()', 15000);\r\n\t\t}\r\n\t});\r\n}\r\n\r\n\/\/ Mesaj G\u00f6nderme ve sonras\u0131nda veri dosyam\u0131za yazma k\u0131sm\u0131\r\n$(function() {\r\n\tcomet();\r\n\t$('#send').bind('keyup', function(e) {\r\n\t\tvar msg = $(this).val();\r\n\t\tif(e.keyCode == 13 && e.shiftKey) {\r\n\t\t\treturn ;\r\n\t\t}else if(msg!='' && e.keyCode == 13) {\r\n\t\t\t$.ajax({\r\n\t\t\t\ttype : 'GET',\r\n\t\t\t\turl  : 'yaz.php?msg='+ msg.replace(\/\\n\/g,'<br \/>'),\r\n\t\t\t\tasync : true,\r\n\t\t\t\tcache : false\r\n\t\t\t});\r\n\t\t\t$(this).val('')\r\n\t\t}\r\n\t})\r\n});\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<div id="msg"> <\/div>\r\n <br \/>\r\n Mesaj :\r\n <br \/>\r\n<textarea id="send" name="msg"><\/textarea>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Bu dosya iki ana b\u00f6l\u00fcmden olu\u015fmaktad\u0131r. Birincisi COMET, veriyi okudu\u011fumuz k\u0131s\u0131m. \u0130kincisi ise, mesak g\u00f6nderdi\u011fimiz yani dosyaya yazma k\u0131sm\u0131.<\/p>\n
COMET k\u0131sm\u0131nda oku.php dosyas\u0131na \u015fuandaki timestamp de\u011ferini yani data.txt dosyas\u0131n\u0131 en son d\u00fczenledi\u011fimiz zaman\u0131 g\u00f6nderiyoruz. Sonu\u00e7 ba\u015far\u0131l\u0131 ise (sonucun ba\u015far\u0131l\u0131 olmas\u0131 ayn\u0131 zamanda, dosyada de\u011fi\u015fiklik oldu\u011fu anlam\u0131na gelir) veriyi uygun bi\u00e7imde ekrana bast\u0131r\u0131yoruz ve 1 saniye sonra \u00e7al\u0131\u015fmak \u00fczere fonksiyonumuzu ayarl\u0131yoruz. Sonu\u00e7 ba\u015far\u0131s\u0131z ise ekrana hatay\u0131 uyar\u0131 \u015feklinde verdirip, fonksiyonu tekrar 15 saniye sonra \u00e7al\u0131\u015fmas\u0131 i\u00e7in ayarl\u0131yoruz. Burada kafan\u0131z kar\u0131\u015fabilir. S\u00fcrekli 1 saniyede 1 defa \u00e7al\u0131\u015f\u0131yor diye d\u00fc\u015f\u00fcnebilirsiniz. Ancak dikkatli olmak gerek. Verinin geldi\u011fi dosyay\u0131, oku.php dosyas\u0131n\u0131 incelerseniz sonu\u00e7, data.txt dosyas\u0131nda de\u011filiklik oldu\u011funda d\u00f6n\u00fcyor. Yani de\u011fi\u015fiklik olmad\u0131\u011f\u0131 s\u00fcrece herhangi bir istek ger\u00e7ekle\u015fmiyor \u00e7\u00fcnk\u00fc var olan istek hen\u00fcz tamamlanmad\u0131.<\/p>\n
\"bekleme\"<\/a><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi yapt\u0131\u011f\u0131m\u0131z istek s\u00fcrekli pending (beklemede) olarak g\u00f6z\u00fck\u00fcyor.<\/p>\n
Yazma k\u0131sm\u0131 \u00e7ok basit, textbox elementine yaz\u0131lan metni enter tu\u015funa bast\u0131\u011f\u0131m\u0131z anda yaz.php dosyas\u0131na g\u00f6nderiyoruz.<\/p>\n
oku.php<\/strong><\/p>\n
\r\n<?php\r\n\t$filename = 'data.txt';\r\n\t$last = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;\r\n\t$current = filemtime($filename);\r\n\r\n\twhile( $current <= $last) {\r\n\t\tusleep(100000);\r\n\t\tclearstatcache();\r\n\t\t$current = filemtime($filename);\r\n\t}\r\n\r\n\t$response = array();\r\n\t$response['msg'] = file_get_contents($filename);\r\n\t$response['timestamp'] = $current;\r\n\techo json_encode($response);\r\n?>\r\n<\/pre>\n
E\u011fer varsa, index.html dosyas\u0131ndan en son yap\u0131lan i\u015flem zaman\u0131n\u0131 yani, yazma i\u015fleminin zaman\u0131n\u0131 al\u0131yoruz. Bu zaman\u0131 dosyan\u0131n d\u00fczenlenme zaman\u0131 ile kar\u015f\u0131la\u015ft\u0131r\u0131yoruz. Herhangi bir de\u011fi\u015fiklik yoksa bu kontrol\u00fc tekrar yapmak \u00fczere bir saniyenin onda biri kadar bekliyoruz. E\u011fer dosyada de\u011fi\u015fiklik yap\u0131ld\u0131ysa, dosyadaki veriyi ekrana bast\u0131r\u0131yoruz.<\/p>\n
yaz.php<\/strong><\/p>\n
\r\n<?php\r\n\t$msg = $_GET['msg'];\r\n\t$file = 'data.txt';\r\n\t$handle = fopen($file, 'a');\r\n\tfwrite($handle, $msg);\r\n\tfclose($handle);\r\n\texit;\r\n?>\r\n<\/pre>\n
index.html dosyas\u0131ndan bize g\u00f6ndrilen mesaj\u0131 data.txt dosyas\u0131na (‘a’ append) yani ekliyoruz.<\/p>\n
data.txt:<\/strong> \u0130lk ba\u015fta i\u00e7eri\u011fi bo\u015f.<\/p>\n
Faydalan\u0131lan kaynaklar:
\n1-) A Simple Guide to Long Polling in 5 Minutes #nettuts
\n| https:\/\/www.screenr.com\/SNH<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Farkl\u0131 ihtiya\u00e7lar, farkl\u0131 \u00e7\u00f6z\u00fcmleri beraberinde getiriyor. Kullan\u0131c\u0131lara sayfa de\u011fi\u015fmeden, sayfada olan de\u011fi\u015fiklikleri g\u00f6stermek i\u00e7in genellikle AJAX tekni\u011fini kulland\u0131k. AJAX’\u0131n yetersiz kald\u0131\u011f\u0131 bir durumdan bahsetmek istiyorum. Diyelim ki, anl\u0131k 100 bin online ziyaret\u00e7isi olan bir sitemiz ve buna ba\u011fl\u0131 bir sayfam\u0131z olsun. Sayfadaki baz\u0131 verileri, AJAX yard\u0131m\u0131 ile 5 saniyede bir […]<\/p>\n","protected":false},"author":3,"featured_media":553,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9],"tags":[40,41,21,14],"class_list":["post-549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-comet","tag-javascript","tag-jquery-2","tag-php-2"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=549"}],"version-history":[{"count":14,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/549\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/549\/revisions\/676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/553"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}