Add websocket example

This commit is contained in:
Ivan Paolillo 2016-04-27 18:06:10 +02:00
parent 4d1dd06a26
commit 889b266107
2 changed files with 81 additions and 91 deletions

View File

@ -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());

View File

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