did somethings sorta

pom.xml

@@ -39,7 +39,10 @@
             <!--<artifactId>mysql-connector-java</artifactId>-->
             <!--<scope>runtime</scope>-->
         <!--</dependency>-->
-
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-rest</artifactId>

src/main/java/com/ziplinegreen/vault/Config/WebSocketConfig.java

@@ -0,0 +1,27 @@
+package com.ziplinegreen.vault.Config;
+
+
+import org.springframework.context.annotation.ComponentScan;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.messaging.simp.config.MessageBrokerRegistry;
+import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
+import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
+
+@Configuration
+@EnableWebSocketMessageBroker
+@ComponentScan(basePackages = "com.ziplinegreen.vault")
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry config) {
+        config.enableSimpleBroker("/topic"); //marks
+        config.setApplicationDestinationPrefixes("/app"); //where the frontend sends things
+    }
+
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry) {
+        registry.addEndpoint("/posts");
+        registry.addEndpoint("/posts").withSockJS();
+    }
+}

src/main/resources/static/app.js

@@ -0,0 +1,101 @@
+// var stompClient = null;
+//
+// function setConnected(connected) {
+//     $("#connect").prop("disabled", connected);
+//     $("#disconnect").prop("disabled", !connected);
+//     if (connected) {
+//         $("#conversation").show();
+//     }
+//     else {
+//         $("#conversation").hide();
+//     }
+//     $("#greetings").html("");
+// }
+//
+// function connect() {
+//     var socket = new SockJS('/gs-guide-websocket');
+//     stompClient = Stomp.over(socket);
+//     stompClient.connect({}, function (frame) {
+//         setConnected(true);
+//         console.log('Connected: ' + frame);
+//         stompClient.subscribe('/topic/posts', function (post) {
+//             showGreeting(JSON.parse(post.body).message);
+//         });
+//     });
+// }
+//
+// function disconnect() {
+//     if (stompClient !== null) {
+//         stompClient.disconnect();
+//     }
+//     setConnected(false);
+//     console.log("Disconnected");
+// }
+//
+// function sendName() {
+//     stompClient.send("/users/1/posts/", {}, JSON.stringify({'message': $("#message").val(), 'userId': '1'}));
+// }
+//
+// function showGreeting(message) {
+//     $("#greetings").append("<tr><td>" + message + "</td></tr>");
+// }
+//
+// $(function () {
+//     $("form").on('submit', function (e) {
+//         e.preventDefault();
+//     });
+//     $( "#connect" ).click(function() { connect(); });
+//     $( "#disconnect" ).click(function() { disconnect(); });
+//     $( "#send" ).click(function() { sendName(); });
+// });
+
+var stompClient = null;
+
+function setConnected(connected) {
+    $('#connect').prop("disabled", connected);
+    $('#disconnect').prop("disabled", !connected);
+    if (connected) {
+        $("#conversation").show();
+    }
+    else {
+        $("#conversation").hide();
+    }
+    $("#greetings").html("");
+}
+
+function connect() {
+    var socket = new SockJS('/gs-guide-websocket');
+    stompClient = Stomp.over(socket);
+    stompClient.connect({}, function (frame) {
+        setConnected(true);
+        console.log('Connected: ' + frame);
+        stompClient.subscribe('/topic/greetings', function (greeting) {
+            showGreeting(JSON.parse(greeting.body).content);
+        });
+    });
+}
+
+function disconnect() {
+    if (stompClient !== null) {
+        stompClient.disconnect();
+    }
+    setConnected(false);
+    console.log("Disconnected");
+}
+
+function sendName() {
+    stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
+}
+
+function showGreeting(message) {
+    $("#greetings").append("<tr><td>" + message + "</td></tr>");
+}
+
+$(function () {
+    $("form").on('submit', function (e) {
+        e.preventDefault();
+    });
+    $( "#connect" ).click(function() { connect(); });
+    $( "#disconnect" ).click(function() { disconnect(); });
+    $( "#send" ).click(function() { sendName(); });
+});

src/main/resources/static/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello WebSocket</title>
+    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/main.css" rel="stylesheet">
+    <script src="/webjars/jquery/jquery.min.js"></script>
+    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
+    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
+    <script src="/app.js"></script>
+</head>
+<body>
+<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
+    enabled. Please enable
+    Javascript and reload this page!</h2></noscript>
+<div id="main-content" class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="connect">WebSocket connection:</label>
+                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
+                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="message">Message?</label>
+                    <input type="text" id="message" class="form-control" placeholder="What is your message...">
+                </div>
+                <button id="send" class="btn btn-default" type="submit">Send</button>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <table id="conversation" class="table table-striped">
+                <thead>
+                <tr>
+                    <th>Messages</th>
+                </tr>
+                </thead>
+                <tbody id="messages">
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+</html>