Описание приложения:
Приложение выводит список друзей пользователя. В оффлайне — красные, в онлайне — зеленые.
Каждые 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>
4. Должно получиться следующее:
5. Можно теперь попробовать добавить скроллинг, протестировать на большем количестве друзей. Заменить setInterval("UpdateFriendList()", 10000); на setInterval("FriendsList();", 10000); Сравнить трафик и нагрузку.