Как всегда, за поддержку всего процесса отвечает JavaScript-код. Давайте создадим наше первое коммуникационное приложение и проверим, как работает этот API (листинг 13.22).
Листинг 13.22. Отправка сообщений на сервер
Function initiate(){
Databox=document. getElementById(‘databox’); var button=document. getElementById(‘button’);
Socket=new WebSocket("ws://localhost:12345/server. php"); socket. addEventListener(‘message’, received, false);
}
Function received(e){
Var list=databox. innerHTML;
Databox. innerHTML=’Получено: ‘+e. data+'<br>’+list;
}
Function send(){
Var command=document. getElementById(‘command’).value; socket. send(command);
}
Window. addEventListener(‘load’, initiate, false);
В функции initiate() мы создаем объект WebSocket и сохраняем его в переменной socket. Атрибут url указывает местоположение файла server. php на нашем компьютере (localhost) и содержит номер порта для создаваемого соединения. Чаще всего мы указываем хост по IP-адресу сервера, добавляя номер порта 8000 или 8080, однако это зависит от требований конкретного приложения, конфигурации сервера, доступных портов, местоположения файла на сервере и т. д. Использование IP-адреса вместо доменного имени позволяет избежать этапа DNS-трансляции (всегда прибегайте к этой технике доступа к приложению, для того чтобы не тратить время на трансляцию имени домена в соответствующий IP-адрес.).
Файл server. php включает в себя функцию process(), назначение которой — обрабатывать все вызовы и отправлять обратно ответ. Вы можете отредактировать эту функцию с учетом требований вашего приложения, но в наших примерах мы используем ее в том виде, в котором она предлагается в библиотеке Google Codes. Эта функция проверяет полученное сообщение и сравнивает его значение с предустановленным списком команд. В той версии, с помощью которой мы тестировали наши примеры, доступны следующие команды: hello, hi, name, age, date, time, thanks и bye. Например, если вы отправите команду hello, то сервер вернет сообщение «hello human».
Получив объект WebSocket, мы добавляем к нему прослушиватель события message. Событие message срабатывает каждый раз, когда WS-сервер отправляет браузеру сообщение, и в этом случае в нашем приложении происходит вызов функции received(). Как и в других коммуникационных API, у этого события есть свойство data, внутри которого находится содержимое сообщения. Мы используем его в функции received() для вывода сообщения на экран.
Для отправки сообщений на сервер мы добавили функцию send(). Она принимает значение элемента <input> с именем command и отправляет его WS-серверу в методе send().
Добавить комментарий