Melnaron

Китайские карты в 3D поражают воображение

Melnaron — Wed, 02 Jun 2010 10:24:03 +0000

Недавно в своем Google Reader’е я наткнулся на интересную запись о том, что китайцы начали рисовать карты своих городов в 3D! Отрисовано уже несколько десятков городов, и, скажу я вам, детализация просто поражает воображение!

Прямо SimCity какой-то!

Побродить по картам “вживую” можно тут: http://sh.o.cn/, http://www.o.cn/, http://gz.o.cn/, http://www.jc08.com/.

Если вам нехватает понимания китайских иероглифов, то советую вам установить Google Chrome – он в автоматическом режиме предлагает перевести страници на ваш язык.

Peer-to-Peer Chat in Flash

Melnaron — Sun, 30 May 2010 18:40:45 +0000

Этой статьей я хочу открыть новую тему в своем блоге, посвященную разработке на Flash/Flex/ActionScript3. Итак приступим.

Flash Player 10.0

Начиная с версии 10.0 во Flash Player появилась очень интересная возможность, которая позволяет устанавливать прямые соединения между плеерами при помощи сервиса Stratus:

1
2
3

nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nc.connect('rtmfp://stratus.adobe.com/YOUR_DEVELOPER_KEY_HERE');

Этот сервис выполняет роль организатора: подключившись к нему ваш клиент получает уникальный Peer ID, зная который, другие такие же как и вы клиенты, могут напрямую подключаться к вашему клиенту и подписываться на данные, которые вы публикуете.

Давайте рассмотрим эту схему более подробно, по шагам:

Flash-клиент в вашем браузере соединяется с сервисом Stratus
В клиенте создается поток (NetStream), в который начинается публикация какого-то контента
Другие flash-клиенты также соединяются с сервисом Stratus
В них создаются потоки, которые подключаются к вашему клиенту по его Peer ID и подписываются на контент от него

Это самая простая схема: один клиент публикует контент, а другие подписываются на получение контента.

Но давайте попробуем усложнить эту схему. Что если каждый клиент и публикует и подписывается на потоки всех известных ему клиентов?

Чат

Сейчас я много занимаюсь разработкой приложений для коммуникации. Это и аудио/видео чаты, и обычные текстовые чаты (кто-нибудь помнит мой Mel.Chat?). И в связи с этим я хочу поделиться небольшим примером разработки простого текстового чата, основанного на технологии Peer-to-Peer или P2P. В отличии от старичка Mel.Chat’а, который основан на постоянной долбежке сервера AJAX-запросами, в этом чате все очень похоже на технологию клиент/сервер. Создаются необходимые соединения, которые просто остаются открыты столько сколько нужно и просто ожидают данные, которые отправляют (публикуют) другие клиенты. Но если с технологией клиент/сервер все более или менее понятно (все клиенты соединяются с одним определенным сервером, и все коммуникации осуществляются путем отправки сообщений на сервер, который в свою очередь отправляет сообщения всем подключенным к нему клиентам), то с P2P у нас так не получится, потому что тут у нас нет какого-то определенного сервера, а каждый отдельный клиент должен быть подписан на всех других участвующих в чате клиентов.

Схема ясна, переходим к практике.

Сервис регистрации Peer ID

Во-первых необходимо организовать сервис обмена Peer ID (далее фингерпринт) между клиентами. Это нужно для того, чтобы каждый новый подключившийся клиент мог самостоятельно найти хотябы одного активного в данный момент клиента и установить с ним соединение. Ниже представлен простейший код такого сервиса на PHP & MySQL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

require 'lib/db.php';

Db::connect('localhost', 'user', 'password', 'database') or die(Db::error());

define('DB_TABLE', 'p2pchat');

$time = time();
$cooldown = 900; // 15 min
$limit = 5;

// удаляем все истекшие записи
Db::delete(DB_TABLE, 'timestamp < '.($time - $cooldown));

