Я разработал небольшое приложение для чата с технологией websocket, но у меня небольшие проблемы с подключением браузера к серверу.
UPD 19:42 Я исправил проблему с подключением с использованием пропущенных JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
Но у меня новая проблема. Сообщения не отображаются на стороне клиентов ..
Индекс. jsp с JS:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Главная</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/style.css">
<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/chating', function(message){
showGreeting(JSON.parse(chating.body).content);
});
});
}
function disconnect() {
stompClient.disconnect();
setConnected(false);
console.log("Disconnected");
}
function sendMessage() {
var message = document.getElementById('message').value;
stompClient.send("/app/chat", {}, JSON.stringify(message));
}
function showMessage(message) {
var resp = document.getElementById('messages');
resp.value = resp.value + message.data + "\n";
}
</script>
</head>
<body>
<div class="center">
<div>
<sec:authorize access="!isAuthenticated()">
<a href="/login"><button>Войти</button></a>
<a href="/registration"><button>Зарегистрироваться</button></a>
</sec:authorize>
<sec:authorize access="isAuthenticated()">
<p>Привет, <b>${pageContext.request.userPrincipal.name}</b>!</p>
<a href="/logout"><button>Выйти</button></a>
<button id="connect" onclick="connect();">Соединение</button>
</sec:authorize>
</div>
<div id="chatbox">
<textarea id="messages" rows="20" cols="50" readonly="readonly"></textarea>
</div>
<sec:authorize access="isAuthenticated()">
<form name="message" action="">
<input name="usermsg" type="text" id="message" size="40"/>
<input type="button" name="submitmsg" value="Send..." onclick="sendMessage();"/>
</form>
</sec:authorize>
</div>
</body>
</html>
Класс контроллера сообщений
import avi.com.vk.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
@Controller
public class MessageController {
@MessageMapping("/chat")
@SendTo("topic/chating")
public Message message(String message) {
return new Message(message);
}
}
Класс конфигурации веб-сокета
package avi.com.vk.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(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
}
Ссылка для полного проекта на GitHub