﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Дневна доза нонсенс... &#187; Chrome</title>
	<atom:link href="http://dailyffs.com/tag/chrome/feed/" rel="self" type="application/rss+xml" />
	<link>http://dailyffs.com</link>
	<description>Софтуерно-инженерна му работа</description>
	<lastBuildDate>Tue, 03 Jan 2012 01:34:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Бъдещето на телекомуникациите &#8211; Web Sockets</title>
		<link>http://dailyffs.com/2010/the-future-web-sockets/</link>
		<comments>http://dailyffs.com/2010/the-future-web-sockets/#comments</comments>
		<pubDate>Mon, 22 Mar 2010 12:06:13 +0000</pubDate>
		<dc:creator>Lucho</dc:creator>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[WebSockets]]></category>

		<guid isPermaLink="false">http://dailyffs.com/?p=263</guid>
		<description><![CDATA[Най-голямата спънка при разработката на богати уеб приложения до сега е липсата на двупосочна връзка &#8211; от клиента към сървъра и от сървъра към клиента. Решението на този проблем винаги е било голяма болка и страдания, като най-общо се ползват чести запитвания към сървъра, на които той в 90% от времето  връща празен response или [...]<div class="addthis_toolbox addthis_default_style " addthis:url='http://dailyffs.com/2010/the-future-web-sockets/' addthis:title='Бъдещето на телекомуникациите &#8211; Web Sockets '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignleft" title=" " src="http://farm1.static.flickr.com/77/207253914_d4b38c5006.jpg" alt="" width="91" height="126" />Най-голямата спънка при разработката на богати уеб приложения до сега е липсата на двупосочна връзка &#8211; от клиента към сървъра и от сървъра към клиента. Решението на този проблем винаги е било голяма болка и страдания, като най-общо се ползват чести запитвания към сървъра, на които той в 90% от времето  връща празен response или <a href="http://en.wikipedia.org/wiki/Comet_%28programming%29">Comet</a> (познато още като long polling най-общо). И двата начина са тромави и ресурсоемки&#8230; даже бих ги определил като законни <a href="http://en.wikipedia.org/wiki/Denial-of-service_attack">DoS</a> атаки. И всичко това за да се симулира нещо подобно на двупосочна връзка.<br />
Е, дните на безсмислени request-и и празни response-и отминаха, защото HTML5 предлага няколко варианта за решение на този казус. Ще се спра само на един от тях, на тъй наречените <a href="http://dev.w3.org/html5/websockets/">Web Socket</a>-и. Както сигурно се досещате става въпрос за сокет съединения, макар и леко модифицирани и орязани, които могат да се създават и управляват чрез Javascirpt. Освен че тези web socket-и могат само да започват връзка, но не и да стоят и да слушат за постъпване на такава, те имат и собствен допълнителен протокол, с който си комуникират със сървърното приложение. Важното в случая е че дуплексна връзка има и то на много ниска цена (от към писане на код). При създаване на сокет се оказват callback функции за четене, възникване на грешка и отваряне/затваряне на връзката, така че когато някое от изборените събития се случи, тези callback функции се извикват и обработката на данни пада във вашите ръце. Това намалява драстично главоболията породени от блокиращи/неблокиращи сокети, безкрайни цикли, exception-и и какво ли още не.<br />
От сървърна гледна точка нещата също са прости, кодът който е нужен за успешна комуникация с клиента е съвсем стандартен за сървърно сокет приложение, с изключение на едни служебни съобщения, които Web Socket-ите очакват и от които не може да се бяга.</p>
<p style="text-align: justify;">Понеже всичко до сега звучи прекалено хубаво, ще се наложи да ви приземя малко, защото Web Socket-и за сега се поддържат само от Google Chrome, но рано или късно и другите browser vendor-и ще се усетят откъде духа вятъра. И понеже вече се приземихте ето и едно примерно приложение, което сглобих &#8211; <a href="http://gist.github.com/339983">MultiDraw</a>. Идеята е чрез HTML5 Canvas елемента и Web Socket-и да се постигне паралелно рисуване от множество клиенти върху платно. Сървърната част е на Python 2.6 и ползва модула <a href="http://docs.python.org/library/asyncore.html">asyncore</a> от стандартната библиотека, който симулира асинхронно четене и писане от сокети.</p>
<p>Ето кодът, който се отнася до web socket-ите при клиента:</p>
<pre class="brush: jscript; title: ; notranslate">
var s = new WebSocket(&quot;ws://&quot; + document.location.host + &quot;:6789/&quot;);
// създаване на сокет съединение на порт 6789
s.onopen = function(e) { document.title = 'MultiDraw - Online'; }
// функция, която да се изпълни при установена връзка
s.onclose = function(e) { document.title = 'MultiDraw - Offline'; }
// функция, която да се изпълни при прекратяване на връзка
s.onmessage = function(e) {
// функция, която да се изпълни при пристигане на съобщение (съобщението е в e.data)
    var data = e.data.split(&quot; &quot;); // обработваме съобщението...
    draw(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7]); // ... и чертаем върху Canvas-а
}
...
s.send([x, y, e.pageX, e.pageY, color, brushSize, lineCap, lineJoin].join(' ')); // изпращане на съобщение
</pre>
<p>При сървъра, единственото по-екзотично е хендшейк съобщението и това, че всяко съобщение започва с нулев байт и завършва с 0xFF (може да го видите в кода на сървъра).</p>
<p style="text-align: justify;">Кодът на клиента и сървъра е тук &#8211; <a href="http://gist.github.com/339983">http://gist.github.com/339983</a> .</p>
<p style="text-align: justify;">Happy Web Socketing <img src='http://dailyffs.com/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
<p style="text-align: justify;">
<p style="text-align: justify;"><em>P.S. Незнам дали забелязахте, ама редакторът на спецификацията за Web Socket-ите е &#8222;<a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.&#8220;, така че няма нищо странно, че  тези чудесии се появяват именно в Chrome за първи път <img src='http://dailyffs.com/wp-includes/images/smilies/icon_razz.gif' alt=':-P' class='wp-smiley' /> </em></p>
<div class="addthis_toolbox addthis_default_style " addthis:url='http://dailyffs.com/2010/the-future-web-sockets/' addthis:title='Бъдещето на телекомуникациите &#8211; Web Sockets '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://dailyffs.com/2010/the-future-web-sockets/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

