Building WebSocket Apps in Java using JSR 356

Pankaj kSharmarpspankaj2010@gmail.com

Resources

• Specification• JSR: jcp.org/en/jsr/detail?id=356• Mailing Lists, JIRA, Archive: java.net/projects/websocket-spec• FINAL: Part of Java EE 7

• Reference Implementation• Tyrus: java.net/projects/tyrus• Integrated in GlassFish 4

WebSocket

• WebSocket primer• Getting Started with WebSocket• Getting Started with server-client event• Resources

Make the future java

• Web development has evolved considerably in the past few years. We're beyond the static web pages linked together, which caused browser refreshing and waiting for pages to load.

• Now, the demand is for completely dynamic applications accessible from the web. These applications often need to be as fast as possible and provide nearly real-time components.

• In this we will see how to develop event-driven web applications using Reverse Ajax techniques.

Interactive Websites

1)HTTP is half duplex2)HTTP is verbose3)Hacks for server push

- Polling- Long Polling- Comet/Ajax- complex, insufficient, wasteful.

Some Techniques To Achieve RTC

- Polling- Long Polling- Comet/AjaxWith different- different programming model.

They really been hacks.

People worked around the problem using:-

• Now we will go with Ajax, polling, streaming, Comet, and long polling. Learn how to implement different Reverse Ajax communication techniques, and explore the advantages and disadvantages of each method.

• Ajax:- Asynchronous JavaScript and XML (Ajax), a browser feature accessible in JavaScript, allows a script to make an HTTP request to a website behind the scenes, without the need for a page reload. Ajax has been around more than a decade.

• Though the name includes XML, you can transfer nearly anything in an Ajax request. The most commonly used data is JSON, which is close to JavaScript syntax and consumes less bandwidth.

• Listing Example shows an example of an Ajax request to retrieve a place's name from its postal code.var url = http://www.geonames.org/postalCodeLookupJSON?postalcode='

+ $('#postalCode').val() + '&country=' + $('#country').val() + '&callback=?';

$.getJSON(url, function(data) {

$('#placeName').val(data.postalcodes[0].placeName);

});

• The timeline in Figure 1 shows how some polling requests issued by the client, but no information is returned. The client must wait for the next polling to get the two events received by the server.

• Figure 1. Reverse Ajax with HTTP polling

• To implement polling in JavaScript, you can use setInterval to periodically issue Ajax requests, as shown in example 2:

• Example 2. JavaScript pollingsetInterval(function() {

$.getJSON('events', function(events) {

console.log(events); }); }, 2000);

• Ajax, polling or long polling is very limited, it does not scale and does not provide low-latency communication (when events arrive in the browser as soon as they arrive on the server).

• Comet is a web application model where a request is sent to the server and kept alive for a long time, until a time-out or a server event occurs.

• When the request is completed, another long-lived Ajax request is sent to wait for other server events. With Comet, web servers can send the data to the client, without having to explicitly request it.

Comet:-

• Http is a very chatti protocol.• When we are sending a request to the server there are very heavy

header as a part of the request.• As a user, it is not visible to us but essentially the browser and client

is sending a full bunch of header that goes as the part of the request and the same as the part of the response as well.

• The problem is, it is difficult and challenging for using http for real time communication because there are so much overhead of the protocol.

• Uncompressed request and response headers. Request headers today vary in size from ~200 bytes to over 2KB. As applications use more cookies and user agents expand features, typical header sizes of 700-800 bytes is common.

and response headers associated with polling Example network throughput for HTTP request

•Use case A: 1,000 clients polling every second:•Network throughput is (871 x 1,000) = 871,000 bytes =

6,968,000 bits per second (~6.6 Mbps)• Use case B: 10,000 clients polling every second:• Network throughput is (871 x 10,000) = 8,710,000 bytes =

69,680,000 bits per second (~66 Mbps)•Use case C: 100,000 clients polling every second:•Network throughput is (871 x 100,000) = 87,100,000 bytes =

696,800,000 bits per second (~665 Mbps)

- TCP based, bi-directional, full-duplex messaging.•Originally proposed as part Html5.•In 2011, the IETF standardized the WebSocket protocol as RFC 6455. Since then, the majority of the Web browsers are implementing client APIs that support the WebSocket protocol. Also, a number of Java libraries have been developed that implement the WebSocket protocol.•IETF(Internet Engineering Task Force) - defined protocol RFC-6455.

