WebSockets example: HTML page for user experience (#1946)

WebSockets example: HTML page for user experience
helidon-io · Jun 11, 2020 · cc9e926 · cc9e926
1 parent c69a74f
commit cc9e926
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 3 deletions.
diff --git a/examples/microprofile/websocket/README.md b/examples/microprofile/websocket/README.md
@@ -10,3 +10,6 @@ mvn package
 java -jar target/helidon-examples-microprofile-websocket.jar
 ```
 
+```
+http://localhost:7001/web/index.html
+```
diff --git a/...bsocket/src/main/java/io/helidon/microprofile/example/websocket/MessageQueueResource.java b/...bsocket/src/main/java/io/helidon/microprofile/example/websocket/MessageQueueResource.java
@@ -16,6 +16,8 @@
 
 package io.helidon.microprofile.example.websocket;
 
+import java.util.logging.Logger;
+
 import javax.inject.Inject;
 import javax.ws.rs.Consumes;
 import javax.ws.rs.POST;
@@ -27,6 +29,8 @@
 @Path("rest")
 public class MessageQueueResource {
 
+    private static final Logger LOGGER = Logger.getLogger(MessageQueueResource.class.getName());
+
     @Inject
     private MessageQueue messageQueue;
 
@@ -38,6 +42,7 @@ public class MessageQueueResource {
     @POST
     @Consumes("text/plain")
     public void push(String s) {
+        LOGGER.info("push called '" + s + "'");
         messageQueue.push(s);
     }
 }
diff --git a/examples/microprofile/websocket/src/main/resources/WEB/index.html b/examples/microprofile/websocket/src/main/resources/WEB/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+
+<html>
+<!--
+
+    Copyright (c) 2020 Oracle and/or its affiliates. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+   <head>
+      <meta charset="UTF-8">
+      <script type = "text/javascript">
+         var ws;
+         function webSocketTest() {
+            if ("WebSocket" in window) {
+               document.getElementById("title").innerHTML = "WebSocket is supported by your Browser!";
+               ws = new WebSocket("ws://localhost:7001/websocket");
+               ws.onopen = function() {
+                  document.getElementById("result").innerHTML += "<p>WebSocket openned</p>";
+               };
+               ws.onmessage = function (evt) { 
+                  var received_msg = evt.data;
+                  document.getElementById("result").innerHTML += "<p>Message is received: " + escapeHtml(received_msg) + "</p>";
+               };
+               ws.onclose = function() { 
+                  document.getElementById("result").innerHTML += "<p>WebSocket is closed</p>";
+               };
+            } else {
+               document.getElementById("title").innerHTML = "WebSocket NOT supported by your Browser!";
+            }
+         }
+         function sendMessageWebsocket(message){
+            ws.send(message);
+            document.getElementById("result").innerHTML += "<p>Message sent to WebSocket: " + escapeHtml(message) + "</p>";
+         }
+         function sendMessageRest(message){
+              var xhttp = new XMLHttpRequest();
+              xhttp.open("POST", "/rest", true);
+              xhttp.setRequestHeader("Content-type", "text/plain");
+              xhttp.send(message);
+              document.getElementById("result").innerHTML += "<p>Message sent to Rest: " + escapeHtml(message) + "</p>";
+         }
+         function escapeHtml(unsafe) {
+              return unsafe
+                 .replace(/&/g, "&amp;")
+                 .replace(/</g, "&lt;")
+                 .replace(/>/g, "&gt;")
+                 .replace(/"/g, "&quot;")
+                 .replace(/'/g, "&#039;");
+         }
+      </script>
+
+   </head>
+
+   <body onload="webSocketTest()">
+      <h1 id="title"></h1>
+      <div>
+         <p>
+             <p>
+                 <input type="text" id="message" value="example"/><button onclick="sendMessageRest(document.getElementById('message').value)">Send to Rest</button>
+             </p>
+             <p>
+                 <button onclick="sendMessageWebsocket('SEND')">Send to Websocket</button>
+             </p>
+         </p>
+         <h2>History</h1>
+         <div id="result"></div>
+      </div>
+   </body>
+</html>
diff --git a/examples/microprofile/websocket/src/main/resources/application.yaml b/examples/microprofile/websocket/src/main/resources/application.yaml
@@ -14,5 +14,9 @@
 # limitations under the License.
 #
 
-server.port: 7001
-
+server:
+  port: 7001
+  # location on classpath (e.g. src/main/resources/WEB in maven)
+  static.classpath:
+    location: "/WEB"
+    context: "/web"
diff --git a/examples/webserver/websocket/README.md b/examples/webserver/websocket/README.md
@@ -9,5 +9,5 @@ mvn package
 java -jar target/helidon-examples-webserver-websocket.jar
 ```
 
-Open http://localhost:8080 in your browser.
+Open http://localhost:8080/web/index.html in your browser.
 ``
diff --git a/examples/webserver/websocket/src/main/java/io/helidon/webserver/examples/websocket/Main.java b/examples/webserver/websocket/src/main/java/io/helidon/webserver/examples/websocket/Main.java
@@ -24,6 +24,7 @@
 import javax.websocket.server.ServerEndpointConfig;
 
 import io.helidon.webserver.Routing;
+import io.helidon.webserver.StaticContentSupport;
 import io.helidon.webserver.WebServer;
 import io.helidon.webserver.tyrus.TyrusSupport;
 
@@ -52,6 +53,7 @@ static Routing createRouting() {
                                 ServerEndpointConfig.Builder.create(MessageBoardEndpoint.class, "/board")
                                         .encoders(encoders).build())
                                 .build())
