Merge pull request vert-x#3 from InfoSec812/realtime-chat-example

Added realtime chat verticle example

Author: purplefox

apex-examples/README.adoc

@@ -120,6 +120,25 @@ timer that fires every second and sends a message to the `news-feed` address.
 
 When you get the index page in your browser you should see it update every second as it receives a message.
 
+== Real-time - chat service
+
+This example demonstrates 2-way communication between the client and the server using the event bus bridge
+and web sockets. 
+
+The link:src/main/java/io/vertx/example/apex/realtime/ChatVerticle.java[Java real-time chat example]
+
+The link:src/main/java/io/vertx/example/apex/realtime/webroot/chat.html[chat.html] file 
+bootstraps the vertxbus.js bridge from the client and uses jQuery to handle manipulating
+the DOM and registering event handlers.
+
+When you load the index page in a browser, you should see a div for chat messages and 
+an input field where you can enter your own messages. Typing in the input field and 
+pressing ENTER will cause the input to be sent via the event bus to the server. The server
+will accept the message, prepend it with a timestamp and publish back to all registered 
+listeners (e.g. All connected clients). Take note of the addInboundPermitted and addOutboundPermitted
+settings on the BridgeOptions object to be sure that you authorize the correct messages
+to traverse the event bus bridge in the appropriate direction.
+
 == Auth example
 
 This example shows a basic static web-site that contains both public pages and pages that are only accessible to

apex-examples/src/main/java/io/vertx/example/apex/realtime/Chat.java

@@ -0,0 +1,59 @@
+package io.vertx.example.apex.realtime;
+
+import io.vertx.core.AbstractVerticle;
+import io.vertx.core.eventbus.EventBus;
+import io.vertx.example.util.Runner;
+import io.vertx.ext.apex.Router;
+import io.vertx.ext.apex.handler.StaticHandler;
+import io.vertx.ext.apex.handler.sockjs.BridgeOptions;
+import io.vertx.ext.apex.handler.sockjs.PermittedOptions;
+import io.vertx.ext.apex.handler.sockjs.SockJSHandler;
+import java.text.DateFormat;
+import java.time.Instant;
+import java.util.Date;
+
+/**
+ * A {@link io.vertx.core.Verticle} which implements a simple, realtime,
+ * multiuser chat. Anyone can connect to the chat application on port
+ * 8000 and type messages. The messages will be rebroadcast to all
+ * connected users via the @{link EventBus} Websocket bridge.
+ *
+ * @author <a href="https://github.com/InfoSec812">Deven Phillips</a>
+ */
+public class Chat extends AbstractVerticle {
+    // Convenience method so you can run it in your IDE
+    public static void main(String[] args) {
+        Runner.runExample(Chat.class);
+    }
+
+    @Override
+    public void start() throws Exception {
+
+        Router router = Router.router(vertx);
+
+        final EventBus eb = vertx.eventBus();
+
+        // Register to listen for messages coming IN to the server
+        eb.consumer("chat.to.server").handler(message -> {
+            // Create a timestamp string
+            String timestamp = DateFormat.getDateTimeInstance(DateFormat.SHORT, DateFormat.MEDIUM).format(Date.from(Instant.now()));
+            // Send the message back out to all clients with the timestamp prepended.
+            eb.publish("chat.to.client", timestamp+": "+message.body());
+        });
+
+        // Allow events for the designated addresses in/out of the event bus bridge
+        BridgeOptions opts = new BridgeOptions()
+                .addInboundPermitted(new PermittedOptions().setAddress("chat.to.server"))
+                .addOutboundPermitted(new PermittedOptions().setAddress("chat.to.client"));
+
+        // Create the event bus bridge and add it to the router.
+        SockJSHandler ebHandler = SockJSHandler.create(vertx).bridge(opts);
+        router.route("/eventbus/*").handler(ebHandler);
+
+        // Create a router endpoint for the static content.
+        router.route().handler(StaticHandler.create("webroot").setIndexPage("chat.html"));
+
+        // Start the web server and tell it to use the router to handle requests.
+        vertx.createHttpServer().requestHandler(router::accept).listen(8000);
+    }
+}

apex-examples/src/main/java/io/vertx/example/apex/realtime/webroot/chat.html

@@ -0,0 +1,69 @@
+<!--
+  #%L
+  distributed-chat-service
+  %%
+  Copyright (C) 2015 Zanclus Consulting
+  %%
+  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.
+  #L%
+  -->
+<html>
+    <head>
+        <title>Distributed Chat Service</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
+        <script src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
+        <script src="vertxbus.js"></script>
+        <style>
+            .inset {
+                box-shadow:inset 0 0 4px #000000;
+                -moz-box-shadow:inset 0 0 4px #000000;
+                -webkit-box-shadow:inset 0 0 4px #000000;
+                width: 400px;
+                border-width: 4px;
+                padding: 5px;
+            }
+            input.inset {
+                height: 40px;
+            }
+            div.inset {
+                height: 500px;
+                white-space: pre-wrap
+            }
+        </style>
+    </head>
+    <body>
+        <script>
+            var eb = new vertx.EventBus("/eventbus/");
+            eb.onopen = function() {
+                eb.registerHandler("chat.to.client", function(msg) {
+                    $('#chat').append(msg+"\n");
+                });
+            };
+            
+            function send(event) {
+                if (event.keyCode==13 || event.which == 13) {
+                    var message = $('#input').val();
+                    if (message.length>0) {
+                        console.log($('#input'));
+                        eb.publish("chat.to.server", message);
+                        $('#input').val("");
+                    }
+                }
+            }
+        </script>
+        <div id="chat" class="inset"></div>
+        <input id="input" type="text" onkeydown="send(event)" class="inset">
+    </body>
+</html>

apex-examples/src/main/java/io/vertx/example/util/Runner.java

@@ -41,9 +41,13 @@ public static void main(String[] args) {
   }
 
   static class JSRealtimeRunner {
+    public static void main(String[] args) { Runner.runJSExample("io/vertx/example/apex/realtime/server.js"); }
+  }
+
+  static class JSRealtimeChatRunner {
     public static void main(String[] args) {
-      Runner.runJSExample("io/vertx/example/apex/realtime/server.js");
-    }
+            Runner.runJSExample("io/vertx/example/apex/realtime/chat.js");
+        }
   }
 
   static class JSSessionsRunner {
@@ -80,6 +84,10 @@ public static void main(String[] args) {
     }
   }
 
+  static class GroovyRealtimeChatRunner {
+    public static void main(String[] args) { Runner.runGroovyExample("io/vertx/example/apex/realtime/chat.groovy"); }
+  }
+
   static class GroovyRealtimeRunner {
     public static void main(String[] args) {
       Runner.runGroovyExample("io/vertx/example/apex/realtime/server.groovy");