- Hand Shake- Data Transfer

• W3C – defined JavaScript API to coordinate re-communication.

Then Exactly WebSocket comes in the picture.

• WebSocket is a protocol providing full-duplex communication channels over a single TCP connection.

• The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.

Establish a connection

Client

Handshake Request

Handshake Response

Server

Handshake Request

GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.comSec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13

Handshake Response

HTTP/1.1 101 Switching ProtocolsUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat

ServerClient

Handshake Request

Handshake Response

Connected !

Establishing a Connection

Peer(server)

Peer(client)

Connected !

open open

close

message error

message

message message

message

Disconnected

WebSocket Lifecycle

WebSocket APIwww.w3.org/TR/websockets/

• WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket Protocol is an independent TCP - based protocol. Its only relationship to HTTP is that its handshake is interpreted by HTTP servers as an Upgrade request.[1]

• The WebSocket protocol makes more interaction between a browser and a website, facilitating live content and the creation of real-time games.

• The life cycle of a WebSocket is easy to understand as well:• Client sends the Server a handshake request in the form of a HTTP upgrade

header with data about the WebSocket it’s attempting to connect to.• The Server responds to the request with another HTTP header, this is the last

time a HTTP header gets used in the WebSocket connection. If the handshake was successful, then server sends a HTTP header telling the client it’s switching to the WebSocket protocol.

• Now a constant connection is opened and the client and server can send any number of messages to each other until the connection is closed. These messages only have, about 2 bytes of overhead.

• Using the HTML5 WebSocket API• Utilizing the WebSocket interface couldn't be simpler. To connect to an

end-point, just create a new WebSocket instance, providing the new object with a URL that represents the end-point to which you wish to connect, as shown in the following example.

• Note that a ws:// and wss:// prefix are proposed to indicate a WebSocket and a secure WebSocket connection, respectively.

var myWebSocket = new WebSocket("ws://www.websockets.org");

• A WebSocket connection is established by upgrading from the HTTP protocol to the WebSockets protocol during the initial handshake between the client and the server. The connection itself is exposed via the "onmessage" and "send" functions defined by the WebSocket interface.

• life-cycle as shown in the following example.myWebSocket.onopen = function(evt) { alert("Connection open ..."); };

myWebSocket.onmessage = function(evt) { alert( "Received Message: " + evt.data); };

myWebSocket.onclose = function(evt) { alert("Connection closed.");

• To send a message to the server, simply call "send" and provide the content you wish to deliver. After sending the message, call "close" to terminate the connection, as shown in the following example.

myWebSocket.send("Hello WebSockets!"); myWebSocket.close();

In Java JSR 356

• Java API for WebSocket, specifies the API that Java developers can use when they want to integrate WebSockets into their applications.

• In general, two different programming models are supported:• Annotation - driven. Using annotated POJOs, developers can interact with

the WebSocket lifecycle events.• Interface - driven. Developers can implement the Endpoint interface and the

methods that interact with the lifecycle events.Just look at the servlet example : Broadcasting.

JSR 356 is a part of the Java EE 7 (IETF (Internet Engineering Task Force)-defined protocol RFC-6455)

In Spring

Spring 4 has introduced the WebSocket API using which a browser and web server can communicate over WebSocket protocol.

• SockJSSockJS is a java script library which provides websocket like object for browsers. SockJS provides cross browser compatibility and supports STOMP protocol to communicate with any message broker. SockJS works in the way that we need to provide URL to connect with message broker and then get the stomp client to communicate.

• STOMP ProtocolSTOMP is Simple(or Streaming) Text Oriented Messaging Protocol. A STOMP client communicates to a message broker which supports STOMP protocol.

• The protocol is broadly similar to HTTP, and works over TCP using the following verbs:

• CONNECT• SEND• SUBSCRIBE• UNSUBSCRIBE• BEGIN• COMMIT• ABORT• ACK• NACK• DISCONNECT

Q & A

References:-• https://www.websocket.org/• https://spring.io/guides/gs/messaging-stomp-websocket/• http://docs.spring.io/spring/docs/current/spring-framework-

reference/html/websocket.html• http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/

reference/htmlsingle/#boot-documentation• http://projects.spring.io/spring-boot/