В начале последнего поста который я побликую в 2011 году хочу поздравить всех с наступающим Новым годом! Пожелать успехов и исполнения планов по всем вашим проектам. И обязательно сделайте в новом году что-то потрясающее, исполните хотя бы парочку заветных желаний!

Ну а теперь подведем итог серии постов посвященных протоколу HTML5 WebSocket

Как было показано в моих последних постах, протокол HTML5 WebSocket реализует простой, но вместе с тем мощный механизм создания впечатляющих приложений, работающих в реальном времени.

Сначала мы рассмотрели природу самого протокола и его взаимодействие с существующим HTTP-трафиком. Были сопоставлены требования к служебному сетевому трафику текущих коммуникационных приложений и протокола WebSocket.

Чтобы проиллюстрировать работу веб-сокетов, мы исследовали простую реализацию сервера WebSocket, с помощью которой показали, насколько просто этот протокол реализуется на практике. Аналогичным образом, мы исследовали клиентские функции WebSocket API, обращая ваше внимание на обеспечиваемую ими легкость интеграции с существующими методами программирования на JavaScript.

Если вы собираетесь использовать технологию webSocket прит разработке своих сайтов, то я настоятельно рекомендую скачать Опера бесплатно и тестировать в ней свои приложения, так как этот браузер в полном объеме поддерживает все преимущества данной технологии.

Приведенный ниже код должен быть вам знаком из этих постов. Здесь осуществляется проверка поддержки службы Geolocation и соответствующим образом изменяется сообщение о состоянии приложения.

var geolocation; 
if(navigator.geolocation) 
{
	geolocation = navigator.geolocation;
	updateGeolocationStatus("HTML5 Geolocation is supported in your browser.");
}
// Зарегистрировать обработчик для обновления позиции // с помощью Geolocation API geolocation.watchPosition(updateLocation,
handleLocat ionError, {maximumAge:2 0 0 0 0});
}

Как и до этого, мы отслеживаем изменения текущего местоположения и регистрируем функцию updateLocation, которая будет вызываться всякий раз, когда происходят такие изменения. Ошибки обрабатываются функцией handleLocationError, а данные о местоположении считаются устаревшими по прошествии двадцати секунд.

Следующий раздел кода представляет собой обработчик, который вызывается браузером всякий раз, когда становятся доступными данные о новом местоположении.

function updateLocation(position)
{
	var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    var timestamp = position.timestamp;
    updateGeolocationStatus("Location updated at " + timestamp); 
    // Отправить данные о местоположении через WebSocket 
    var toSend = JSON.stringify([myld, latitude, longitude]); 
    sendMyLocation(toSend);
}

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

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

function loadDemo() {
        // test to make sure that Web Sockets are supported
        if (window.WebSocket) {

            // the location of our broadcast WebSocket server
            url = "ws://localhost:8080";
            socket = new WebSocket(url);
            socket.onopen = function() {
                updateSocketStatus("Connected to WebSocket tracker server");
            }
            socket.onmessage = function(e) {
                updateSocketStatus("Updated location from " + dataReturned(e.data));
            }
        }

        var geolocation;
        if(navigator.geolocation) {
            geolocation = navigator.geolocation;
            updateGeolocationStatus("HTML5 Geolocation is supported in your browser.");
        }

        // register for position updates using the Geolocation API
        geolocation.watchPosition(updateLocation,
                                  handleLocationError,
                                  {maximumAge:20000});
    }

Первое, что мы здесь делаем, — это устанавливаем WebSocket-соединение. Как и во всем, что касается использования технологии HTML5, прежде чем что-либо предпринимать, целесообразно сначала убедиться в наличии необходимой поддержки, в связи с чем мы проверяем, поддерживается ли объект window. WebSocket данным браузером.

HTML-разметка для нашего приложения намеренно выбрана простой, чтобы можно было сфокусироваться на обработке данных. Насколько она проста, судите сами.

<body onload="loadDemo()">
<h1>HTML5 WebSocket / Geolocation Tracker</h1>
<div><strong>Geolocation</strong>: <p id="geoStatus">HTML5 Geolocation is <strong>not</strong> supported in your browser.</p></div>
<div><strong>WebSocket</strong>: <p id="socketStatus">HTML5 Web Sockets are <strong>not</strong> supported in your browser.</p></div>
</body

Мы включили в разметку только заголовок приложения и две строки состояния: одна из них информирует пользователя об обновлении геолокационных данных, а вторая — об активности веб-сокета. Фактические данные о местоположении будут помещаться на страницу в виде сообщений, получаемых в режиме реального времени.

Теперь, когда вы уже ознакомились с основами функционирования веб-сокетов, настало время создать нечто более существенное. Ранее мы использовали программный интерфейс HTML5 Geolocation для создания приложения, которое позволяло вычислять пройденное расстояние непосредственно с помощью вебстраницы. Мы можем обратиться к предыдущему опыту создания геолокационного приложения, объединив его с новой поддержкой веб-сокетов для создания простого приложения, к которому могут подключаться несколько участников: определителя местоположения.

Приложение, которое мы собираемся создать, объединит в себе поддержку спецификаций WebSocket и Geolocation для определения местоположения пользователя и рассылки полученных данных всем подключившимся абонентам. Компьютеры всех пользователей, которые загрузят это приложение и подключатся к одному и тому же широковещательному серверу, будут регулярно отправлять ему данные о своем географическом местоположении, используя веб-сокеты. В то же время приложение будет перехватывать любые сообщения, поступающие от сервера, и обновлять в режиме реального времени отображаемые данные для всех подключенных абонентов. В сценарии с марафоном такое приложение может информировать участников забега о местоположении их соперников, позволяя им решать, бежать им быстрее или медленнее. Это небольшое приложение не включает никакой иной персональной информации, кроме географической широты и долготы точки, в которой находится участник соревнований. Его имя, дата рождения и название любимого мороженого остаются в строгом секрете. Вас предупредили!