Бъдещето на телекомуникациите – Web Sockets

1 коментар

Публикувана на 22.03.2010 от Lucho в Dev |HTML5 |Web

, ,

Най-голямата спънка при разработката на богати уеб приложения до сега е липсата на двупосочна връзка – от клиента към сървъра и от сървъра към клиента. Решението на този проблем винаги е било голяма болка и страдания, като най-общо се ползват чести запитвания към сървъра, на които той в 90% от времето  връща празен response или Comet (познато още като long polling най-общо). И двата начина са тромави и ресурсоемки… даже бих ги определил като законни DoS атаки. И всичко това за да се симулира нещо подобно на двупосочна връзка.
Е, дните на безсмислени request-и и празни response-и отминаха, защото HTML5 предлага няколко варианта за решение на този казус. Ще се спра само на един от тях, на тъй наречените Web Socket-и. Както сигурно се досещате става въпрос за сокет съединения, макар и леко модифицирани и орязани, които могат да се създават и управляват чрез Javascirpt. Освен че тези web socket-и могат само да започват връзка, но не и да стоят и да слушат за постъпване на такава, те имат и собствен допълнителен протокол, с който си комуникират със сървърното приложение. Важното в случая е че дуплексна връзка има и то на много ниска цена (от към писане на код). При създаване на сокет се оказват callback функции за четене, възникване на грешка и отваряне/затваряне на връзката, така че когато някое от изборените събития се случи, тези callback функции се извикват и обработката на данни пада във вашите ръце. Това намалява драстично главоболията породени от блокиращи/неблокиращи сокети, безкрайни цикли, exception-и и какво ли още не.
От сървърна гледна точка нещата също са прости, кодът който е нужен за успешна комуникация с клиента е съвсем стандартен за сървърно сокет приложение, с изключение на едни служебни съобщения, които Web Socket-ите очакват и от които не може да се бяга.

Понеже всичко до сега звучи прекалено хубаво, ще се наложи да ви приземя малко, защото Web Socket-и за сега се поддържат само от Google Chrome, но рано или късно и другите browser vendor-и ще се усетят откъде духа вятъра. И понеже вече се приземихте ето и едно примерно приложение, което сглобих – MultiDraw. Идеята е чрез HTML5 Canvas елемента и Web Socket-и да се постигне паралелно рисуване от множество клиенти върху платно. Сървърната част е на Python 2.6 и ползва модула asyncore от стандартната библиотека, който симулира асинхронно четене и писане от сокети.

Ето кодът, който се отнася до web socket-ите при клиента:

var s = new WebSocket("ws://" + document.location.host + ":6789/");
// създаване на сокет съединение на порт 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(" "); // обработваме съобщението...
    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(' ')); // изпращане на съобщение

При сървъра, единственото по-екзотично е хендшейк съобщението и това, че всяко съобщение започва с нулев байт и завършва с 0xFF (може да го видите в кода на сървъра).

Кодът на клиента и сървъра е тук – http://gist.github.com/339983 .

Happy Web Socketing ;-)

P.S. Незнам дали забелязахте, ама редакторът на спецификацията за Web Socket-ите е „Ian Hickson, Google, Inc.“, така че няма нищо странно, че  тези чудесии се появяват именно в Chrome за първи път :-P

FarmBot… или какво да правим докато нямаме личен живот

7 коментара

Публикувана на 10.03.2010 от Lucho в Dev |Web |Нонсенс

В последно време не съм писал нищо (става въпрос за писане на код) и взе да ми липсва… което май е нормално имайки предвид, че съм Софтуерен Инженер :-) . Та, много умувах какво да направя, първо бях решил да разширя ScreenShootMe с четка и възможност за писане, обаче това в някаква степен измества фокуса от основната идея на приложението и е трудоемко, а и искам FF да почне да поддържа colorpicker и slider функционалностите от HTML5, за да си спестя ненужни мъки. Впоследствие разбрах, че една колежка е 40 левъл в FarmVille… не че тя е единствената колежка, която играе FarmVille, но определено е висок левъл :-D . Понеже и аз имам фермичка се сетих, че всъщност в timeline-a на ФБ постоянно излизат съобщения за бонуси в FarmVille и част от тях си заслужават, но е досадно да си проверяваш нон-стоп ФБ за FV бонуси и да цъкаш по тях като ненормален. За това естествено тръгнах да мисля начин за автоматизация на процеса… за БОТ.

