1 Breaking Barriers with HTML 5 Communication How to enable a - - PowerPoint PPT Presentation

▶
1 breaking barriers with html 5 communication
SMART_READER_LITE
LIVE PREVIEW

1 Breaking Barriers with HTML 5 Communication How to enable a - - PowerPoint PPT Presentation

Jan 18, 2024 250 likes •618 views

1 Breaking Barriers with HTML 5 Communication How to enable a stateful Web 2 Challenge If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build? 3 Speakers Jonas Jacobi

slide-1
SLIDE 1

1

slide-2
SLIDE 2

2

Breaking Barriers with HTML 5 Communication

How to enable a stateful Web

slide-3
SLIDE 3

3

“If we were not restricted by the traditional limitations of HTTP, what type of Web applications would we build?”

Challenge

slide-4
SLIDE 4

4

Speakers

  • Jonas Jacobi
  • Co-Founder: Kaazing
  • Co-Author: Pro JSF and Ajax, Apress
slide-5
SLIDE 5

5

Networking Review

  • Desktop Networking
  • Full-duplex bidirectional TCP sockets
  • Access any server on the network
  • Browser Networking
  • Half-duplex HTTP request-response
  • HTTP polling, long polling, streaming
  • Same-origin HTTP requests
slide-6
SLIDE 6

6

Defining Real-Time Web

Or, is it just nearly, nearly real-time?

slide-7
SLIDE 7

7

Push Technology

  • Server-Initiated Message Delivery
  • Clients are listening
  • Clients behind firewalls
  • Techniques such as Comet/Reverse Ajax
  • Delays Completion of HTTP Response
  • Generally Implemented in JS
  • Scalability Limitations (Cost etc…)
  • Not general purpose
  • No standard
slide-8
SLIDE 8

8

Half-duplex Architecture

Java
EE
Container
 Web
Applica3on
Logic



EJB



JMS

 RMI‐‐TCP
 (Full‐Duplex)
 JDBC‐‐TCP
 (Full
Duplex)
 HTTP
 (Half‐Duplex)


Database
 Stock
 Trading
 Client


IMAP‐‐TCP
 (Full
Duplex)
 XMPP‐‐TCP
 (Full
Duplex)
 JMS‐‐TCP

 (Full
Duplex)
 JMS‐‐TCP

 (Full‐Duplex)


JMS


Custom
TCP
 (Full‐Duplex)
 Chat
 Client

 EJB
 Client



JDBC



Chat
 Server
 Server


Stock
 Client



JMS


Stock
 Server


HTTP
 (Half‐Duplex)
 HTTP
 (Half‐Duplex)
 HTTP
 (Half‐Duplex)


Mail
Server


Mail
Client


slide-9
SLIDE 9

9

W3C & IETF Work in Progress

  • W3C
  • HTML5 Specification (postMessage)
  • Cross-Origin Resource Sharing
  • EventSource API (Server-sent Events)
  • WebSocket API
  • IETF
  • WebSocket Protocol

(in conjunction with W3C WebSocket API spec)

slide-10
SLIDE 10

10

HTML 5 postMessage

  • Send Strings Between HTML Documents
  • Documents may be served by different sites
  • Standard API

targetWindow.postMessage(message, targetOrigin) window.onmessage = function(event) { alert(event.data); }

  • Browser Support
  • IE 8, FF 3, Opera 9, Safari 4, Chrome 2
slide-11
SLIDE 11

11

HTML 5 Server-Sent Events

  • Standardizes and formalizes how a

continuous stream of data can be sent from a server to a browser

  • Introduces EventSource—a new

JavaScript API

slide-12
SLIDE 12

12

HTML 5 Server-Sent Events

Connects to a server URL to receive an event stream:

var stream = 
 new EventSource("http://news.kaazing.com"); stream.onopen = function() { alert(“open”); } stream.onmessage = function(event) { 
 alert(“message: “ + event.data); } stream.onerror = function() { alert(“error”); }

slide-13
SLIDE 13

13

HTML 5 Server-Sent Events

  • Server can add the id event property so

that clients can add a Last-Event-ID header during reconnect

  • Used to guarantee message delivery
  • Server can specify an optional retry

header as part of an event in the event stream

slide-14
SLIDE 14

14

Cross-Site Resource Sharing

  • W3C Technical Report
  • Access control for client-side cross-origin

requests

  • Published Sept 12, 2008
  • http://www.w3.org/TR/access-control/
  • Browser Support
  • Firefox 3.5
  • IE8 XDomainRequest (similar)
  • Opera, Safari, Chrome coming
slide-15
SLIDE 15

15

Cross-Site Resource Sharing

GET / HTTP/1.1\r\n Host: www.w3.org\r\n Origin: http://www.kaazing.com\r\n … \r\n 200 OK HTTP/1.1\r\n Allow-Origin: http://www.kaazing.com\r\n … \r\n

slide-16
SLIDE 16

16

