I am working on an anonymous chat application where users can chat without signup when you are entering the chatroom all users of that chatroom can see your messages in real time.
here is a code:
package com.chat.controllers;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.chat.models.Message;
@RestController
public class MessageController {
/*
* URLS TO CONNECT
* to connect server : /chatapp-server1
* to send messages : /app/message to
* subscibe topic : /topic/return-to
*
*/
@MessageMapping("/message")
@SendTo("/topic/return-to")
public Message getContent(@RequestBody Message message) {
return message;
}
}
package com.chat.models;
import java.sql.Timestamp;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Message {
private String name;
private String content;
private Timestamp time;
}
package com.chat.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 Config implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chatapp-server1").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
}
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<! —
https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket →
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<! — https://mvnrepository.com/artifact/org.webjars/webjars-locator →
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
<! — https://mvnrepository.com/artifact/org.webjars/sockjs-client →
<dependency>
<groupId>org.webjars</groupId>
<artifactId>sockjs-client</artifactId>
<version>1.0.2</version>
</dependency>
<! — https://mvnrepository.com/artifact/org.webjars/stomp-websocket →
<dependency>
<groupId>org.webjars</groupId>
<artifactId>stomp-websocket</artifactId>
<version>2.3.3</version>
</dependency>
<! — https://mvnrepository.com/artifact/org.webjars/bootstrap →
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.0.2</version>
</dependency>
<! — https://mvnrepository.com/artifact/org.webjars/jquery →
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1–1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
Frontend UI:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anonymous Chat App</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/script.js"></script>
</head>
<body class="bg-dark text-white">
<div id="name-form" class="login d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="heading text-center mb-5 mt-0">
<h2 > Welcome to Anonymous Chat Application</h2>
<p>please do not use your original name and other informations </p>
</div>
<div class="col-md-4 offset-md-4">
<div class="input-group">
<input type="text" placeholder="Enter your nickname to chat!!" id="name-value" autofocus class="form-control" required >
<div class="input-group">
<button class="btn btn-dark" id="login">login</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="chatroom" class="d-none">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card mt-3">
<div class="card-header">
<h3 id="name-title"> </h3>
</div>
<div class="card-body">
<div class="table-responsive mt-3">
<table id="message-container-tbl">
</table>
</div>
<div class="input-group">
<input type="text" placeholder="type here " id="message-value" autofocus class="form-control" required>
<div class="input-group-append">
<button class="btn btn-dark" id="send"> Send Message </button>
<button class="btn btn-dark" id="logout"> LogOut </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
#name-form {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#name-title {
color: white;
}
#send {
background: green;
}
#logout {
background: red;
}
#message-container-tbl {
border: none;
}
.card-header {
background: rgb(39, 38, 38);
}
.card-body {
background: rgb(39, 38, 38);
}
.card {
border: none;
}
.login {
background-image: linear-gradient(to top, #d16ba5, #ee7387, #f78969, #eba654, #cfc456, #b8d468, #9de282, #7eeea3, #70f2b8, #64f6cd, #5ef9e0, #5ffbf1);
}
#login {
background: #cd08eb;
margin-top: 15px;
margin-left: 45%;
border: none;
border-radius: 10px;
}
#name-value{
border-radius: 10px;
}
/* Responsive Styles */
@media only screen and (max-width: 768px) {
#login {
margin-left: 40%;
}
}
let stompClient = null;
function connect() {
let socket = new SockJS("/chatapp-server1");
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame){
console.log("Connected ", frame);
$("#name-form").addClass('d-none');
$("#chatroom").removeClass('d-none');
// subscribe messages
stompClient.subscribe("/topic/return-to", function(response){
showMessage(JSON.parse(response.body));
});
});
$('#name-value').val('');
}
function showMessage(message){
$("#message-container-tbl").prepend(`<tr><td><b>${message.name}: </b>${message.content}</td></tr>`);
}
function sendMessage(){
let jsonOb ={
name: localStorage.getItem("name"),
content: $("#message-value").val(),
time: new Date().toISOString()
};
stompClient.send("/app/message", {}, JSON.stringify(jsonOb));
$('#message-value').val('');
}
$(document).ready((e)=>{
$('#login').click(()=>{
let name = $('#name-value').val();
localStorage.setItem("name", name);
$("#name-title").html(`welcome, <b>${name}</b>`)
connect();
});
$("#send").click(()=>{
sendMessage();
});
$('#logout').click(()=>{
localStorage.removeItem("name");
if(stompClient!==null){
stompClient.disconnect();
$("#name-form").removeClass('d-none');
$("#chatroom").addClass('d-none');
console.log("Disconneted ", stompClient);
}
})
});