initial websocket commit

This commit is contained in:
Rohan Sircar 2020-08-05 14:22:32 +05:30
parent a5346f6970
commit 56fd5e8c89
5 changed files with 156 additions and 14 deletions

20
pom.xml
View File

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

View 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;
}

View 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();
}
}

View File

@ -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";
}
}

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