if (isset($_GET['insert']) && ! empty($_GET['insert'])) {
// выбираем последние обновленные записи для попытки соединения с ними
$fingerprints = Db::select(DB_TABLE, 'fingerprint', NULL, 'timestamp DESC', $limit);

// записываем в базу свой фингерпринт
Db::insert(DB_TABLE, array('fingerprint' => Db::escape($_GET['insert']), 'timestamp' => $time));

// отправляем в ответ выбранные записи
if (sizeof($fingerprints) > 0) {
$response = array();

foreach ($fingerprints as $fp) {
$response[] = $fp['fingerprint'];
}

echo implode(',', $response);
}
} else if (isset($_GET['update']) && ! empty($_GET['update'])) {
// обновляем свой фингерпринт
Db::update(DB_TABLE, array('timestamp' => $time), 'fingerprint = "'.Db::escape($_GET['update']).'"');
}

Давайте я немного расскажу о принципе работы этого сервиса (или трекера). После того как ваш flash-клиент установил соединение с сервисом Stratus он отправляет GET-запрос с вашим Peer ID в качестве параметра сервису регистрации фингерпринтов. Ваш фингерпринт сохраняется в базе с текущим временем. Также сервис выбирает из базы несколько последних добавленных/обновленных фингерпринтов и отправляет их в ответ вашему клиенту. Клиент пытается установить соединение с каждым из полученных фингерпринтов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var loader:URLLoader = new URLLoader();

loader.addEventListener(Event.COMPLETE, function(e:Event):void {
log('Insert fingerprint complete');

var fps:Array = e.target.data.split(',');

// перебираем все полученные фингерпринты,
// и пытаемся с ними соединиться
for (var i:int = 0; i < fps.length; i++) {
if (fps[i].length) {
initRecvStream(fps[i]);
}
}
});

try {
loader.load(new URLRequest('http://url/to/p2pchatreg.php?insert='+myPeerID));
} catch (error:Error) {
log('Unable to insert my peer id');
}

И тут начинается самое интересное…

Оповещение о новом участнике

Так как запрос регистрации возвращает ограниченное количество последних обновленных фингерпринтов, наш клиент не сможет подключиться ко всем участвующим в чате клиентам, но этого и не потребуется, потому что клиенты сами “рассказывают” друг другу о подключении новых участников к чату, а также оповещают подключающихся к ним клиентах о своих именах:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

client.onPeerConnect = function(subscriber:NetStream):Boolean {
// когда ко мне присоединяется подписчик, проверяем,
// если это новый подписчик, то оповещаем всех о нем,
// а также подписываемся на его поток
if (! hasSubscriptionTo(subscriber.farID)) {
sendStream.send('onBroadcastNewSubscriber', subscriber.farID);
initRecvStream(subscriber.farID);
}

// ... и конечно же оповещаем его о своем имени
subscriber.send('onPeerNameUpdate', myPeerID, myName);

return true;
};

Итак, подключившись хотя бы к одному активному участнику чата или пиру (от англ. peer), тот немедленно проверяет свой список подключенных к нему пиров, и если вашего клиента с его уникальным peer id там еще нет, то он оповещает всех о новом подключенном к конференции клиенте, и все уже связанные друг с другом пиры сами устанавливают соединение с вами. Таким образом образуется самоформирующаяся группа участников конференции (во Flash Player 10.1 всю эту механику берет на себя новый класс NetGroup + GroupSpecifier).

Актуальность фингерпринтов

Актуальность активных в данный момент фингерпринтов – это ключевой момент всего приложения. Чтобы поддерживать актуальность своего фингерпринта каждый активный клиент через определенный промежуток времени отправляет GET-запрос на сервис регистрации фингерпринтов с просьбой обновить время активности своего фингерпринта:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// запускаем таймер который будет тикать каждые 5 минут (300 секунд)
var timer:Timer = new Timer(300 * 1000);

timer.addEventListener(TimerEvent.TIMER, function():void {
var loader:URLLoader = new URLLoader();

loader.addEventListener(Event.COMPLETE, function(e:Event):void {
log('Update fingerprint complete');
});

try {
loader.load(new URLRequest('http://url/to/p2pchatreg.php?update='+myPeerID));
} catch (error:Error) {
log('Unable to update my peer id');
}
});

timer.start();

Таким образом новые участники конференции всегда получают пачку самых последних активных пиров на данный момент. И подключившись хотя бы к одному активному пиру, тот в свою очередь, оповещает всех о новом участнике.

Заключение

