Веб чаты для сайтов

RSS, Twitter, Vkontakte, Facebook

Веб чаты и видеочаты для сайтов

Веб чаты для сайтов

Автор: Vladimir Tkachenko

Источник: http://www.lessons-tva.info/

Веб чаты, голосовые и видео веб чаты – это веб-коммуникации для сайтов. Веб-коммуникации обеспечивают общение пользователей через Интернет с использованием веб-браузера. В основном веб-коммуникации реализованы на сетевой архитектуре клиент-сервер. Клиент - это прикладная программа, которая посылает запросы серверу и получает от сервера требуемую информацию. Сервер - это программа, работающая на отдельном компьютере (хосте), которая предназначена для хранения, обработки и выдачи клиентам информации по запросам. Клиент взаимодействует с сервером, используя определённый протокол.

Для общения в чате можно использовать как клиенты, устанавливаемые на ПК пользователя, так и веб чаты (онлайн чаты на сайтах) или чаты в веб интерфейсе. Веб чат — это система диалогового текстового общения в реальном времени, построенная на базе Web-сервера. В веб чатах роль клиентской части веб-приложений выполняет браузер. Это объясняется тем, что в браузеры встроен язык программирования JavaScript, на базе которого создаются клиентские приложения на Ajax. Серверная часть веб чата размещается на Web-сервере. На практике применяются веб чаты двух типов: для персонального общения (консультаций) и группового общения (обсуждения какой-либо темы).

Веб чат для персонального общения, установленный на Web-узле, позволяет администрации сайта общаться с клиентами (пользователями сайта) без каких-либо установленных у клиентов дополнительных программ. Для обмена сообщениями между клиентом и сервером используются различные технологии. Как правило, программа клиентской части текстового веб чата основана на Ajax (эджэкс), т.е. клиентская часть веб чата пишется на языке JavaScript. Серверное приложение веб чата создают на одном из серверных языков программирования: Cold Fusion, JSP, Python, Ruby, PHP, серверной технологии ASP и так далее.

Взаимодействие веб-браузера с веб-сервером осуществляется по прикладному протоколу - HTTP. Протокол HTTP – это сеансовый протокол, работающий по принципу "запрос-ответ". Обычное клиентское Web-приложение, используя протокол версии HTTP 1.1, на запрос получает от сервера обновленную веб-страницу полностью. Чтобы получить от сервера всю веб-страницу целиком веб-браузер (даже работающий в режиме Keep-Alive) формирует серию запросов к веб-серверу: к DNS-серверу для преобразования символьного имени хоста в IP-адрес, для закачки HTML структуры страницы, CSS, JS, изображений и других объектов.

В синхронном режиме клиентское приложение, направив HTTP-запрос, прекращает работу (блокирует работу браузера) пока на этот запрос не получит ответ от сервера. Такой вид коммуникации приводит к замедленной работе и не может быть применен для организации веб чата. Ajax делает возможным передачу и прием данных в асинхронном режиме с помощью JavaScript, обеспечивая частичное обновление веб-страницы в браузере, вместо ее полной перезагрузки.

В асинхронном режиме приложение, отправив запрос серверу, не блокирует работу, и до получения ответа продолжает выполнять другую работу, связанную с процессом коммуникации клиент-сервер. В этом случае достигается существенное ускорение обмена сообщениями клиент-сервер. Ajax - это Asynchronous Javascript And XML. Ajax обеспечивает асинхронное соединение клиента с сервером и с помощью JavaScript осуществляет частичное обновление данных в формате XML, JSON или HTML без перезагрузки веб-страницы в браузере.

Ajax - это объединение известных веб-технологий: HTML, XHTML и CSS; DOM (Document Object Model); XML; JavaScript и базового объекта XMLHttpRequest. Базовый объект XMLHttpRequest предоставляет клиентскому приложению возможность посылать асинхронные запросы и получать ответы с Web-сервера в формате XML, JSON или HTML по протоколу HTTP. Для Ajax требуется, чтобы браузер поддерживал работу сценариев на JavaScript.

Необходимо отметить, что в настоящее время наиболее распространенными являются Ajax веб чаты с использованием PHP, MySQL и jQuery. Для создания клиентской части веб чата применяются средства jQuery (jQuery генерирует jQuery.ajax запросы) и CSS, а серверная часть веб чата проектируется на серверном языке программирования PHP и СУБД MySQL для хранения сообщений.

В ASP.Net веб чатах для общения клиента и сервера в реальном времени также может применяться Ajax. В этом случае серверное приложение веб чата пишется, например, на языке C# платформы .Net. Эффективным средством онлайн коммуникаций для платформы .Net является Ajax Chat Control (JaxterChat). JaxterChat выполнен в виде визуального контрола. Веб чат можно создать и на языке C# платформы .Net на базе сокетов, которые используются для обеспечения сетевых коммуникаций. ASP.Net веб чаты могут работать только на Windows - хостингах (ASP хостингах) и IIS веб-серверах.

