Новая классная функция в HTML5 - веб -токеты, которая позволяет нам общаться с сервером без запросов AJAX. Сегодня Bingo позволит каждому запускать WebSocket через сторону сервера среды PHP, создавать клиентов, а также отправлять и получать информацию на стороне сервера через протокол WebSockets.
Что такое веб -тока?
WebSockets - это технология, которая выполняет двунаправленную связь на интерфейсе (TCP) и тип технологии Push. В то же время, веб -тока по -прежнему будут основаны на стандарте W3C.
Что заменит веб -питания? Веб -питания могут заменить длинные опросы (технология PHP Server Push), что является интересной концепцией. Клиент отправляет запрос на сервер. затем отправляет еще один запрос. Это имеет свои преимущества: уменьшить задержку при любом соединении, и не нужно создавать еще одно новое соединение, когда одно соединение уже открыто. Но длительный срок не является причудливой техникой, и все еще возможно, что пауза запроса будет происходить, поэтому потребуется новое соединение.
Некоторые приложения AJAX используют вышеупомянутую технологию, которая часто объясняется низким использованием ресурсов.
Представьте себе, как было бы здорово, если бы сервер запустит и отправит данные клиентам, которые хотели бы получить, не настраивая некоторые порты подключения заранее! Добро пожаловать в мир Push Technology!
Шаг 1: Получите сервер веб -сокетов
Этот урок будет больше сосредоточен на создании клиентов, а не на выполнении сервера.
Я использую XAMPP на основе Windows 7 для реализации работы PHP локально. Phpwebsockets - это сервер PHP WebSocket. (По моему опыту, есть некоторые незначительные проблемы с этой версией. Я внес некоторые изменения в нее и загрузил исходный файл, чтобы поделиться с вами.) Следующие различные версии также могут реализовать WebSocket. Другие версии.
jwebsocket (java)
Веб-сокета-рубий (Ruby)
СОКЦЕЙ IO-NODE (NODE.JS)
Запустить сервер Apache
Шаг 2: Измените URL и порты
Согласно вашей предыдущей установке, измените сервер, приведен пример в setup.class.php:
| публичная функция __construct ($ host = 'localhost', $ port = 8000, $ max = 100) { $ this-> createSocket ($ host, $ port); } |
Просмотрите файл и внесите изменения, если это необходимо.
Шаг 3: Начните создавать клиента
Вот мой файл client.php:
| <! Doctype html> <html> <голова> <Скрипт src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <Title> WebSockets Client </title> </head> <тело> <div id = "warper"> <div id = "контейнер"> <h1> websockets client </h1> <div id = "Chatlog"> </div> <!-#chatlog-> <p id = "Примеры"> Например, попробуйте 'hi', 'name', 'age', 'сегодня' </p> <input id = "text" type = "text" /> <button id = "Deplonect"> Deplonect </button> </div> <!-#container-> </div> </body> </html> |
Мы создали базовый шаблон: контейнер журнала чата, поле ввода ввода и отключенная кнопка.
Шаг 4: Добавьте несколько CSS
Там нет причудливого кода, просто справляйтесь со стилем тега.
тело { |
Шаг 5: WebSocket
События сначала позвольте нам попытаться понять концепцию событий WebSocket:
События WebSocket:
Мы будем использовать три события WebSocket:
OnoPen: Когда интерфейс открыт
OnMessage: Когда получено сообщение
Onclose: Когда интерфейс закрыт
Как мы это достигли?
Сначала создать объект WebSocket
var socket = new WebSocket (& ldquo; ws: // localhost: 8000/socket/server/startdaemon.php & rdquo;);
Затем обнаружите событие следующим образом
| socket.onopen = function () { оповещение («Гребень открыта!»); } |
Сделайте это, когда мы получаем сообщение:
| socket.onmessage = function (msg) { Alert (MSG); } |
Но мы по -прежнему стараемся избегать использования оповещения, и теперь мы можем интегрировать то, что мы узнали на страницу клиента.
Шаг 6: Javascript
Сначала мы помещаем код в функцию Document.Ready of jQuery, а затем нам также необходимо проверить, поддерживает ли браузер пользователя WebSocket. Если это не поддерживается, мы добавим ссылку на страницу браузера Chrome.
| $ (document) .ready (function () { if (! ("websocket" в окне)) { $ (' #Chatlog, вход, кнопка, #Examples'). Fadeout ("Fast"); $ ('<p> О, нет, вам нужен браузер, который поддерживает веб -ток. > '). appendTo ('#intainer '); }еще{ // У пользователя есть веб -питания соединять(); function connect () { // Код функции Connect ниже } }); |
Как видите, если браузер пользователя поддерживает WebSocket, мы выполним функцию Connect (). Вот основная функция, мы начнем создавать открытые, закрытые и получать события.
Мы определим URL на нашем сервере.
| вар сокет; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; |
Вы можете узнать, почему в URL нет HTTP? Ну, да, это URL -адрес websocket, который использует другой протокол.
Давайте продолжим выполнять функцию Connect () ниже. Мы создаем WebSocket и передаем информацию в функцию Message (), и мы объясним это позже. Мы создаем наши функции OnoPen, OnMessage и Onclose. Следует отметить, что мы предоставляем пользователю статус порта, что не требуется, но мы вкладываем его в основном для удобства отладки.
| Соединение = 0 Open = 1 Закрыто = 2 function connect () { пытаться { вар сокет; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; var socket = new Websocket (host); message ('<p class = "event"> Сокет:'+socket.readystate); socket.onopen = function () { message ('<p class = "event"> Сокет:'+socket.readystate+'(open)'); } socket.onmessage = function (msg) { message ('<p class = "message"> получено:'+msg.data); } socket.onclose = function () { Message ('<p class = "event"> Сокет:'+socket.readyState+'(закрыто)'); } } catch (Exception) { Message ('<p> error'+exection); } } |
Функция Message () проста, она заполняет текст, который мы хотим представить пользователю в контейнер для журнала чата. Мы создаем соответствующий класс для тега абзаца (<p>) в функции события сокета, и у нас есть только один тег абзаца в функции сообщения.
| Функциональное сообщение (MSG) { $ ('#Chatlog'). Append (msg+'</p>'); } |
Текущие результаты
Если вы следовали учебному пособию выше шаг за шагом, это здорово, мы создали шаблоны HTML/CSS, создали и установили подключения WebSocket и поддержали прогресс пользователя обновляемыми путем создания соединений.
Шаг 7: Отправить данные
Теперь у нас есть кнопка «Отправить», но нам все еще нужно прослушать пользователь, нажимая на событие клавиатуры и запустить функцию отправки.
| $ ('#text'). keypress (function (event) { if (event.keycode == '13') { отправлять(); } }); |
Вот функция send ():
| функция send () { var text = $ ('#text'). val (); if (text == "") { Message ('<p class = "Warning"> введите сообщение'); возвращаться ; } пытаться { Socket.send (текст); Сообщение ('<p class = "event"> отправлено:'+text) } catch (Exception) { Message ('<p class = "Warning"> Ошибка:' + Exception); } $ ('#text'). val ("" "); } |
Здесь нам нужно:
Socket.send ();
Дополнительный код выполняет следующую работу: определить, ввел ли пользователь ничего, кроме как нажать назад, очистить поле ввода ввода и выполнить функцию Message ().
Шаг 8: Закрыть розетку
Операция для закрытия розетки довольно проста, просто добавьте событие Click в кнопку Densonce для прослушивания.
| $ ('#Densonct'). Click (function () { Socket.Close (); }); |
Завершите код JavaScript
| $ (document) .ready (function () { if (! ("websocket" в окне)) { $ (' #Chatlog, вход, кнопка, #Examples'). Fadeout ("Fast"); $ ('<p> О, нет, вам нужен браузер, который поддерживает веб -ток. > '). appendTo ('#intainer '); }еще{ // У пользователя есть веб -питания соединять(); function connect () { вар сокет; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; пытаться { var socket = new Websocket (host); message ('<p class = "event"> Сокет:'+socket.readystate); socket.onopen = function () { message ('<p class = "event"> Сокет:'+socket.readystate+'(open)'); } socket.onmessage = function (msg) { message ('<p class = "message"> получено:'+msg.data); } socket.onclose = function () { Message ('<p class = "event"> Сокет:'+socket.readyState+'(закрыто)'); } } catch (Exception) { Message ('<p> error'+exection); } функция send () { var text = $ ('#text'). val (); if (text == "") { Message ('<p class = "Warning"> введите сообщение'); возвращаться ; } пытаться { Socket.send (текст); Сообщение ('<p class = "event"> отправлено:'+text) } catch (Exception) { Message ('<p class = "Warning">'); } $ ('#text'). val ("" "); } Функциональное сообщение (MSG) { $ ('#Chatlog'). Append (msg+'</p>'); } $ ('#text'). keypress (function (event) { if (event.keycode == '13') { отправлять(); } }); $ ('#Densonct'). Click (function () { Socket.Close (); }); } // end connect } // end else }); |
Шаг 9: При запуске сервера WebSocket нам нужно ввести некоторые командные строки. Нажмите кнопку «оболочка» на панели управления XAMPP и введите:
| php -q Path to server.php |
Теперь у вас работает сервер WebSocket!
Миссия сделана!
Когда страница будет прочитана, будет предпринята попытка создать соединение WebSocket, а затем пользователь может ввести информацию и получить ее с сервера. Спасибо за терпение в чтении этого урока. Вы можете узнать о последних разработках в HTML5 WebSocket через API WebSocket.