Add websocket example
This commit is contained in:
parent
4d1dd06a26
commit
889b266107
|
@ -8,19 +8,12 @@ import org.baeldung.model.OutputMessage;
|
||||||
import org.springframework.messaging.handler.annotation.MessageMapping;
|
import org.springframework.messaging.handler.annotation.MessageMapping;
|
||||||
import org.springframework.messaging.handler.annotation.SendTo;
|
import org.springframework.messaging.handler.annotation.SendTo;
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.web.bind.annotation.RequestMapping;
|
|
||||||
import org.springframework.web.bind.annotation.RequestMethod;
|
|
||||||
|
|
||||||
@Controller
|
@Controller
|
||||||
public class ChatController {
|
public class ChatController {
|
||||||
|
|
||||||
@RequestMapping(value = "/showChat", method = RequestMethod.GET)
|
|
||||||
public String displayChat() {
|
|
||||||
return "chat";
|
|
||||||
}
|
|
||||||
|
|
||||||
@MessageMapping("/chat")
|
@MessageMapping("/chat")
|
||||||
@SendTo("/topic/")
|
@SendTo("/topic/messages")
|
||||||
public OutputMessage send(final Message message) throws Exception {
|
public OutputMessage send(final Message message) throws Exception {
|
||||||
|
|
||||||
final String time = new SimpleDateFormat("HH:mm").format(new Date());
|
final String time = new SimpleDateFormat("HH:mm").format(new Date());
|
||||||
|
|
|
@ -1,84 +1,81 @@
|
||||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
<html>
|
||||||
<html>
|
<head>
|
||||||
<head>
|
<title>Chat WebSocket</title>
|
||||||
<title>Chat WebSocket</title>
|
|
||||||
|
<script src="./js/sockjs-0.3.4.js"></script>
|
||||||
<spring:url value="/resources/js/sockjs-0.3.4.js" var="sockjs" />
|
<script src="./js/stomp.js"></script>
|
||||||
<spring:url value="/resources/js/stomp.js" var="stomp" />
|
|
||||||
|
<script type="text/javascript">
|
||||||
<script src="${sockjs}"></script>
|
|
||||||
<script src="${stomp}"></script>
|
var stompClient = null;
|
||||||
|
|
||||||
<script type="text/javascript">
|
function setConnected(connected) {
|
||||||
|
|
||||||
var stompClient = null;
|
document.getElementById('connect').disabled = connected;
|
||||||
|
document.getElementById('disconnect').disabled = !connected;
|
||||||
function setConnected(connected) {
|
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
|
||||||
|
document.getElementById('response').innerHTML = '';
|
||||||
document.getElementById('connect').disabled = connected;
|
}
|
||||||
document.getElementById('disconnect').disabled = !connected;
|
|
||||||
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
|
function connect() {
|
||||||
document.getElementById('response').innerHTML = '';
|
|
||||||
}
|
var socket = new SockJS('/spring-mvc-java/chat');
|
||||||
|
stompClient = Stomp.over(socket);
|
||||||
function connect() {
|
|
||||||
|
stompClient.connect({}, function(frame) {
|
||||||
var socket = new SockJS('/spring-mvc-java/chat');
|
|
||||||
stompClient = Stomp.over(socket);
|
setConnected(true);
|
||||||
|
console.log('Connected: ' + frame);
|
||||||
stompClient.connect({}, function(frame) {
|
stompClient.subscribe('/topic/messages', function(messageOutput) {
|
||||||
|
|
||||||
setConnected(true);
|
showMessageOutput(JSON.parse(messageOutput.body));
|
||||||
console.log('Connected: ' + frame);
|
});
|
||||||
stompClient.subscribe('/topic/message', function(messageOutput) {
|
});
|
||||||
showMessageOutput(JSON.parse(messageOutput.body));
|
}
|
||||||
});
|
|
||||||
});
|
function disconnect() {
|
||||||
}
|
|
||||||
|
if(stompClient != null) {
|
||||||
function disconnect() {
|
stompClient.disconnect();
|
||||||
|
}
|
||||||
if(stompClient != null) {
|
|
||||||
stompClient.disconnect();
|
setConnected(false);
|
||||||
}
|
console.log("Disconnected");
|
||||||
|
}
|
||||||
setConnected(false);
|
|
||||||
console.log("Disconnected");
|
function sendMessage() {
|
||||||
}
|
|
||||||
|
var text = document.getElementById('text').value;
|
||||||
function sendMessage() {
|
stompClient.send("/app/chat", {}, JSON.stringify({ 'text': text }));
|
||||||
|
}
|
||||||
var text = document.getElementById('text').value;
|
|
||||||
stompClient.send("/app/chat", {}, JSON.stringify({ 'text': text }));
|
function showMessageOutput(messageOutput) {
|
||||||
}
|
|
||||||
|
var response = document.getElementById('response');
|
||||||
function showMessageOutput(messageOutput) {
|
var p = document.createElement('p');
|
||||||
|
p.style.wordWrap = 'break-word';
|
||||||
var response = document.getElementById('response');
|
p.appendChild(document.createTextNode(messageOutput.time + ": " + messageOutput.text));
|
||||||
var p = document.createElement('p');
|
response.appendChild(p);
|
||||||
p.style.wordWrap = 'break-word';
|
}
|
||||||
p.appendChild(document.createTextNode(messageOutput.time + ": " + messageOutput.text));
|
|
||||||
response.appendChild(p);
|
</script>
|
||||||
}
|
|
||||||
|
</head>
|
||||||
</script>
|
|
||||||
|
<body onload="disconnect()">
|
||||||
</head>
|
|
||||||
|
<div>
|
||||||
<body onload="disconnect()">
|
<div>
|
||||||
|
<button id="connect" onclick="connect();">Connect</button>
|
||||||
<div>
|
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
|
||||||
<div>
|
</div>
|
||||||
<button id="connect" onclick="connect();">Connect</button>
|
<br />
|
||||||
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
|
<div id="conversationDiv">
|
||||||
</div>
|
<input type="text" id="text" placeholder="Write a message..."/>
|
||||||
<br />
|
<button id="sendMessage" onclick="sendMessage();">Send</button>
|
||||||
<div id="conversationDiv">
|
<p id="response"></p>
|
||||||
<input type="text" id="text" placeholder="Write a message..."/>
|
</div>
|
||||||
<button id="sendMessage" onclick="sendMessage();">Send</button>
|
</div>
|
||||||
<p id="response"></p>
|
|
||||||
</div>
|
</body>
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue