WebSockets: стабильный и готовый для разработчиков

Например, этот фрагмент кода извлекает текст, введенный пользователем, и отправляет его на сервер в виде текстового сообщения UTF-8, которое необходимо отправить обратно. Он проверяет, что Websocket находится в OPEN readyState:

 function sendTextMessage () {
	 if (socket.readyState! = WebSocket.OPEN)
		 возвращение;
	 var e = document.getElementById ("textmessage");
	 socket.send (e.value);
 }

Этот фрагмент извлекает изображение, нарисованное пользователем на холсте, и отправляет его на сервер в виде двоичного сообщения:

 function sendBinaryMessage () {
	 if (socket.readyState! = WebSocket.OPEN)
		 возвращение;
	 var sourceCanvas = document.getElementById ('source');
	 // msToBlob возвращает объект blob из изображения или рисунка холста
	 socket.send (sourceCanvas.msToBlob ());
	 // ...
 }

Регистрация для сообщений событий

Чтобы получать сообщения, приложение должно зарегистрироваться для сообщений о событиях. Обработчик события получает MessageEvent, который содержит данные в MessageEvent.data. Данные могут быть получены в виде текстовых или двоичных сообщений.

При получении двоичного сообщения атрибут WebSocket.binaryType определяет, будут ли данные сообщения возвращены в виде типа BLOB-объекта или типа ArrayBuffer. Атрибут может быть установлен как «blob» или «arraybuffer». В примерах ниже используется значение по умолчанию «blob».

Этот фрагмент получает отраженное изображение или текст с сервера веб-сокетов. Если данные являются BLOB-объектами, то изображение возвращается и рисуется на целевом холсте;
в противном случае текстовое сообщение UTF-8 было возвращено и отображается в текстовом поле.

 socket.onmessage = function (messageEvent) {
	 if (messageEvent.data instanceof Blob) {
		 var destinationCanvas = document.getElementById ('destination');
		 var destinationContext = destinationCanvas.getContext ('2d');
		 var image = new Image ();
		 image.onload = function () {
			 destinationContext.clearRect (0, 0, destinationCanvas.width, destinationCanvas.height);
			 destinationContext.drawImage (image, 0, 0);
		 }
		 image.src = URL.createObjectURL (messageEvent.data);
	 } еще {
		 document.getElementById ("textresponse"). value = messageEvent.data;
	 }
 }; 

Подробная информация о закрытии соединения WebSocket

Подобно открывающему рукопожатию, есть закрывающее рукопожатие. Любая конечная точка (приложение или сервер) может инициировать это рукопожатие.
Специальный вид кадра — закрытый кадр — отправляется на другую конечную точку. Фрейм закрытия может содержать необязательный код состояния и причину закрытия. Протокол определяет набор соответствующих значений для кода состояния. Отправитель закрытого кадра не должен отправлять дополнительные данные приложения после закрытого кадра.
Когда другая конечная точка получает закрытый кадр, она отвечает своим собственным закрывающим кадром в ответ. Он может отправлять ожидающие сообщения, прежде чем ответить закрывающим фреймом.

Программирование закрытия WebSocket и регистрация для закрытия событий

Приложение инициирует рукопожатие при открытом соединении с API закрытия:

  socket.close (1000, «нормальное закрытие»); 

Чтобы получать уведомления, когда соединение было закрыто, приложение должно зарегистрироваться для закрытия событий.

 socket.onclose = function (closeEvent) {
	 document.getElementById ("serverStatus"). innerHTML = 'Состояние веб-сокета ::' + 'CLOSED';
 }; 

API закрытия принимает два необязательных параметра: код состояния, определенный протоколом, и описание. Код состояния должен быть либо 1000, либо в диапазоне от 3000 до 4999. При выполнении закрытия для атрибута readyState устанавливается значение ЗАКРЫТИЕ. После того, как IE10 получает ответ закрытия от сервера, атрибут readyState устанавливается в значение CLOSED и запускается событие закрытия.

Использование Fiddler для просмотра трафика WebSockets