Руководство по базовому использованию HTML5 WebSockets

Автор：Eve Cole Время обновления：2010-10-07 18:43:37

Одной из замечательных новых функций HTML5 являются WebSockets, которые позволяют нам общаться с сервером без запросов AJAX. Сегодня Bin Go позволит вам запускать WebSocket через серверную часть среды Php, создавать клиент и отправлять и получать информацию на стороне сервера через протокол WebSockets.

Что такое вебсокеты?

WebSockets — это технология двусторонней связи по интерфейсу (TCP) типа технологии PUSH. При этом WebSockets по-прежнему будет основываться на стандарте W3C. На данный момент последние версии браузеров Chrome и Safari уже поддерживают WebSockets.

Что заменят WebSockets? WebSockets могут заменить Long Polling (технологию push-уведомлений PHP-сервера), что является интересной концепцией. Клиент отправляет запрос на сервер. Теперь сервер не будет отвечать на данные, которые не готовы. Он будет поддерживать соединение до тех пор, пока последние данные не будут готовы к отправке. После этого клиент получает данные и отправляет другие. запрос. . Это имеет свои преимущества: сокращает задержку в любом соединении и устраняет необходимость создавать новое соединение, когда оно уже открыто. Но Long-Polling не является необычной технологией. Все еще возможно, что произойдет приостановка запроса, поэтому потребуется установить новое соединение.

Некоторые приложения AJAX используют описанные выше методы — часто это объясняется низким использованием ресурсов.

Только представьте, как было бы здорово, если бы сервер запускался утром и отправлял данные клиентам, которые хотят их получить, без необходимости заранее настраивать порты подключения! Добро пожаловать в мир технологий PUSH!

Шаг 1. Получите сервер WebSocket.

В этом руководстве больше внимания будет уделено созданию клиента, а не выполнению на стороне сервера и другим операциям.

Я использую XAMPP в Windows 7 для локального запуска PHP. phpwebsockets — это сервер PHP WebSocket. (По моему опыту, в этой версии есть некоторые незначительные проблемы. Я внес в нее некоторые изменения и загрузил исходные файлы, чтобы поделиться ими со всеми). Различные версии, представленные ниже, также могут реализовывать WebSocket. Если одна из них не работает, вы можете попробовать другие версии. Или продолжите обучение ниже.

jWebSocket (Java)

веб-сокет-рубин (рубин)

Сокет IO-узел (node.js)

Запустите сервер Apache

Шаг 2. Измените URL-адреса и порты

Измените сервер на основе вашей предыдущей установки. Вот пример из setup.class.php:

публичная функция __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($host,$port);
}

Просмотрите файл и при необходимости внесите изменения.

Шаг 3. Начните создавать клиента

Давайте создадим базовый шаблон. Это мой файл client.php:

<голова>
<источник сценария=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Клиент WebSockets

<тело>

Клиент WebSockets

например, попробуйте "привет", "имя", "возраст", "сегодня"

Мы создали базовый шаблон: контейнер журнала чата, поле ввода и кнопку отключения.

Шаг 4. Добавьте немного CSS

Никакого сложного кода, просто обработайте стиль метки.

тело {
семейство шрифтов: Arial, Helvetica, без засечек;
}
#контейнер{
граница: 5 пикселей сплошного серого цвета;
ширина: 800 пикселей;
маржа: 0 авто;
отступ: 10 пикселей;
}
#chatLog{
отступ: 5 пикселей;
граница: 1 пиксель, сплошной черный;
}
#chatLog п {
маржа: 0;
}
.событие{
цвет: #999;
}
.предупреждение{
шрифт-вес: жирный;
цвет:#CCC;
}

Шаг 5: Вебсокет

События Сначала давайте попробуем понять концепцию событий WebSocket:

События WebSocket:

Мы будем использовать три события WebSocket:

onopen: Когда интерфейс открыт

onmessage: Когда получено сообщение

onclose: Когда интерфейс закрыт

Как нам этого добиться?

Сначала создайте объект WebSocket.

var сокет = новый WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Затем обнаружите событие следующим образом

сокет.onopen = функция(){
alert("Сокет открыт!");
}

Сделайте это, когда мы получим информацию:

сокет.onmessage = функция (сообщение) {
оповещение(сообщение); //Отлично!
}

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

Шаг 6: JavaScript

Сначала мы помещаем код в функцию document.ready jQuery , а затем также проверяем, поддерживает ли браузер пользователя WebSocket. Если он не поддерживается, мы добавим ссылку на страницу Chrome.