+                .register("/web", StaticContentSupport.builder("/WEB").build())
                 .build();
     }
 

diff --git a/examples/webserver/websocket/src/main/resources/WEB/index.html b/examples/webserver/websocket/src/main/resources/WEB/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+
+<html>
+<!--
+
+    Copyright (c) 2020 Oracle and/or its affiliates. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+   <head>
+      <meta charset="UTF-8">
+      <script type = "text/javascript">
+         var ws;
+         function webSocketTest() {
+            if ("WebSocket" in window) {
+               document.getElementById("title").innerHTML = "WebSocket is supported by your Browser!";
+               ws = new WebSocket("ws://localhost:8080/websocket/board");
+               ws.onopen = function() {
+                  document.getElementById("result").innerHTML += "<p>WebSocket openned</p>";
+               };
+               ws.onmessage = function (evt) { 
+                  var received_msg = evt.data;
+                  document.getElementById("result").innerHTML += "<p>Message is received: " + escapeHtml(received_msg) + "</p>";
+               };
+               ws.onclose = function() { 
+                  document.getElementById("result").innerHTML += "<p>WebSocket is closed</p>";
+               };
+            } else {
+               document.getElementById("title").innerHTML = "WebSocket NOT supported by your Browser!";
+            }
+         }
+         function sendMessageWebsocket(message){
+            ws.send(message);
+            document.getElementById("result").innerHTML += "<p>Message sent to WebSocket: " + escapeHtml(message) + "</p>";
+         }
+         function sendMessageRest(message){
+              var xhttp = new XMLHttpRequest();
+              xhttp.open("POST", "/rest/board", true);
+              xhttp.setRequestHeader("Content-type", "text/plain");
+              xhttp.send(message);
+              document.getElementById("result").innerHTML += "<p>Message sent to Rest: " + escapeHtml(message) + "</p>";
+         }
+         function escapeHtml(unsafe) {
+              return unsafe
+                 .replace(/&/g, "&amp;")
+                 .replace(/</g, "&lt;")
+                 .replace(/>/g, "&gt;")
+                 .replace(/"/g, "&quot;")
+                 .replace(/'/g, "&#039;");
+         }
+      </script>
+
+   </head>
+
+   <body onload="webSocketTest()">
+      <h1 id="title"></h1>
+      <div>
+         <p>
+             <p>
+                 <input type="text" id="message" value="example"/><button onclick="sendMessageRest(document.getElementById('message').value)">Send to Rest</button>
+             </p>
+             <p>
+                 <button onclick="sendMessageWebsocket('SEND')">Send to Websocket</button>
+             </p>
+         </p>
+         <h2>History</h1>
+         <div id="result"></div>
+      </div>
+   </body>
+</html>