In this article we will see how Java server (like Tomcat) can have two way communication with browser webpage using websocket API.
You can get history & basic details about websocket on wiki
Example in this article
- We will create Java server endpoint to listen to websocket connection using javax.websocket.* API.
- We will create simple HTML page which will connect to Java server websocket endpoint using simple Javascript.
- We will deploy this as a war to Tomcat server.
- We will test exchange of messages both ways between server & browser.
Websocket Java server endpoint
We will create a simple maven web project for this example. We need to add javax.websocket-api dependency for this example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.itsallbinary</groupId> <artifactId>web-socket-tutorial</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <properties> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>javax.websocket</groupId> <artifactId>javax.websocket-api</artifactId> <version>1.1</version> <scope>provided</scope> </dependency> </dependencies> </project> |
Now let’s create a simple endpoint. In this endpoint,
- On opening of connection, we will start a separate thread which will send messages to browser every 2000 milliseconds.
- On receiving message from browser, it will print the message in console.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
package com.itsallbinary.tutorial.websocket; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; /** * Indicates that this class is a websocket endpoint with URL "/server-endpoint" */ @ServerEndpoint("/server-endpoint") public class MyWebSocketEndpoint { /** * Container calls this method when browser connects to this endpoint. */ @OnOpen public void onOpen(Session session) { System.out.println("Session Open [" + session.getId() + "]"); // Start a separate thread which will send messages back to browser. new Thread(new ServerToBrowserMessageSender(session)).start(); } /** * Container calls this method when websocket connection is closed by browser or * server. */ @OnClose public void onClose(Session session) { System.out.println("Session Close [" + session.getId() + "]"); } /** * Process message received from browser. */ @OnMessage public void onMessage(String message, Session session) { System.out.println("Message received [" + session.getId() + "] Message=" + message); } /** * Container calls this method when there is an error in websocket * communication. */ @OnError public void onError(Throwable t) { System.out.println("Error - " + t.getMessage()); } } /** * This is a custom thread which sends message to browser every 2000 * milliseconds. */ class ServerToBrowserMessageSender extends Thread { private int count = 0; private Session session; public ServerToBrowserMessageSender(Session session) { this.session = session; } @Override public void run() { while (count < 5) { count++; try { // Send message to browser ever 2000 milliseconds. Thread.sleep(2000); session.getBasicRemote() .sendText("[Server -> Browser] A Message from server to browser. Count = " + count); } catch (Exception e) { e.printStackTrace(); } } } } |
HTML with Javascript Websocket
Now let’s create simple HTML page with Javascript.
- This page will connect to above Java server websocket endpoint using Javascript Websocket.
- Every 200 milliseconds, this page will keep sending messages to server.
- On receiving/sending messages to/from server, it will append the message to HTML to visualize realtime.
Note: ws:// indicates websocket URL & wss:// indicates websocket secure like https. For our example we will use ws:// .
Refer Websocket to get more information about Javascript Websocket object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<html> <head> <!-- Include JQuery to display output in HTML easily. JQuery is not required for websocket communication itself. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>Websocket Basic Tutorial</h1> <h2>Server Browser 2-way communication</h2> <script> var serverMessagesCount = 0; var clientMessagesCount = 0; /* * Create a javascript websocket object using the URL from Java server endpoint * and connect to websocket endpoint. */ var ws = new WebSocket("ws://" + window.location.host + "/web-socket-tutorial/server-endpoint"); // Javascript callback function when connection is established. ws.onopen = function() { console.log("On Open"); $("#output").append("Openened connection to websocket<br/>"); clientLoop(); } // Javascript callback function when messages is received from server. ws.onmessage = function(msg) { console.log("On Message = " + msg + " Count: " + serverMessagesCount); $("#output").append(msg.data + "<br/>"); // Receive 5 messages maximum from server & then close websocket. if (serverMessagesCount == 4) { ws.close(); } else { serverMessagesCount++; } } // Javascript callback function when connection is closed. ws.onclose = function(msg) { console.log("On Close = " + msg); $("#output").append("Closed connection to websocket<br/>"); } // Simple function which send message to server every 2000 milliseconds. function clientLoop() { setTimeout( function() { // If websocket connection is open, send message to server. if (ws.readyState == 1) { var message = "[Browser -> Server] A Message from browser to server. Count = " + clientMessagesCount; ws.send(message); $("#output").append(message + "<br/>"); } // Send 5 messages maximum to server. clientMessagesCount++; if (clientMessagesCount < 5) { clientLoop(); } }, 2000); } </script> <!-- Display exchange of messages in this div --> <div id="output"></div> </body> </html> |
Execution
To execute this example, we will use Tomcat server & deploy above example in tomcat. Tomcat server does provide support for websocket.
Here is a video which show demo the code, its deployment to Tomcat using eclipse IDE & browser showcasing exchange of two way messages between server endpoint & browser page.
Output of server
|
1 2 3 4 5 6 7 |
Session Open [0] Message received [0] Message=[Browser -> Server] A Message from browser to server. Count = 0 Message received [0] Message=[Browser -> Server] A Message from browser to server. Count = 1 Message received [0] Message=[Browser -> Server] A Message from browser to server. Count = 2 Message received [0] Message=[Browser -> Server] A Message from browser to server. Count = 3 Message received [0] Message=[Browser -> Server] A Message from browser to server. Count = 4 Session Close [0] |
Browser console output
|
1 2 3 4 5 6 7 |
On Open websocket.html:32 On Message = [object MessageEvent] Count: 0 websocket.html:32 On Message = [object MessageEvent] Count: 1 websocket.html:32 On Message = [object MessageEvent] Count: 2 websocket.html:32 On Message = [object MessageEvent] Count: 3 websocket.html:32 On Message = [object MessageEvent] Count: 4 websocket.html:46 On Close = [object CloseEvent] |
Browser output showing exchange of messages.
GitHub
Complete code can be found on GitHub https://github.com/Ravikharatmal/web-socket-tutorial
Further Reading
You might be interested in this related article.
Create your own video conference web application using Java & JavaScript
References
https://tomcat.apache.org/tomcat-8.0-doc/web-socket-howto.html
https://www.oracle.com/webfolder/technetwork/tutorials/obe/java/WebSocket/WebSocket.html
Muchas gracias. ?Como puedo iniciar sesion?