initial websocket commit
This commit is contained in:
parent
a5346f6970
commit
56fd5e8c89
20
pom.xml
20
pom.xml
@ -15,7 +15,7 @@
|
|||||||
<description>A self hosted minimal E2E chat application</description>
|
<description>A self hosted minimal E2E chat application</description>
|
||||||
<properties>
|
<properties>
|
||||||
<java.version>11</java.version>
|
<java.version>11</java.version>
|
||||||
<gruntArg></gruntArg>
|
<gruntArg />
|
||||||
</properties>
|
</properties>
|
||||||
<dependencies>
|
<dependencies>
|
||||||
<dependency>
|
<dependency>
|
||||||
@ -60,11 +60,6 @@
|
|||||||
<artifactId>spring-security-test</artifactId>
|
<artifactId>spring-security-test</artifactId>
|
||||||
<scope>test</scope>
|
<scope>test</scope>
|
||||||
</dependency>
|
</dependency>
|
||||||
<!-- <dependency>
|
|
||||||
<groupId>com.github.ulisesbocchio</groupId>
|
|
||||||
<artifactId>jasypt-spring-boot-starter</artifactId>
|
|
||||||
<version>2.1.2</version>
|
|
||||||
</dependency> -->
|
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.projectlombok</groupId>
|
<groupId>org.projectlombok</groupId>
|
||||||
<artifactId>lombok</artifactId>
|
<artifactId>lombok</artifactId>
|
||||||
@ -108,6 +103,11 @@
|
|||||||
<artifactId>Either.java</artifactId>
|
<artifactId>Either.java</artifactId>
|
||||||
<version>2.2.0</version>
|
<version>2.2.0</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||||
|
<scope>compile</scope>
|
||||||
|
</dependency>
|
||||||
</dependencies>
|
</dependencies>
|
||||||
<build>
|
<build>
|
||||||
<plugins>
|
<plugins>
|
||||||
@ -137,14 +137,6 @@
|
|||||||
<groupId>org.flywaydb</groupId>
|
<groupId>org.flywaydb</groupId>
|
||||||
<artifactId>flyway-maven-plugin</artifactId>
|
<artifactId>flyway-maven-plugin</artifactId>
|
||||||
<version>5.2.4</version>
|
<version>5.2.4</version>
|
||||||
<!-- <executions>
|
|
||||||
<execution>
|
|
||||||
<phase>generate-sources</phase>
|
|
||||||
<goals>
|
|
||||||
<goal>migrate</goal>
|
|
||||||
</goals>
|
|
||||||
</execution>
|
|
||||||
</executions> -->
|
|
||||||
<configuration>
|
<configuration>
|
||||||
<driver>${spring.datasource.driverClassName}</driver>
|
<driver>${spring.datasource.driverClassName}</driver>
|
||||||
<url>jdbc:mysql://${chatto.datasource.url}:${chatto.datasource.port}/${chatto.datasource.database-name}</url>
|
<url>jdbc:mysql://${chatto.datasource.url}:${chatto.datasource.port}/${chatto.datasource.database-name}</url>
|
||||||
|
12
src/main/java/org/ros/chatto/websocket/Message.java
Normal file
12
src/main/java/org/ros/chatto/websocket/Message.java
Normal file
@ -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;
|
||||||
|
}
|
24
src/main/java/org/ros/chatto/websocket/WebSocketConfig.java
Normal file
24
src/main/java/org/ros/chatto/websocket/WebSocketConfig.java
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
}
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
85
src/main/resources/templates/ws.html
Normal file
85
src/main/resources/templates/ws.html
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user