I’ve made simple real time chat application however when I run the application everything seems fine.
After the typing and sending the message , it is reflecting in the console tab but not reflected in chat application also getting exception as:
org.springframework.messaging.converter.MessageConversionException:
I am unable to solve this error. Please help.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Real Time Chat Application</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<h1 class="text-center">Real-Time Chat Application</h1>
<div id="chat" class="border rounded p-3 mb-3"
style="height: 300px; overflow-y: auto;"></div>
<div class="input-group mb-3">
<input type="text" id="senderInput" class="form-control"
placeholder="Your Name...">
</div>
<div class="input-group mb-3">
<input type="text" id="messageInput" class="form-control"
placeholder="Type Message...">
<div id="input-group-append">
<button id="sendMessage" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script>
function setConnected(connected) {
document.getElementById("sendMessage").disabled = !connected;
}
function connect() {
let socket = new SockJS('/chat');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
stompClient.subscribe('topic/messages', function(message) {
showMessage(JSON.parse(message.body));
});
});
}
function showMessage(message){
let chat=document.getElementById('chat');
let messageElement=document.createElement('div');
messageElement.textContent=message.sender+':'+ message.content;
messageElement.class="border-bottom mb-1";
chat.scrollTop=chat.scrollHeight;
}
function sendMessage(){
let sender=document.getElementById('senderInput').value;
let content=document.getElementById('messageInput').value;
let chatMessage={
sender:sender,
content:content
}
stompClient.send("/app/sendMessage",{},JSON.stringify(chatMessage));
document.getElementById('messageInput').value='';
}
document.getElementById('sendMessage').onclick=sendMessage;
window.onload=connect;
</script>
</html>
//Controller class code
package com.chat.main.controller;
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.GetMapping;
import com.chat.main.model.ChatMessage;
@Controller
public class ChatController {
@MessageMapping("/sendMessage")
@SendTo("/topic/messages")
public ChatMessage sendMessage(ChatMessage message) {
return message;
}
@GetMapping("/chat")
public String chat() {
return "chat";
}
}
//Websocket configuration code
package com.chat.main.config;
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 registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat")
.setAllowedOrigins("http://localhost:8080")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
}````
[Exception][1] [1]: https://i.sstatic.net/TpsFv1dJ.png
[Chat application][2][2]: https://i.sstatic.net/i4D42Dj8.png
[Controller] [3]: https://i.sstatic.net/cWFH5vlg.png
[Websocket Configuration][4][4]: https://i.sstatic.net/UzIro8ED.png