В итоге, у нас получается достаточно простой чат, который не использует сервер для передачи сообщений, и поддерживает большое количество клиентов онлайн. Мгновенно отправляет и получает сообщения. К такому чату можно добавить аудио/видео звонки и передачу файлов (аля Skype). Основными требованиями для работы такого чата являются наличие установленного Flash Player 10.0+ и разрешенный UDP-траффик.

В следующей статье я расскажу об использовании более удобных средств для организации групп при помощи классов NetGroup и GroupSpecifier из FlashPlayer 10.1.

Если вы хотите быть в курсе моих новых публикаций о flash и peer-to-peer, то не стесняйтесь и подписывайтесь на RSS-ленту моего блога или следите за мной в Twitter.

Живой пример P2PChat – Чтобы опробовать чат откройте его в 2х или более окнах браузера, расположите их рядом друг с другом и попробуйте что-нибудь написать.

Скачать исходные коды P2PChat – Для Flash Builder 4 + Flex SDK 4. Для работы со Стратусом вам необходимо получить “stratus developer key” зайдя на страницу Stratus и перейдя по ссылке “Signup for a Stratus beta developer key”.

MEL.Chat: Теперь с MySQL!

Melnaron — Sun, 22 Feb 2009 17:55:33 +0000

Итак, как я и обещал, выкладываю новую бета-версию чата, теперь с поддержкой СУБД MySQL.

Скачать MEL.Chat 2.0b3

А теперь немного об установке и настройке серверной части. Для начала откройте файл server/cfg.php и отредактируйте данные для подключения к MySQL-серверу. Затем запустите скрипт server/setup.php для создания необходимых таблиц в БД. Вот и все, что нужно сделать. Далее заходим в чат под любым никнеймом и регистрируемся как администратор с помощью команды /reg [ваш_пароль].

Бета-версия чата доступна для скачивания!

Melnaron — Fri, 16 Jan 2009 19:52:10 +0000

Хочу сообщить всем кто ждет новую версию чата, что бета-версия стала доступна для скачивания. В этой версии доступны все команды которые пока были запланированы для управления чатом “из командной строки”. А теперь перейдем к самому интересному, а именно к скачиванию и установке…

Для начала скачайте архив с чатом. Распакуйте его и залейте содержимое к себе на сервер. Требования к серверу такие: PHP 5.2+ и SQLite 2+. Далее откройте чат в браузере и зайдите под вашим ником (пароль вводить не надо – у вас его еще нет). Если все прошло успешно и вы вошли в чат – используйте команду /reg <ваш пароль> для того, чтобы зарегистрироваться как администратор (имейте ввиду, что первый зарегистрированный в чате пользователь автоматически становится администратором). Теперь вы администратор и вам доступны все команды, которые можно посмотреть используя команду /help.

Для начала я думаю достаточно. Позже я напишу более подробную и развернутую инструкцию, а пока, если возникнут вопросы – задавайте их тут, в комментариях!

Важно! Все для всех замеченных ошибок или неточностей пожалуйста заводите записи в баг-трекере на этой странице.

P.S. Прошу прощения за то, что на сайте какое-то время глючил плагин и выдавал черный экран с крутилкой!

MEL.Chat 2.0 – Бета-тест!

Melnaron — Thu, 18 Sep 2008 15:10:14 +0000

Итак, бета-тест открыт! Проверьте ваши почтовые ящики на наличие приглашения! Прошу всех кто будет тестировать чат оставлять свои отзывы или замечания в комментариях к этому посту!

MEL.Chat 2.0 – Уже совсем скоро!

Melnaron — Tue, 26 Aug 2008 17:23:15 +0000

Приветствую всех кто ждет новую версию MEL.Chat’а! Итак, на данный момент разработка достигла стадии бета-версии, и мне необходима ваша помощь в тестировании чата в “боевых” условиях. Чтобы принять участие в бета-тесте, вам необходимо перейти на страницу регистрации, ссылка на которую приведена ниже, и ввести адрес электронной почты и имя пользователя. Регистрация будет открыта некоторое время, спустя которое будет запущен сам бета-тест. Как только это произойдет – вы получите приглашение со всей необходимой для тестирования информацией.

Регистрация на бета-тест!

Вызов JavaScript-функции по ее названию

Melnaron — Tue, 10 Jun 2008 16:35:53 +0000

