Статьи

WebSocket с Jaggery (Образец JaggeryJS)

Апрель 10, 2018

Мой последний пост был « как реализация Web Socket в Tomcat 7 и Jaggery [4]». Теперь мы напишем простое приложение с использованием jaggeryjs webSocket.
Здесь я приведу некоторые

  • Основная информация о веб-сокете
  • Образцы примеров кода javaScript (Front end)
  • Обработка междоменного домена в веб-сокетах
  • Спецификация WebSocket и типы, поддерживающие его
  • Где использовать веб-сокеты с архитектурой верхнего уровня веб-сокетов
  • webSocket с использованием образца с jaggery [5]

Протокол WebSocket в браузере (JS)

Во-первых, вам нужно определить JavaScript API для протокола WebSocket в браузере, что позволяет двунаправленную связь между браузером и сервером.

Вы можете определить новые протоколы, ws: // и wss: // для стандартных и безопасных соединений WebSocket:

//connection URL

var connection = new WebSocket('ws://subdomain.examnple.com/some-endpoint')

//web socket events

connection.onopen = function(e) {
  console.log("Connected");
};

connection.onmessage = function(e) {
  console.log( "Received: " + e.data);
};

connection.onclose = function(e) {
  console.log("Connection closed");
};

междоменное

По умолчанию WebSockets является междоменным, и вы можете дополнительно ограничить доступ к домену на сервере через заголовок Origin:

Access-Control-Allow-Origin: http://websocket.org
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type

Встроенный метод определения расширений WebSocket через RFC. В число текущих расширений входят perframe-deflate [1] и мультиплексирование [2]. Оригинальная спецификация WebSocket допускает строки, но теперь также позволяет использовать буферизованные массивы и BLOB-объекты.

var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
connection.send(binary.buffer);

var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

[НОТА]

WebSocket не поддерживает отправку / получение JSON (пока), но может быть достигнуто путем сериализации / десериализации [3]:

wss.on('connection', function(ws) {
  ws.send(JSON.stringify({
    attribute: 'connected'
  }));
});

клиент

connection.onmessage = function (e) {
  var response = JSON.parse(e.data);
};

Где мы можем использовать WS?

  • Браузер-сервер
  • На самом деле не предназначен для обмена данными между серверами; лучше использовать UDP или другой протокол передачи с низкими издержками, если вы управляете обоими серверами
  • Не предназначен для связи между браузерами; это то, что для WebRTC
  • Используется «WSS» в производстве

Архитектура высшего уровня

образ

Пример реального использования

  • Приложение для чата в реальном времени
  • Многопользовательская игра HTML5
  • Событийная аналитика на странице

Сервер может быть построен на любом языке, который поддерживает цикл событий

Образец Jaggery

Теперь у jaggery есть возможность обрабатывать полный API веб-сокетов поверх js. Вы разрабатываете интерфейс js (клиент) по спецификации webSocket [7].

Вот пример server.jag:

<%
var log = new Log();


webSocket.ontext = function (data) {
    log.info('Client Sent : ' + data);   
};

webSocket.onbinary = function (stream) {
    log.info('Client Streamed : ' + stream.toString());
};


webSocket.onopen = function (outstre) {
    log.info('Connection open');

};

webSocket.onclose = function (status) {
    log.info('Client Streamed close');
   
};

%>

Теперь вы можете попробовать разработать образец чата (очень известный пример для сокета). Сервер Jaggery будет транслировать сообщение, которое мы получаем для приложения, клиент, подключенный к приложению сервера через веб-сокет.

образ

Вот также source.jag source [8] исходный код клиентского интерфейса [8]. Вот скриншот тестирования.

образ

[1] http://tools.ietf.org/html/draft-tyoshino-hybi-websocket-perframe-deflate-05
[2] http://tools.ietf.org/html/draft-ietf-hybi-websocket -multiplexing-10
[3] https://developer.mozilla.org/en/docs/WebSockets/Writing_WebSocket_client_applications
[4] http://madhukaudantha.blogspot.com/2014/02/jaggery-socket-implementation-in-tomcat .html
[5] http://madhukaudantha.blogspot.com/search/label/Jaggery
[6] http://www.html5rocks.com/en/tutorials/websockets/basics/

[7] http://dev.w3.org/html5/websockets/

[8] https://github.com/Madhuka/MadhukaBlogRepo/tree/1.0.0/SampleApps/JaggeryApps/chatroom

31
Share: