Наш первый пример хорошо иллюстрирует работу коммуникационного процесса в рассматриваемом API. Конструктор WebSocket открывает соединение, метод send() отправляет сообщения, которые должны обрабатываться на сервере, а событие message информирует приложение о прибытии новых сообщений с сервера. Однако мы в этом примере не закрывали соединение, не проверяли ошибки и даже не удостоверились, что соединение готово к работе. Давайте рассмотрим пример, включающий в себя все предоставляемые API-интерфейсом события. Код из этого примера информирует пользователя о статусе подключения на каждом шаге процесса.
Листинг 13.23. Информирование о состоянии подключения
Function initiate(){
Databox=document. getElementById(‘databox’); var button=document. getElementById(‘button’); button. addEventListener(‘click’, send, false);
Socket=new WebSocket("ws://localhost:12345/server. php"); socket. addEventListener(‘open’, opened, false); socket. addEventListener(‘message’, received, false); socket. addEventListener(‘close’, closed, false); socket. addEventListener(‘error’, error, false);
}
Function opened(){
Databox. innerHTML=’СОЕДИНЕНИЕ ОТКРЫТО<Ьг>’; databox. innerHTML+^Статус: ‘+socket. readyState;
Function received(e){
Var list=databox. innerHTML;
Databox. innerHTML=’Получено: ‘+e. data+'<br>’+list;
}
Function closed(){
Var list=databox. innerHTML;
Databox. innerHTML=’СОЕДИНЕНИЕ 3AKPblTO<br>’+list;
Var button=document. getElementById(‘button’); button. disabled=true;
}
Function error(){
Var list=databox. innerHTML; databox. innerHTML=’ОШИБКА<br>’+list;
}
Function send(){
Var command=document. getElementById(‘command’).value; if(command==’close’){ socket. close();
}else{
Socket. send(command);
}
}
Window. addEventListener(‘load’, initiate, false);
Для тестирования последнего примера требуются HTML-документ и CSS-стили из листингов 13.20 и 13.21 соответственно. Скопируйте эти файлы в каталог htdocs, созданный приложением XAMPP, и откройте консоль Shell, щелкнув на кнопке Shell на панели управления XAMPP В открывшейся консоли вам нужно будет перейти к каталогу htdocs и запустить PHP-сервер командой php — q server. php. Откройте браузер и перейдите на страницу http://localhost/client.html (где client. html — это имя вашего HTML-файла с документом из листинга 13.20). Вводите команды в поле формы и нажимайте кнопку Отправить. В зависимости от того, какая команда отправлена (hello, hi, name, age, date, time, thanks или bye), вы будете получать от сервера разные ответы. Для того чтобы закрыть соединение, отправьте команду close.
По сравнению с предыдущим примером в код из листинга 13.23 мы добавили несколько усовершенствований. Создали прослушиватели всех событий, предлагаемых объектом WebSocket, и соответствующие функции для обработки каждого события. Помимо этого, когда подключение создается, мы, используя значение свойства readyState, выводим на экран информацию о его статусе. Закрываем соединение методом close(), когда с формы передается команда close, и деактивируем кнопку Отправить после закрытия соединения (button. disabled=true).
Сейчас файл server. php из библиотеки Google Codes работает не совсем правильно. В нем не реализованы новые меры безопасности, и, скорее всего, вам понадобится несколько раз обновить HTML-страницу, чтобы увидеть сообщение «Соединение открыто». Только после этого можно будет приступать к отправке сообщений. Чтобы проверить, какие новые WS-серверы появились, перейдите на наш веб-сайт и изучите ссылки для этой главы или же просто выполните поиск в Сети.
Добавить комментарий