Для организации веб чата применяются и другие технологии, например COMET и IFrame. Модель COMET - это такая модель работы веб-приложения, которая позволяет серверу при постоянном HTTP-соединение с сервером направлять новые данные браузеру (server push) без дополнительного запроса с его стороны. В этом случае клиент открывает всего одно потоковое соединение к серверу, через которое получает новые данные (события) от сервера по мере их появлении на сервере без перезагрузки всей веб-страницы в браузере и без участия пользователя.

Если в Ajax передача данных серверу инициируется клиентом, то в COMET передача данных (новых событий) браузеру инициируется веб-сервером без перезагрузки всей веб-страницы в браузере. Таким образом, Ajax и Comet позволяют создавать асинхронные Web-приложения. Для ее реализации используются технологии: Long-polling - длинный опросы и polling - частый опрос. Существует множество способов реализации COMET. Невидимый IFRAME — один из способов организации COMET.

В настоящее время для голосового и видео общения пользователей и консультантов сайтов используются веб чаты или видеочаты с поддержкой голосового и видео общения. В этом случае для голосовых и видео коммуникаций клиента и сервера используется сокетное соединение. Сокет (углубление, гнездо, разъём) - название программного интерфейса API для обеспечения обмена данными между процессами. В пределах Internet-домена или в пределах составной сети прикладной процесс однозначно определяется парой (IP-адресом и номером порта, например http://194.0.200.12:80), называемой сокетом (socket).

В процессе обмена, как правило, используются два сокета - клиентский сокет и серверный сокет. Клиент (веб-браузер) взаимодействует с сервером по прикладному протоколу HTTP и устанавливает TCP-соединение с сервером. Сокет определяемый IP-адресом и номером TCP-порта называется TCP-сокетом. Протокол TCP предназначен для надежной передачи данных между приложениями. TCP - это потоковый протокол, требующий создания логических соединений.

Многие языки, например Java, и языки ActionScript или C# (платформ Flash и Silverlight) имеют средства для работы с сокетами. Сокеты реализуются библиотекой API. В процессе создания чата необходимо написать программный код для клиентского сокета на языке разработки клиентского приложения (Java, ActionScript или C#) и серверного сокета на одном из языков серверного приложения.

Для создания сокета используется функция socket, аргументами которой являются: домен, тип и протокол. Для голосового видеочата используется Internet-домен, тип сокета "SocketType.Stream" и протоколом TCP, которым реализуется сокет. На сервере создается сокет для входящего запроса, а на клиенте - сокет для инициирования TCP-соединения с сервером.

Например, создание нового клиентского сокета в Silverlight выглядит так: client_socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp)

Основные этапы сетевого взаимодействия клиент-сервер: создание сокета, установление связи, передача данных, закрытие сокета.

Между сокетами устанавливается дуплексный канал связи, и он постоянно удерживается открытым в процессе сетевого взаимодействия между клиентом и сервером. При традиционном способе коммуникаций по протоколу HTTP клиент инициирует каждый сеанс взаимодействия, т.е. каждый раз инициирует новый запрос к серверу, тратя время на установление соединения.

Клиентские приложения для голосового и видео веб чата создаются на основе Java (Java applets), Flash или Silverlight. В Java, Flash и Silverlight имеются средства захвата микрофона и видеокамеры пользователя и управления сетевыми медиа-потоками. В этом случае для веб-коммуникаций необходим только любой современный браузер с одним из плагинов (Java, Flash или Silverlight). Тип плагина зависит от технологии создания клиентского приложения видеочата. Клиентские приложения работают в браузере за счет соответствующего плагина.

Одним из современных решений в сфере веб-приложений является технология ASP.Net + Silverlight, с помощью которой решаются проблемы создания  голосового и видео веб чата. В разработке видео веб чата с поддержкой голоса может быть применена технология программирования на языке C# платформы .Net и платформы Silverlight.

При этом используется среда разработки Visual Studio 2010 с модулем Silverlight 4. Visual Studio 2010 поддерживает взаимодействие с технологией Silverlight, которая необходима для обеспечения передачи голоса и видео. Программный продукт клиентской части голосового и видео веб чата можно создать в среде разработки Silverlight. Платформа Silverlight используется для создания программного модуля клиентского сокета, а платформа .Net - для создания модуля серверного сокета.

Созданный модуль клиентского сокета осуществляет захват голоса из микрофона и видео из Web-камеры, обрабатывает его средствами Silverlight, потом кодирует (сжимает) в формат, который является наиболее оптимальным для  системы связи, и транслирует его с помощью сокетного соединения по протоколу TCP на серверную часть. Серверная часть голосового видеочата организует сокет сервера, который используется для связи с клиентской частью.

После этого устанавливается виртуальное коммуникационное соединение, которое транслирует голос и видео пакеты по назначению, обеспечивает мультимедийное общение в режиме реального времени. В качестве платформы хостинга (операционной системы и Web-сервера) для размещения видеочата, созданного на основе технологии программирования на языке C# платформы .Net и Silverlight, используется Windows - хостинг (ASP хостинг) и IIS веб-сервер.

