Add websocket example
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
package org.baeldung.model;
|
||||
|
||||
public class Message {
|
||||
|
||||
private String text;
|
||||
|
||||
public String getText() {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
package org.baeldung.model;
|
||||
|
||||
public class OutputMessage {
|
||||
|
||||
private String text;
|
||||
private String time;
|
||||
|
||||
public OutputMessage(final String text, final String time) {
|
||||
this.text = text;
|
||||
this.time = time;
|
||||
}
|
||||
|
||||
public String getText() {
|
||||
return text;
|
||||
}
|
||||
|
||||
public String getTime() {
|
||||
return time;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
package org.baeldung.spring.web.config;
|
||||
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
|
||||
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
|
||||
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
|
||||
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
|
||||
|
||||
@Configuration
|
||||
@EnableWebSocketMessageBroker
|
||||
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
|
||||
|
||||
@Override
|
||||
public void configureMessageBroker(final MessageBrokerRegistry config) {
|
||||
config.enableSimpleBroker("/topic");
|
||||
config.setApplicationDestinationPrefixes("/app");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void registerStompEndpoints(final StompEndpointRegistry registry) {
|
||||
registry.addEndpoint("/chat").withSockJS();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
package org.baeldung.web.controller;
|
||||
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.Date;
|
||||
|
||||
import org.baeldung.model.Message;
|
||||
import org.baeldung.model.OutputMessage;
|
||||
import org.springframework.messaging.handler.annotation.MessageMapping;
|
||||
import org.springframework.messaging.handler.annotation.SendTo;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMethod;
|
||||
|
||||
@Controller
|
||||
public class ChatController {
|
||||
|
||||
@RequestMapping(value = "/showChat", method = RequestMethod.GET)
|
||||
public String displayChat() {
|
||||
return "chat";
|
||||
}
|
||||
|
||||
@MessageMapping("/chat")
|
||||
@SendTo("/topic/")
|
||||
public OutputMessage send(final Message message) throws Exception {
|
||||
|
||||
final String time = new SimpleDateFormat("HH:mm").format(new Date());
|
||||
return new OutputMessage(message.getText(), time);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>Chat WebSocket</title>
|
||||
|
||||
<spring:url value="/resources/js/sockjs-0.3.4.js" var="sockjs" />
|
||||
<spring:url value="/resources/js/stomp.js" var="stomp" />
|
||||
|
||||
<script src="${sockjs}"></script>
|
||||
<script src="${stomp}"></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('/spring-mvc-java/chat');
|
||||
stompClient = Stomp.over(socket);
|
||||
|
||||
stompClient.connect({}, function(frame) {
|
||||
|
||||
setConnected(true);
|
||||
console.log('Connected: ' + frame);
|
||||
stompClient.subscribe('/topic/message', function(messageOutput) {
|
||||
showMessageOutput(JSON.parse(messageOutput.body));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
|
||||
if(stompClient != null) {
|
||||
stompClient.disconnect();
|
||||
}
|
||||
|
||||
setConnected(false);
|
||||
console.log("Disconnected");
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
|
||||
var text = document.getElementById('text').value;
|
||||
stompClient.send("/app/chat", {}, JSON.stringify({ 'text': text }));
|
||||
}
|
||||
|
||||
function showMessageOutput(messageOutput) {
|
||||
|
||||
var response = document.getElementById('response');
|
||||
var p = document.createElement('p');
|
||||
p.style.wordWrap = 'break-word';
|
||||
p.appendChild(document.createTextNode(messageOutput.time + ": " + messageOutput.text));
|
||||
response.appendChild(p);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="disconnect()">
|
||||
|
||||
<div>
|
||||
<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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user