Кэширование и обновление (JavaScript)

Готовые уроки IFrame + ВКонтакте API
Ответить
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Кэширование и обновление (JavaScript)

Сообщение alexei »

Поскольку у меня это спрашивали очень часто в аське, я решил сделать свой 1-й урок. Надеюсь, кому-то это будет нужно.

Описание приложения:
Приложение выводит список друзей пользователя. В оффлайне — красные, в онлайне — зеленые.
Каждые 10 секунд обновляются статусы друзей. Приложение минимизировано. Только все что нужно.

Цель урока: Научиться работать с кэшированием в JS.

Где можно использовать: В выборе противника в онлайн игре, в ленте друзей приложения.

1. Создаем приложение и разрешаем доступ к друзьям.
2. Создаем index.html с кодом:

Код: Выделить всё

<!DOCTYPE html><html><head>    <title>Cache and Update</title>    <script type="text/javascript" src="http://vk.com/js/api/xd_connection.js"></script>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    <script type="text/javascript">        $(function () {            FriendsList();            setInterval("UpdateFriendList()", 10000); //обновляем раз в 10 секунд        });        var cache = []; //Кеш        function FriendsList() {            VK.api("friends.get", { fields: "online, photo" }, function (data) {                var tmp = '<table><tr>';                for (var i = 0; i < data.response.length; i++) {                    var color = 'style="color:#A00"'; //оффлайн выделяем красным                    if (data.response[i].online == 1) {                        cache.push(data.response[i].uid); // добавляем ид пользователя, который в онлайне                        color = 'style="color:#0A0"'; //онлайн выделяем зеленым                    }                    //Добавляем в переменную для последующего вывода (что-то вроде примитивной таблички)                    if (i % 3 == 0 && i > 0) {                        tmp += '</tr><tr>'                    }                    tmp += '<td><span ' + color + 'id="fr_' + data.response[i].uid + '"><img src="' + data.response[i].photo + '">' + data.response[i].first_name + data.response[i].last_name + '</span></td>';                }                tmp += '</tr><table>'                $("body").html(tmp); //Вывод            });        }        function UpdateFriendList() {            VK.api("friends.getOnline", function (data) {                var tmp_array = [];                for (var i = 0; i < data.response.length; i++) {                    var key = $.inArray(data.response[i], cache) //был ли раньше в онлайне?                    if (key == -1) { //не был в онлайне (изменение)                                                $("#fr_" + data.response[i]).css("color", "#0A0"); //Выделяем зеленым                        //   console.log("Пришел:" + data.response[i]); //для FireBug                    }                    else {                        cache.splice(key, 1); //удаляем из старого массива ид (key индекс в cache)                    }                    tmp_array.push(data.response[i]); //Добавляем в новый массив ид                }                //В cache остались пользователи, которые ушли в оффлайн                for (var i = 0; i < cache.length; i++) {                    $("#fr_" + cache[i]).css("color", "#A00"); //делаем красными тех, кто ушел в оффлайн                    //   console.log("Ушел:" + cache[i]); //для FireBug                }                cache = tmp_array; //обновляем кеш            });        }    </script></head><body style="background: #FFF"></body></html>
3. Загружаем на сервер. Указываем ссылку на index.html и включаем приложение.
4. Должно получиться следующее:
Изображение
5. Можно теперь попробовать добавить скроллинг, протестировать на большем количестве друзей. Заменить setInterval("UpdateFriendList()", 10000); на setInterval("FriendsList();", 10000); Сравнить трафик и нагрузку.
 Что делать если не получается:
Глянуть сюда: http://vk.com/app2856926 . Поиграться и попробовать снова.
apiboss
Сообщения: 25
Зарегистрирован: 03 май 2011, 17:15

Re: Кэширование и обновление (JavaScript)

Сообщение apiboss »

Только список нужно поделить на online и offline и засунуть в горизонтальный скролинг ...
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: Кэширование и обновление (JavaScript)

Сообщение alexei »

apiboss писал(а):Только список нужно поделить на online и offline и засунуть в горизонтальный скролинг ...
Можно без проблем, но я минимизировал все. Что бы не отвлекаться.
apiboss
Сообщения: 25
Зарегистрирован: 03 май 2011, 17:15

Re: Кэширование и обновление (JavaScript)

Сообщение apiboss »

Ах да цель ведь закэшировать ) не так понял сначало ...
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: Кэширование и обновление (JavaScript)

Сообщение alexei »

apiboss писал(а):Ах да цель ведь закэшировать ) не так понял сначало ...
Я даже вывод не старался красивым сделать.
Ответить