Наиболее перспективным средством создания веб чатов, голосовых и видеочатов для сайтов является технология HTML5 с JavaScript и CSS3. Современным средством коммуникаций (без использования внешних дополнений и плагинов в браузере) клиент-серверных приложений является протокол WebSocket, который предусмотрен в спецификации HTML5. Спецификация WebSocket представляет интерфейс WebSocket JavaScript, который определяет полнодуплексное сокетное соединение (коммуникация в обоих направлениях одновременно), по которому сообщения могут быть отправлены между клиентом и сервером.

В спецификации HTML5, предусмотрены такие новые элементы (теги) как canvas, video, audio, которые управляются JavaScript и предназначены для вывода голоса и видео потока с микрофона и видеокамеры пользователя. Для вывода видео можно использовать как тег canvas, так и тег video. Canvas (элемент "холст") - это новый элемент, который предоставляет эффективный способ вывода графики и рисования с использованием JavaScript. Кроме того, в спецификации HTML5 предусмотрен специальный элемент event-source для получения событий с сервера. Элемент event-source обеспечивает передачу данных сервером браузеру без дополнительного запроса клиента.

Клиентская часть веб чатов, видеочатов с поддержкой голоса и видео создается на языке JavaScript с использованием технологии HTML5/JS и CSS3. На веб-сервере должен быть создан WebSocket-сервер, например на Node.JS. WebSocket-сервер должен прослушивать порт, и ожидать подключений клиентов. Для установления соединения клиентский скрипт веб чата, голосового и видео веб чата создает объект WebSocket, например: var webSocket = new WebSocket("ws://example.net/chat"). В URL веб чата или голосового/видео веб чата вместо прикладного протокола HTTP указан протокол ws, а для шифрованного соединения может быть примен протокол wss. Кроме того, в клиентском скрипте должны быть определены функции обратного вызова function(event) при соединении и получении сообщения, а также разрыве соединения.

Для установления WebSocket-соединения клиент веб чата или голосового/видео веб чата формирует особый запрос (с включенными в него дополнительными заголовками) на основе HTTP, на этот запрос сервер веб чата или голосового/видео веб чата отвечает определённым образом. WebSocket-запрос использует протокол прикладного уровня HTTP для того чтобы установить сокетное соединение и перейти на WebSocket-протокол, так как HTTP работает поверх TCP, который устанавливает сокетное соединение. Кроме того, TCP выполняет посредническую роль между приложениями и транспортной инфраструктурой сети. В этом случае WebSocket-протокол представлен как TCP протокол, обслуживающий прикладной протокол HTTP и у него не будет проблем с транспортной инфраструктурой сети Интернет.

Установление WebSocket-соединения аналогичное процедуре соединения по сеансовому HTTP-протоколу, работающему по принципу "запрос-ответ", за исключением некоторых дополнительных заголовков в запросе и ответе. Например, в дополнительных заголовках запроса указано, что соединение должно быть обновлено до WebSocket-соединения. В HTTP-запросе применяется метод GET, предназначенный для получения информации.

Схема HTTP-сеанса:

  • установление TCP-соединения;
  • запрос клиента;
  • ответ сервера;
  • разрыв TCP-соединения.

В состав HTTP-запроса, передаваемого клиентом серверу, входят несколько компонентов, но заголовком запроса является строка состояния.

Строка состояния (запроса) имеет следующий формат: метод_запроса URL_pecypca версия_протокола_НТТР.

Сервер отвечает строкой состояния: версия_протокола - код_ответа - пояснительное_сообщение

В коде ответа, вместо кода 200, указывающего на успешную обработку HTTP-запроса, на WebSocket-запрос сервер должен отвечать кодом 101.

Необходимо отметить, что надежную доставку HTTP-запроса, сгенерированного браузером, обеспечивает TCP-протокол, который ориентирован на работу с соединениями. Установление TCP-соединения осуществляется с помощью тройного "рукопожатия", т.е. производится обмен тремя сегментами и в результате устанавливается виртуальное (логическое) соединение между TCP-портами. Затем в следующих сегментах передаются данные HTTP-запроса (строка состояния, поля заголовков и тело запроса) на сервер. После получения данных о запросе, сервер отвечает строкой состояния, далее следуют поля заголовков и тело ответа. Код в строке состояния 101 и положительные сообщения в дополнительных заголовках ответа означают, что WebSocket-соединение установлено и осуществлен переход с HTTP на протокол WebSocket.

Далее протокол HTTP не используется, а установленное сокетное соединение не разрывается, им управляет протокол WebSocket. По сокетному соединению, управляемому WebSocket, между клиентом веб чата или голосового и видео веб чата и WebSocket-сервером может осуществляться обмен WebSocket-сообщениями. Единицей обмена данными для WebSocket-сообщений является кадр, а не сегмент как для TCP-потоков. WebSocket-сообщения передаются по TCP-соединению как последовательность кадров, а не как последовательность сегментов для TCP-потоков. Для работы с протоколом WebSocket браузеры должны поддерживать спецификацию HTML5 WebSocket. Кроме того, для протокола WebSocket должна быть обеспечена серверная поддержка.