Иногда в JavaScript’е бывает необходимо выполнить функцию зная только ее название, и это название содержится в строке, например вот так:

1	var funcName = 'someFunc';

Перед мной стояла такая задача: в AIR-приложении нужно было выполнять функции, названия которых приходят с AJAX-ответом. Sandbox AIR’а в следствии ограничений безопасности не позволяет выполнять функции при помощи eval’а. Так что, ограничения стояли такие: не использовать функции eval() и setTimeout()/setInterval().

Немного по-google-в я нашел множество вопросов о том как это сделать, но к сожалению без ответов. И решение не заставило себя долго ждать. Итак, идея моя была в следующем: все функции, которые предполагается вызывать таким образом, нужно собрать в одном массиве (объекте), и вызывать их обращаясь к ним как к элементам ассоциативного массива. Вот такое решение получилось в итоге:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// собираем нужные функции в массиве
var actions = {

someFunc: function(params) {
...
},

goodFunc: function(params) {
...
}

};

// это название функции допустим переданное в ответе на AJAX-запрос
var funcName = 'someFunc';

// а это параметры функции переданные все в том же ответе
var funcParams = {title: "Test Title", content: "Test Content"}

// вызываем функцию
actions[funcName](funcParams);

Если кто-то ищет решение этой задачи, то надеюсь мой небольшой хинт вам в этом поможет!

MEL.Chat: Немного подробностей о новой версии

Melnaron — Mon, 02 Jun 2008 13:01:06 +0000

Пока новая версия чата постепенно двигается к релизу я хочу опубликовать по поводу нее некоторую информацию. Итак, “вкусности” новой версии:

Технология AJAX+Comet, благодаря которой теперь нету постоянных х-секундных запросов к серверу. С помощью этой связки потребление траффика во время длительного нахождения в чате снижено в 100 раз. А также это дает возможность мгновенно передавать отправленные сообщения в чаты пользователей.
Вход в чат без регистрации. Нужно только ввести свой псевдоним и нажать кнопку.
Улучшенное звуковое сопровождение. При каждом событии, будь то новое сообщение, новый шепот или же ошибка соединения, чат воспроизводит различные хорошо-запоминающиеся звуки.
Возможность зарегистрировать свой псевдоним с помощью команды “/reg пароль”.
Разнообразные команды для управления чатом.
Пользователи разного уровня доступа: от гостя до администратора.
Возможность вставлять в сообщения графические смайлики.
А также многое другое…

Также вы можете посмотреть некоторые скриншоты новой версии чата:

Переезжаю на WordPress…

Melnaron — Wed, 30 Apr 2008 12:31:42 +0000

Зачем изобретать велосипед? Вот и я о том же. Зачем тратить кучу времени, чтобы написать свою CMS, когда итак есть куча отличных движков для сайтов? А это время лучше потратить на что-то более полезное и нужное.

Сейчас я постепенно переношу весь контент (благо его не очень много) на WordPress. К сожалению скорее всего много комментариев будет удалено, а оставшиеся комментарии (самые информативные) я постараюсь перенести.

Хочу также сообщить немного информации по поводу новой версии MEL.Chat’a: Движок чата уже переписан и теперь использует технологию Comet (Long polling) по полной программе. Также я отказался от использования AJAX-библиотеки XAJAX. В связи с этим траффик потребляемый чатом уменьшен в 100 (!) раз. Помимо этого добавлены статусы пользователей, множество команд, разнообразные звуковые эффекты. Немного изменен дизайн чата. Улучшена система входа в чат (не требуется регистрация). Теперь достаточно ввести свой псевдоним и нажать кнопку и вы тут же попадаете в чат. И еще многое другое. Возможно в ближайшее время я выложу бета-версию для тестирования.

MEL.Sound: Обновление 1.2.2

Melnaron — Sat, 23 Feb 2008 10:32:10 +0000

Обновился проект MEL.Sound. Изменения:

jQuery версии 1.2.3 (последняя на данный момент);
Исправлен баг, когда анимация повторялась несколько раз при быстром, многократном включении/отключении звуков;
Картинки для анимации включения/отключения звуков были слиты в одну;
В браузерах Firefox и Opera анимация включения/отключения звуков теперь всегда отображается в середине окна, вне зависимости от скролла;

Скачать новую версию можно со страницы проекта.