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>
|
||||
<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>
|
||||
|
||||
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