$(документ).ready(функция() {
if(!("WebSocket" в окне)){
$('#chatLog, input, button, #examples').fadeOut("быстро");
$('

О нет, вам нужен браузер, поддерживающий WebSockets. Как насчет Google Chrome?

').appendTo('#container');
}еще{
//У пользователя есть WebSockets
соединять();
функция подключения () {
//код функции подключения приведен ниже
}
});

Как видите, если браузер пользователя поддерживает WebSocket, мы выполним функцию Connect(). Вот основная функциональность: мы начнем создавать события открытия, закрытия и получения.

Мы определим URL-адрес на нашем сервере.

сокет вар;
var хост = "ws://localhost:8000/socket/server/startDaemon.php";

Вы можете обнаружить, что в URL-адресе нет http? Ну да, это URL-адрес WebSocket, использующий другой протокол.

Давайте продолжим работу с функцией Connect(). Мы поместили код в блок try/catch, чтобы в случае возникновения проблемы с кодом мы могли сообщить об этом пользователю. Мы создаем WebSocket и передаем информацию в функцию message(), которая будет объяснена позже. Мы создаем функции onopen, onmessage и onclose. Следует отметить, что мы предоставляем пользователю статус порта. Это не обязательно, но мы указываем его в основном для облегчения отладки.

ПОДКЛЮЧЕНИЕ = 0
ОТКРЫТЬ = 1
ЗАКРЫТО = 2
функция подключения () {
пытаться{
сокет вар;
var хост = "ws://localhost:8000/socket/server/startDaemon.php";
вар сокет = новый WebSocket (хост);
message('

Состояние сокета: '+socket.readyState);
сокет.onopen = функция(){
message('

Состояние сокета: '+socket.readyState+' (открыто)');
}
сокет.onmessage = функция (сообщение) {
message('

Получено: '+msg.data);
}
сокет.onclose = функция(){
message('

Состояние сокета: '+socket.readyState+' (Закрыто)');
}
} поймать (исключение) {
сообщение('

Ошибка'+исключение);
}
}

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

) в функции события сокета, а в функции сообщения у нас есть только закрывающий тег абзаца.

функциональное сообщение (сообщение) {
$('#chatLog').append(msg+'

');
}

Текущие результаты

Если вы шаг за шагом следовали приведенному выше руководству, отлично, мы создали шаблон HTML/CSS , создали и установили соединение Websocket и обновляли прогресс пользователя, создавая соединение.

Шаг 7: Отправьте данные

Теперь у нас есть кнопка отправки, но нам также необходимо отслеживать событие, когда пользователь нажимает клавиатуру и запускает функцию отправки. Число «13» ниже — это код ASCII, соответствующий клавише Enter.

$('#text').keypress(function(event) {
если (event.keyCode == '13') {
отправлять();
}
});

Вот функция send():

функция отправить(){
var text = $('#text').val();
если(текст==""){
message('

Пожалуйста, введите сообщение');
возвращаться ;
}
пытаться{
сокет.отправить(текст);
message('

Отправлено: '+текст)
} поймать (исключение) {
message('

Ошибка:' + исключение);
}
$('#text').val("");
}

Ниже нам понадобится:

сокет.отправить();

Дополнительный код делает следующее: определяет, нажимает ли пользователь кнопку возврата после того, как ничего не вводит, очищает поле ввода и выполняет функцию message().

Шаг 8: Закройте сокет

Закрыть сокет довольно просто: просто добавьте прослушиватель событий щелчка для кнопки отключения.

$('#disconnect').click(function(){
сокет.закрыть();
});

Полный код JavaScript

$(документ).ready(функция() {
if(!("WebSocket" в окне)){
$('#chatLog, input, button, #examples').fadeOut("быстро");
$('

О нет, вам нужен браузер, поддерживающий WebSockets. Как насчет Google Chrome?

').appendTo('#container');
}еще{
//У пользователя есть WebSockets
соединять();
функция подключения () {
сокет вар;
var хост = "ws://localhost:8000/socket/server/startDaemon.php";
пытаться{
вар сокет = новый WebSocket (хост);
message('

Состояние сокета: '+socket.readyState);
сокет.onopen = функция(){
message('

Состояние сокета: '+socket.readyState+' (открыто)');
}
сокет.onmessage = функция (сообщение) {
message('

Получено: '+msg.data);
}
сокет.onclose = функция(){
message('

Состояние сокета: '+socket.readyState+' (Закрыто)');
}
} поймать (исключение) {
сообщение('

Ошибка'+исключение);
}
функция отправить(){
var text = $('#text').val();

если(текст==""){
message('

Пожалуйста, введите сообщение');
возвращаться ;
}
пытаться{
сокет.отправить(текст);
message('

Отправлено: '+текст)
} поймать (исключение) {
message('

');
}
$('#text').val("");
}
функциональное сообщение (сообщение) {
$('#chatLog').append(msg+'

');
}
$('#text').keypress(function(event) {
если (event.keyCode == '13') {
отправлять();
}
});
$('#disconnect').click(function(){
сокет.закрыть();
});
}//Завершить соединение
}//Конец еще
});

Шаг 9: Нам нужно ввести несколько командных строк, чтобы запустить сервер WebSocket. XAMPP предоставляет более удобные параметры оболочки. Нажмите кнопку «оболочка» на панели управления XAMPP и введите:

php -q путькserver.php

Теперь у вас есть работающий сервер WebSocket!

Все готово!

При чтении страницы предпринимается попытка создать соединение WebSocket, после чего пользователь может ввести информацию и получить информацию с сервера. Благодарим вас за терпение при чтении этого руководства. Надеюсь, вы почерпнули из него полезные знания. HTML5 WebSocket действительно интересен! Вы можете узнать о последних разработках HTML5 WebSocket через WebSocket API .