slide-17
SLIDE 17

17

WebSockets

  • W3C Specification – WebSocket API
  • http://dev.w3.org/html5/websockets/
  • HTTP-friendly TCP for the browser
  • Full-duplex bidirectional communication
  • Operates over a single socket
  • Browser Support (coming)
  • Webkit – Bug 28844
  • Firefox – Bug 472529
slide-18
SLIDE 18

18

WebSockets

  • Distributed client-server architecture
  • No browser plug-ins
  • Traverses proxies and firewalls seamlessly
  • HTTP CONNECT
  • Allows authorized cross-origin

communication

  • Share port with existing HTTP content at

different path

slide-19
SLIDE 19

19

WebSockets

  • Connection established by upgrading

from the HTTP protocol to the WebSocket protocol

  • WebSocket data frames can be sent back

and forth between the client and the server in full-duplex mode

slide-20
SLIDE 20

20

WebSockets

  • Supports a diverse set of clients
  • Cannot deliver raw binary data to JavaScript
  • Binary data is ignored if the client is JavaScript
slide-21
SLIDE 21

21

WebSocket Schemes

ws://www.websocket.org/text

wss://www.websocket.org/encrypted-text

slide-22
SLIDE 22

22

WebSocket Handshake

GET /text HTTP/1.1\r\n

Upgrade: WebSocket\r\n Connection: Upgrade\r\n Host: www.websocket.org\r\n …\r\n HTTP/1.1 101 WebSocket Protocol Handshake\r\n Upgrade: WebSocket\r\n Connection: Upgrade\r\n …\r\n

slide-23
SLIDE 23

23

WebSocket Frames

  • Frames can be sent full-duplex
  • Either direction at any time
  • Text Frames use terminator
  • \x80Hello, WebSocket\0xff
  • Binary Frames use length prefix
  • \x00\0x10Hello, WebSocket
  • Text and binary frames on same WebSocket
slide-24
SLIDE 24

24

WebSockets API

  • Creating a WebSocket instance:

var myWebSocket = new WebSocket (“ws://www.websocket.org”);

slide-25
SLIDE 25

25

WebSockets API

  • Associating listeners:

myWebSocket.onopen = function(evt) { alert(“Connection open ...”); }; myWebSocket.onmessage = function(evt) { alert( “Received Message: ” + evt.data); }; myWebSocket.onclose = function(evt) { alert(“Connection closed.”); };

slide-26
SLIDE 26

26

WebSockets API

  • Sending messages:

myWebSocket.postMessage(“Hello WebSocket!”); myWebSocket.disconnect();

slide-27
SLIDE 27

27

Extending WebSockets

  • Any TCP-based Protocol Works on

WebSocket

  • JMS, AMQP, STOMP, XMPP, IMAP, AMQP,

IRC, …

  • Custom Protocols
  • Binary Protocols
  • Encode Binary as Text
slide-28
SLIDE 28

28

WebSocket Security

  • HTTP Security
  • 401 Not Authorized
  • Cross-domain communication
  • Secure WebSockets
  • wss://www.websocket.org
  • SSL just like HTTPS
  • Single Sign-on
  • HTTP credentials vs. protocol credentials
  • Protocol Attacks
  • Validate protocol syntax and semantics
slide-29
SLIDE 29

29

Stomp Client Example

var myStomp = new StompClient(); myStomp.onopen = function(headers) { myStomp.subscribe(“/topic/destination”); } myStomp.onmessage = function(headers, body) { alert(body); } myStomp.connect(“ws://www.websocket.org/stomp”); myStomp.send(“Hello STOMP!”, “/topic/destination”);

slide-30
SLIDE 30

30

Full-duplex Architecture

Java
EE


Database


EJB

 JDBC



Chat
 Server


Custom‐‐TCP
(Full‐Duplex)
 XMPP
‐‐TCP
(Full‐Duplex)
 JMS
‐‐TCP
(Full‐Duplex)
 RMI‐‐TCP
(Full‐Duplex)
 JDBC‐‐TCP
(Full‐Duplex)


Trading
 System


TCP
over
HTTP
 (Full‐Duplex)
 TCP
over
HTTP
 (Full‐Duplex)
 TCP
over
HTTP
 (Full‐Duplex)
 TCP
over
HTTP
 (Full‐Duplex)


>|<

Websocket
Gateway



Messaging System

slide-31
SLIDE 31

31

slide-32
SLIDE 32

32

Stateful Asynchronous System

News Feed ERP/CRM System Database / Storage Trading System Payment System Application Logic Web Services

Messaging System

Desktop Solution Web Client Web Client

Internet

Websocket Gateway Desktop/ Server

slide-33
SLIDE 33

33

Summary

  • HTML 5 Communication has arrived (early)
  • W3C WebSockets will change everything
  • Open your mind and be creative
slide-34
SLIDE 34

34

slide-35
SLIDE 35

35

Coming soon to a bookstore …