Introduction
Since last decade web has changed a lot. Now web applications are more responsive continuously talking to servers without reloading the whole page again. Technologies like Ajax is doing very good in this field. But there is always a question "What next?". WebSocket might be answer to that.
WebSocket is technology which provide full duplex communication channels over a single TCP connection. So in simple words, the client will open a TCP connection and start sending and receiving the data. All latest browsers support WebSocket. Now I want to jump to the part where Websocket met Java EE, if you want to read more about WebSocket here is Wiki Link.
WebSocket is technology which provide full duplex communication channels over a single TCP connection. So in simple words, the client will open a TCP connection and start sending and receiving the data. All latest browsers support WebSocket. Now I want to jump to the part where Websocket met Java EE, if you want to read more about WebSocket here is Wiki Link.
WebSocket & Java EE
Java EE 7 is going to be first version which will officially add WebSocket as an option for developers. So here is the list of Ingredients required to write a simple WebSocket application:- Script file written in JavaScript
- A POJO with WebSocket Annotations
Example :
There are two annotations which will convert POJO to a webSocket.
- WebSocketEndpoint - URL pattern along with some encoder and decoder information is defined using this annotation.
- WebSocketMessage - method with this annotation is called to process the message and produce any response (if required)
On client side, WebSocket class has been introduced to JavaScript. To start communication with WebSocket, we need to create a new object of WebSocket and need to register few callback methods which will be called on different state of connection and messaging.
Lets check how it looks like:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import javax.websocket.WebSocketEndpoint; | |
| import javax.websocket.WebSocketMessage; | |
| @WebSocketEndpoint("/hello") | |
| public class HelloBean { | |
| @WebSocketMessage | |
| public String sayHello(String name) { | |
| return "Hello " + name + "!"; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@page contentType="text/html" pageEncoding="UTF-8"%> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>Sample1 WebSocket</title> | |
| <script language="javascript" type="text/javascript"> | |
| var wsUri = "ws://localhost:8080/LearnJavaEE7/hello"; | |
| var websocket = new WebSocket(wsUri); | |
| websocket.onopen = function(evt) { onOpen(evt); }; | |
| websocket.onmessage = function(evt) { onMessage(evt); }; | |
| websocket.onerror = function(evt) { onError(evt); }; | |
| function init() { | |
| output = document.getElementById("output"); | |
| } | |
| function greet() { | |
| websocket.send(nameId.value); | |
| writeToScreen("SENT: " + nameId .value); | |
| } | |
| function onOpen(evt) { | |
| writeToScreen("CONNECTED"); | |
| } | |
| function onMessage(evt) { | |
| writeToScreen("RECEIVED: " + evt.data); | |
| } | |
| function onError(evt) { | |
| writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); | |
| } | |
| function writeToScreen(message) { | |
| var pre = document.createElement("p"); | |
| pre.style.wordWrap = "break-word"; | |
| pre.innerHTML = message; | |
| output.appendChild(pre); | |
| } | |
| window.addEventListener("load", init, false); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Learn WebSocket!!</h1> | |
| <div style="text-align: center;"> | |
| <form action=""> | |
| <input id="nameId" name="name" value="Enter Name" type="text"> | |
| <input onclick="greet();" value="Greet" type="button"><br> | |
| </form> | |
| </div> | |
| <div id="output"></div> | |
| </body> | |
| </html> |
The code will produce following output:
So as soon as the page is loaded the browser will try to open WebSocket if WebSocket is opened successfully onOpen method will be called. Then user need to enter some Data in text box and click greet button. Then send method will be called to send the data to WebSocket. Then WebSocket will process the data (in our example sayHello method will process the message) and send back the message. As soon as the browser receives the message onMessage method will be invoked and desired operation will be performed.
In this screenshot I tried to capture the network communication using Google Chrome developers tools. You can clearly see there is single connection used again for all transmission.
