initial websocket commit

4 years ago · 56fd5e8c89
5 changed files with 156 additions and 14 deletions
--- a/pom.xml
+++ b/pom.xml
@ -15,7 +15,7 @@
  <description>A self hosted minimal E2E chat application</description>
  <properties>
    <java.version>11</java.version>
-    <gruntArg></gruntArg>
+    <gruntArg />
  </properties>
  <dependencies>
    <dependency>
@ -60,11 +60,6 @@
      <artifactId>spring-security-test</artifactId>
      <scope>test</scope>
    </dependency>
-    <!-- <dependency>
-      <groupId>com.github.ulisesbocchio</groupId>
-      <artifactId>jasypt-spring-boot-starter</artifactId>
-      <version>2.1.2</version>
-    </dependency> -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
@ -108,6 +103,11 @@
      <artifactId>Either.java</artifactId>
      <version>2.2.0</version>
    </dependency>
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-websocket</artifactId>
+      <scope>compile</scope>
+    </dependency>
  </dependencies>
  <build>
    <plugins>
@ -137,14 +137,6 @@
        <groupId>org.flywaydb</groupId>
        <artifactId>flyway-maven-plugin</artifactId>
        <version>5.2.4</version>
-        <!-- <executions>
-          <execution>
-            <phase>generate-sources</phase>
-            <goals>
-              <goal>migrate</goal>
-            </goals>
-          </execution>
-        </executions> -->
        <configuration>
          <driver>${spring.datasource.driverClassName}</driver>
          <url>jdbc:mysql://${chatto.datasource.url}:${chatto.datasource.port}/${chatto.datasource.database-name}</url>
--- a/src/main/java/org/ros/chatto/websocket/Message.java
+++ b/src/main/java/org/ros/chatto/websocket/Message.java
@ -0,0 +1,12 @@
+package org.ros.chatto.websocket;
+
+import lombok.Builder;
+import lombok.Data;
+
+@Data
+@Builder
+public class Message {
+    private String from;
+    private String to;
+    private String text;
+}
--- a/src/main/java/org/ros/chatto/websocket/WebSocketConfig.java
+++ b/src/main/java/org/ros/chatto/websocket/WebSocketConfig.java
@ -0,0 +1,24 @@
+package org.ros.chatto.websocket;
+
+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
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry config) {
+        config.enableSimpleBroker("/topic", "/queue");
+        config.setApplicationDestinationPrefixes("/app");
+    }
+
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry) {
+        registry.addEndpoint("/chat");
+        registry.addEndpoint("/chat").withSockJS();
+    }
+}
--- a/src/main/java/org/ros/chatto/websocket/WebSocketController.java
+++ b/src/main/java/org/ros/chatto/websocket/WebSocketController.java
@ -0,0 +1,29 @@
+package org.ros.chatto.websocket;
+
+import org.springframework.messaging.handler.annotation.MessageMapping;
+import org.springframework.messaging.handler.annotation.Payload;
+import org.springframework.messaging.simp.SimpMessagingTemplate;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+import lombok.RequiredArgsConstructor;
+
+@Controller
+@RequiredArgsConstructor
+public class WebSocketController {
+
+    private final SimpMessagingTemplate smt;
+
+    @MessageMapping("/chat")
+    // @SendTo("/topic/messages")
+    // @SendToUser("/queue/reply")
+    public void send(@Payload final Message message) throws Exception {
+        smt.convertAndSendToUser(message.getTo(), "/queue/reply", message);
+        // return message;
+    }
+
+    @GetMapping("/ws")
+    public String wsPage() {
+        return "ws";
+    }
+}
--- a/src/main/resources/templates/ws.html
+++ b/src/main/resources/templates/ws.html
@ -0,0 +1,85 @@
+<html>
+
+<head>
+    <title>Chat WebSocket</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
+    <script type="text/javascript">
+        var stompClient = null;
+
+        function setConnected(connected) {
+            document.getElementById('connect').disabled = connected;
+            document.getElementById('disconnect').disabled = !connected;
+            document.getElementById('conversationDiv').style.visibility
+                = connected ? 'visible' : 'hidden';
+            document.getElementById('response').innerHTML = '';
+        }
+
+        function connect() {
+            var socket = new SockJS('/chat');
+            stompClient = Stomp.over(socket);
+            stompClient.connect({}, function (frame) {
+                setConnected(true);
+                console.log('Connected: ' + frame);
+                // stompClient.subscribe('/topic/messages', function (messageOutput) {
+                //     showMessageOutput(JSON.parse(messageOutput.body));
+                // });
+                stompClient.subscribe('/user/queue/reply', function (messageOutput) {
+                    showMessageOutput(JSON.parse(messageOutput.body));
+                });
+            });
+        }
+
+        function disconnect() {
+            if (stompClient != null) {
+                stompClient.disconnect();
+            }
+            setConnected(false);
+            console.log("Disconnected");
+        }
+
+        function sendMessage() {
+            var from = document.getElementById('from').value;
+            var to = document.getElementById('to').value;
+            var text = document.getElementById('text').value;
+            stompClient.send("/app/chat", {},
+                JSON.stringify({ 'from': from, 'text': text, to: to }));
+        }
+
+        function showMessageOutput(messageOutput) {
+            var response = document.getElementById('response');
+            var p = document.createElement('p');
+            p.style.wordWrap = 'break-word';
+            p.appendChild(document.createTextNode(messageOutput.from + ": "
+                + messageOutput.text + " (" + messageOutput.time + ")"));
+            response.appendChild(p);
+        }
+    </script>
+</head>
+
+<body onload="disconnect()">
+    <div>
+        <div>
+            <input type="text" id="from" placeholder="Choose a nickname" />
+        </div>
+        <div>
+            <input type="text" id="to" placeholder="Send to User" />
+        </div>
+        <br />
+        <div>
+            <button id="connect" onclick="connect();">Connect</button>
+            <button id="disconnect" disabled="disabled" onclick="disconnect();">
+                Disconnect
+            </button>
+        </div>
+        <br />
+        <div id="conversationDiv">
+            <input type="text" id="text" placeholder="Write a message..." />
+            <button id="sendMessage" onclick="sendMessage();">Send</button>
+            <p id="response"></p>
+        </div>
+    </div>
+
+</body>
+
+</html>