След нетолкова кратък рисърч, стигнах до извода че ФБ API-то може и да е удобно и лесно за ползване, но определено би отнело известно време, за да се свикне с него и за да се напише нещо такова, а и писането на PHP или друг скриптов език означава допълнителни constraints за обикновения юзър, който не е виждал програмен език в живота си или пък няма инсталиран нужния софтуер, за да подкара бота. От тук вече избора съвсем се стесни до… хм… Javascript и браузър.

v.0.1: Тръгнах да пиша един html файл, който да отваря ФБ в един фрейм и да парсва линковете за FarmVille… е не стана, незнам дали заради фроуд детекшън или заради нещо друго, но браузърите вече не дават да се бърника/чете html кода на страници в различни от настоящия домейн.

v.0.2: Същото важи и за отваряне на child прозорци и бърникане по техния код… god damn it… X_X

v.0.3: Докато търсех инфо за ФБ API-то попаднах на sandbox, в който може да се тестват разни функционалности – http://developers.facebook.com/tools.php и едно от нещата, които ми направиха впечатление, е че за изпълнение на request се ползва AJAX, a не просто постбек. Това естествено значи, че мога да напиша js код, който да се слага в addressbar-а или като bookmarklet и да обновява информацията през определено време, да я парсва и да отваря част от линковете в нови iframe-ове, което изпълнява целта напълно!

Моля, запишете си нужните продукти за да сготвиме бота :-)

1.  Логвате се в ФБ по стандартния начин

2. Отивате тук – http://developers.facebook.com/tools.php и избирате от падащото меню на Method > stream.get (това извежда timeline-a ви)

3. Copy/Paste кода по-долу в addressbar-a (за всички, които виждат браузър за първи път – после натиснете Enter)

javascript:
visited = {};

function process() {
    var code = document.getElementById('trace').innerHTML;
    var m = null;
    while (m = /\<href\>(http:\/\/apps\.facebook\.com\/onthefarm\/.+?)\<\/href\>/gi.exec(code)) {
        if (!visited[m[1]]) {
            var ifr = document.createElement('iframe');
            ifr.src = (m[1].replace(/&/g, '&')).replace(/&/g, '&');
            container.appendChild(ifr);
            visited[m[1]] = true;
        }
    }
    setTimeout('container.innerHTML = \'\'', 60*1000);
}

function refresh() {
    callMethod();
    setTimeout(process, 5*1000);
}

container = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(container);
setInterval(refresh, 120*1000);
void(0);

И така вашия бот би трябвало вече да е напълно оперативен (на български не звучи добре)!!!

Накратко какво прави кода – на всеки 2 минути обновява timeline-а и проверява дали има нови url-и, които да са за FarmVille. Ако има такива ги отваря в iframe-ове (все едно вие сте  цъкнали на „Get bonus“ линковете в ФБ). Може да го задействате навсякъде напрактика (освен ако не ползвате Mosaic) и да си събирате колектабълс или нафта или там каквото още имаше.

В заключение ще кажа, че докато четох повторно поста си осъзнах, че явно обичам да пиша глупави, безсмислени и непотребни приложения… или по-скоро ако трябва да избирам между направата на нещо смислено и нещо глупаво, май-май ще се спра на второто :-D … но пък това е в духа на блога ми все пак :-P

Честит осми март… и долу филмите за смърфове!

3 коментара

Публикувана на 08.03.2010 от Lucho в Нонсенс |Социални

Първо да честитя на всички дами техния празни – ЧЕСТИТО и приятно празненство :-)

После искам да им кажа (на дамите), че това е техният празник и е нормално да се съберат с приятелки и да го празнуват, а не да изнудват мъжете си да са заедно. 14 февруари ни стига, не искаме още дати от календара, които да ни сочите и да очаквате на всяка цена, че на този ден трябва да ви изведем някъде и да го прекарате с нас (мъжката половина от населението).

Второ, най-накрая Академията се усети, че да раздаваш Оскари на филм с половин милиард долара бюджет е ужасно глупаво и комерсиално. Хората възприемат и се радват повече на ефектни и красиви продукции, с много воюващи и умиращи хора… а ако са смърфове даже още повече се кефят (Аватар). Работата е там, че кинокритиците не са „хората“, не са средностатистическия американец и не трябва да са! Академията трябва да е критична, да гледа професионално на филмите, които оценява, а не да дава Оскари пропорционално на бюджета на филмите (визирам Матрицата и Властелинът).

Очаквам с нетърпение разгневени коментари от нежния пол и феновете на бозави филми, моля заповядайте :-P

Switch to our mobile site