Hi everyone! Today, we are going to make a basic chat application using Spring Boot and React.js. We'll follow the steps assuming you're a complete beginner and only know the basics of Spring Boot and React.js. First, we’ll create a Spring Boot project. Go to the website https://start.spring.io/. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeieq9mzbohvp5ds6lot.PNG) Currently, I am using Java 17, so I have chosen Java 17 and selected Maven as the build tool. I’m adding some basic dependencies for now; we’ll add more as needed later. After setting everything up, click on "Generate" to download the file. Once it’s downloaded, extract it and open it in your editor. I’m going to use IntelliJ IDEA. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzvhieegcwm2usu0vxa5.PNG) Create the Following Packages 1. config 2. controller 3. dto 4. model 5. repository 6. service Create a User Entity inside model ``` import jakarta.persistence.*; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.userdetails.UserDetails; import java.util.Collection; import java.util.List; @Entity @Getter @Setter @NoArgsConstructor @AllArgsConstructor public class User implements UserDetails { @Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; private String name; private String email; @Column(unique = true) private String userName; private String password; @Override public Collection getAuthorities() { return List.of(); } @Override public String getUsername() { return userName; } } ``` I won’t go into detail about what's written here, but since we’ll be using JWT authentication, don’t forget to implement UserDetails. If you’re not familiar with authentication and authorization, you can refer to other blogs for a deeper understanding. After this, you will encounter an error because we haven’t added the Spring Security dependencies. Let’s add these dependencies first, and we will add more as we progress. ``` org.springframework.boot spring-boot-starter-security org.springframework.security spring-security-core 6.3.1 ``` Now Create Another entity MessageEntity as below ``` import jakarta.persistence.*; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import java.time.LocalDateTime; @Entity @Table(name = "messages") @Getter @Setter @AllArgsConstructor @NoArgsConstructor public class MessageEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "sender") private String sender; @Column(name = "receiver") private String receiver; @Column(name = "message") private String message; @Column(name = "timestamp") private LocalDateTime timestamp; } ``` So far, we have created two entities, but no tables have been created in the database yet. I’m using MySQL, but you can choose your preferred database and add dependencies accordingly. Now, it’s time to set up the application.properties file. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqnt5q9hzeg6ozy3vhly.PNG) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgiu1x1rdlqfx06xk0u.PNG) When you run your program in MySQL Workbench, two tables will be created as shown above. now we have created our entity now lets cerate controller to register and log in. so inside controller create a class name as AuthenticationController below ``` @RestController @CrossOrigin public class AuthenticationController { @Autowired private AuthenticationService authService; @PostMapping("/register") public ResponseEntity register( @RequestBody User request ) { return ResponseEntity.ok(authService.register(request)); } @PostMapping("/login") public ResponseEntity login( @RequestBody User request ) { return ResponseEntity.ok(authService.authenticate(request)); } ``` now we are going to see a lot of red flag here beacause we had not created repository and service class so lets create it but before this lets add some securityconfig inside config like this. ``` @Configuration @EnableWebSecurity public class SecurityConfig { @Autowired private UserService userService; @Autowired private JwtAuthenticationFilter jwtAuthenticationFilter; @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .csrf(AbstractHttpConfigurer::disable) .authorizeHttpRequests(auth -> auth .anyRequest().permitAll() ) .sessionManagement(session -> session .sessionCreationPolicy(SessionCreationPolicy.STATELESS) ) .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); return http.build(); } @Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } @Bean public AuthenticationManager authenticationManager(AuthenticationConfiguration configuration) throws Exception { return configuration.getAuthenticationManager(); } } ``` Now let's create the AuthenticationService and UserService. You may see some red flags because we are using certain elements in these services that we haven't implemented yet. Don't worry about that; we will cover them in detail later. AuthenticationService ``` @Service public class AuthenticationService { @Autowired private UserRepository repository; @Autowired private PasswordEncoder passwordEncoder; @Autowired private JwtService jwtService; @Autowired private AuthenticationManager authenticationManager; public AuthenticationResponse register(User request) { User user = new User(); user.setName(request.getName()); user.setPassword(passwordEncoder.encode(request.getPassword())); user.setUserName( request.getUsername()); user.setEmail(request.getEmail()); repository.save(user); String token = jwtService.generateToken(user); return new AuthenticationResponse(token); } public AuthenticationResponse authenticate(User request) { authenticationManager.authenticate( new UsernamePasswordAuthenticationToken( request.getUsername(), request.getPassword() ) ); User user= repository.findByUserName(request.getUsername()); String token=jwtService.generateToken(user); return new AuthenticationResponse(token); } } ``` UserService ``` @Repository public class UserService implements UserDetailsService { private final UserRepository userRepository; public UserService(UserRepository userRepository) { this.userRepository = userRepository; } public User addUser(User user) { userRepository.save(user); return user; } public List getUsers() { return userRepository.findAll(); } @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { return userRepository.findByUserName(username); } } ``` Now, since we have not created a repository yet, let's create one. By using a repository, we can manage the database. So, inside the repository package, create two repositories: UserRepository and MessageRepository. UserRepository ``` public interface UserRepository extends JpaRepository{ User findByUserName(String username); } ``` MessageRepository ``` public interface MessageRepository extends JpaRepository { @Query("SELECT m FROM MessageEntity m WHERE (m.sender = :sender AND m.receiver = :receiver) OR (m.sender = :receiver AND m.receiver = :sender)") List findMessages(@Param("sender") String sender, @Param("receiver") String receiver); } ``` Now, we've moved ahead, but since we're using JWT authentication and haven't implemented it yet, let's import the necessary dependencies and create a service and filter for it. We need to add some dependencies, so let's include them. ``` io.jsonwebtoken jjwt-api 0.11.5 io.jsonwebtoken jjwt-impl 0.11.5 io.jsonwebtoken jjwt-jackson 0.11.5 ``` now lets create jwtservice class ``` @Service public class JwtService { private final String Private_Key="4bb6d1dfbafb64a681139d1586b6f1160d18159afd57c8c79136d7490630407c"; public T extractClaim(String token, Function resolver) { Claims claims = extractAllClaims(token); System.out.println(claims); return resolver.apply(claims); } public String extractUsername(String token) { return extractClaim(token, Claims::getSubject); } public boolean isValid(String token, UserDetails user) { String username = extractUsername(token); return (username.equals(user.getUsername())) && !isTokenExpired(token); } private boolean isTokenExpired(String token) { return extractExpiration(token).before(new Date()); } private Date extractExpiration(String token) { return extractClaim(token, Claims::getExpiration); } private Claims extractAllClaims(String token) { return Jwts.parserBuilder() .setSigningKey(getSigninKey()) .build() .parseClaimsJws(token) .getBody(); } public String generateToken(User user) { String token = Jwts .builder() .setSubject(user.getUsername()) .claim("id", user.getId()) // Add user ID as a claim .claim("firstName", user.getName()) .setIssuedAt(new Date(System.currentTimeMillis())) .setExpiration(new Date(System.currentTimeMillis() + 24*60*60*1000 )) .signWith(getSigninKey()) .compact(); return token; } private Key getSigninKey() { byte[] keyBytes = Decoders.BASE64URL.decode(Private_Key); return Keys.hmacShaKeyFor(keyBytes); } } ``` now create jwt filter in starting i forget to create the filter package so lets first create that package and inside that create jwt filter with name JwtAuthenticationFilter ``` JwtAuthenticationFilter extends OncePerRequestFilter { private final JwtService jwtService; private final UserService userService; public JwtAuthenticationFilter(JwtService jwtService, UserService userService) { this.jwtService = jwtService; this.userService = userService; } @Override protected void doFilterInternal( @NonNull HttpServletRequest request, @NonNull HttpServletResponse response, @NonNull FilterChain filterChain) throws ServletException, IOException { String authHeader = request.getHeader("Authorization"); if(authHeader == null || !authHeader.startsWith("Bearer ")) { filterChain.doFilter(request,response); return; } String token = authHeader.substring(7); String username = jwtService.extractUsername(token); if(username != null && SecurityContextHolder.getContext().getAuthentication() == null) { UserDetails userDetails = userService.loadUserByUsername(username); if(jwtService.isValid(token, userDetails)) { UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken( userDetails, null, userDetails.getAuthorities() ); authToken.setDetails( new WebAuthenticationDetailsSource().buildDetails(request) ); SecurityContextHolder.getContext().setAuthentication(authToken); } } filterChain.doFilter(request, response); } ``` in AuthenticationController we are using AuthenticationResponse this is dto so lets create that also inside dto cerate this class ``` package com.example.Messenger.dto; public class AuthenticationResponse { private String token; public AuthenticationResponse(String token) { this.token = token; } public String getToken() { return token; } } ``` So, we have mostly completed our main agenda, but it is still missing. Let's move forward with it, but before that, let's add the WebSocket dependency ``` org.springframework.boot spring-boot-starter-websocket ``` ater adding we have to configure the reduied congifartion for using this so lets add inside config lets add ``` @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { // Enable CORS for WebSocket connections registry.addEndpoint("/ws") .setAllowedOrigins("http://localhost:3000") .withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } } ``` "I will explain everything separately, but currently, our main focus is on building the application. I will add some links at the end which will explain everything in more detail ``` @Slf4j @RestController @CrossOrigin(origins = "http://localhost:3000") public class ChatController { @Autowired private MessageRepository messageRepository; @Autowired private SimpMessagingTemplate messagingTemplate; // Add this line @MessageMapping("/chat") public void sendMessage(MessageEntity message) { message.setTimestamp(LocalDateTime.now()); messageRepository.save(message); log.info(" I am inside send message"); log.error("something wrong"); // Send message to both sender and receiver messagingTemplate.convertAndSend("/topic/messages/" + message.getReceiver(), message); messagingTemplate.convertAndSend("/topic/messages/" + message.getSender(), message); } @GetMapping("/api/messages") public List getMessages( @RequestParam String sender, @RequestParam String receiver) { return messageRepository.findMessages(sender, receiver); } } ``` We are done with the backend part, so let's focus on the frontend. If you are familiar with React.js, that's great! If not, you should first learn the basics of React.js. Let's get started with React.js. 1. Open VS Code. 2. Create a React application named chatapplicationfrontend (you can give it any name of your choice). 3. After creating the application, we will import some extra dependencies like react-router and socket.io-client. ``` npm install react-router-dom npm install react-use-websocket ``` Now, remove all the unnecessary things from App.js and add the routes, so that when a user visits a particular route, they are directed to the correct page. ``` import './App.css'; import Users from './Users'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import LoginPage from './LoginPage'; function App() { return ( } /> }/> ); } export default App; ``` lets create LoginPage.js and LoginPage.css like this ``` import React, { useState } from 'react'; import './LoginPage.css'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; function LoginPage() { const [userName, setUserName] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const nav=useNavigate(); const handleLogin = async () => { try { const response = await axios.post('http://localhost:8080/login', { userName, password, }); if (response.data.token) { // Save the JWT token in local storage localStorage.setItem('token', response.data.token); console.log('Login successful. Token saved to local storage.'); nav('/users'); } else { setError('Login failed: Token not received.'); } } catch (error) { setError('Login failed: Invalid credentials or server error.'); console.error(error); } }; return (

Login

{error &&

{error}

}

Username: setUserName(e.target.value)} />

Password: setPassword(e.target.value)} />

); } export default LoginPage; ``` ``` .login-container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } h2 { margin-bottom: 20px; } .input-container { width: 300px; margin-bottom: 15px; } .input-container label { display: block; margin-bottom: 5px; font-weight: bold; } .input-container input { width: 100%; padding: 8px; margin-top: 5px; border-radius: 4px; border: 1px solid #ccc; } .login-button { width: 300px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .login-button:hover { background-color: #45a049; } ``` When you log in successfully, we want to show all the users present in the database except the current user. Let's add a Users.js page ``` import axios from 'axios'; import React, { useEffect, useState } from 'react'; import Chat from './Chat'; import { jwtDecode } from 'jwt-decode'; // Ensure this is the correct path to your Chat component const Users = () => { const [users, setUsers] = useState([]); const [loggedInUserId, setLoggedInUserId] = useState(null); const [selectedUser, setSelectedUser] = useState(null); // State to store selected user for chat useEffect(() => { // Decode the JWT token to get the logged-in user's ID const token = localStorage.getItem('token'); if (token) { const decodedToken = jwtDecode(token); setLoggedInUserId(decodedToken.sub); // Assuming 'sub' holds the user ID } // Fetch all users axios.get('http://localhost:8080/user') .then((response) => { setUsers(response.data); }) .catch((error) => console.error(error)); }, []); return (

{selectedUser ? ( setSelectedUser(null)} /> ) : (

{users .filter((person) => person.username !== loggedInUserId) // Exclude the logged-in user .map((person) => (

{person.name}

{/* Set selected user on button click */}

))}

)}

); }; export default Users; ``` so finally lets make chat Chat.js and understand everything ``` import React, { useState, useEffect, useRef } from 'react'; import SockJS from 'sockjs-client'; import { jwtDecode } from 'jwt-decode'; import { Stomp } from '@stomp/stompjs'; import './Chat.css'; // Import the external CSS file const Chat = ({ user, onBack }) => { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const stompClientRef = useRef(null); const [currUser, setCurrUser] = useState(""); // Decode JWT to get current user username useEffect(() => { const token = localStorage.getItem("token"); if (token) { try { const decoded = jwtDecode(token); setCurrUser(decoded.sub); // Assuming the username is stored in 'sub' } catch (error) { console.error("Error decoding token:", error); } } }, []); // Fetch previous messages between currUser and user useEffect(() => { const fetchMessages = async () => { if (currUser && user.username) { try { const response = await fetch(`http://localhost:8080/api/messages?sender=${currUser}&receiver=${user.username}`); if (!response.ok) throw new Error('Failed to fetch messages'); const data = await response.json(); const sortedMessages = data.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)); setMessages(sortedMessages); } catch (error) { console.error('Error fetching messages:', error); } } }; fetchMessages(); }, [currUser, user]); // WebSocket connection setup useEffect(() => { const connect = () => { console.log("trying to Connect"); const socket = new SockJS('http://localhost:8080/ws'); const stompClient = Stomp.over(socket); stompClientRef.current = stompClient; stompClient.connect({}, () => { console.log('Connected to WebSocket'); // Subscribe to messages for the current user stompClient.subscribe(`/topic/messages/${currUser}`, (message) => { const receivedMessage = JSON.parse(message.body); console.log('Received message:', receivedMessage); // Check if the message is between the current user and the user const isValidMessage = (receivedMessage.receiver === currUser && receivedMessage.sender === user.username) || (receivedMessage.sender === currUser && receivedMessage.receiver === user.username); if (isValidMessage) { setMessages(prevMessages => { const exists = prevMessages.some(msg => msg.id === receivedMessage.id); return exists ? prevMessages : [...prevMessages, receivedMessage]; // Avoid duplicates }); } }); }, (error) => { console.error('WebSocket connection error:', error); }); }; if (currUser && user) { connect(); } // Cleanup on component unmount return () => { if (stompClientRef.current) { stompClientRef.current.disconnect(() => { console.log('Disconnected from WebSocket'); }); } }; }, [currUser, user]); // Handle sending messages const handleSend = () => { if (newMessage.trim() === "") return; const messageObject = { id: Date.now(), // Generate a temporary ID based on timestamp sender: currUser, receiver: user.username, message: newMessage, timestamp: new Date().toISOString() }; if (stompClientRef.current && stompClientRef.current.connected) { stompClientRef.current.send('/app/chat', {}, JSON.stringify(messageObject)); console.log('Sent message:', messageObject); setMessages(prevMessages => { const exists = prevMessages.some(msg => msg.timestamp === messageObject.timestamp); return exists ? prevMessages : [...prevMessages, messageObject]; // Avoid duplicates }); setNewMessage(""); // Clear input field } else { console.error('STOMP client is not connected'); } }; return (

Chat with {user.userName}

{messages.map((message, index) => (

{message.sender}: {message.message}

{new Date(message.timestamp).toLocaleTimeString()}

))}

setNewMessage(e.target.value)} />

); }; export default Chat; ``` lets understand by breaking our code ``` import React, { useState, useEffect, useRef } from 'react'; import SockJS from 'sockjs-client'; import { jwtDecode } from 'jwt-decode'; import { Stomp } from '@stomp/stompjs'; import './Chat.css'; // Import the external CSS file ``` React: For building the component. useState, useEffect, useRef: React hooks for managing state, side effects, and references. SockJS: A client-side library that provides WebSocket-like communication (used when WebSockets are not available). jwt-decode: A library to decode JWT tokens. Stomp.js: A JavaScript client for STOMP (Simple Text Oriented Messaging Protocol), which is used for WebSocket communication. Chat.css: External CSS file for styling the chat component. ``` const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const stompClientRef = useRef(null); const [currUser, setCurrUser] = useState(""); ``` messages: Holds an array of messages to display in the chat. newMessage: Holds the value of the new message being typed by the user. stompClientRef: A reference to the STOMP WebSocket client instance. currUser: Holds the username of the current logged-in user. ``` useEffect(() => { const token = localStorage.getItem("token"); if (token) { try { const decoded = jwtDecode(token); setCurrUser(decoded.sub); // Assuming the username is stored in 'sub' } catch (error) { console.error("Error decoding token:", error); } } }, []); ``` This useEffect hook runs once when the component mounts and decodes the JWT token from localStorage. It extracts the username (sub field) from the decoded token and stores it in currUser. ``` useEffect(() => { const fetchMessages = async () => { console.log("i am doing"); if (currUser && user.username) { console.log("i am inside"); try { const response = await fetch(`http://localhost:8080/api/messages?sender=${currUser}&receiver=${user.username}`); if (!response.ok) throw new Error('Failed to fetch messages'); const data = await response.json(); const sortedMessages = data.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)); setMessages(sortedMessages); } catch (error) { console.error('Error fetching messages:', error); } } }; fetchMessages(); }, [currUser, user]); ``` This useEffect fetches previous messages between the current user (currUser) and the selected user (user.username) from an API. It sorts the fetched messages by timestamp and stores them in the messages state. This hook runs whenever currUser or user changes. ``` useEffect(() => { const connect = () => { console.log("trying to Connect"); const socket = new SockJS('http://localhost:8080/ws'); const stompClient = Stomp.over(socket); stompClientRef.current = stompClient; stompClient.connect({}, () => { console.log('Connected to WebSocket'); // Subscribe to messages for the current user stompClient.subscribe(`/topic/messages/${currUser}`, (message) => { const receivedMessage = JSON.parse(message.body); console.log('Received message:', receivedMessage); // Check if the message is between the current user and the user const isValidMessage = (receivedMessage.receiver === currUser && receivedMessage.sender === user.username) || (receivedMessage.sender === currUser && receivedMessage.receiver === user.username); if (isValidMessage) { setMessages(prevMessages => { const exists = prevMessages.some(msg => msg.id === receivedMessage.id); return exists ? prevMessages : [...prevMessages, receivedMessage]; // Avoid duplicates }); } }); }, (error) => { console.error('WebSocket connection error:', error); }); }; if (currUser && user) { connect(); } // Cleanup on component unmount return () => { if (stompClientRef.current) { stompClientRef.current.disconnect(() => { console.log('Disconnected from WebSocket'); }); } }; }, [currUser, user]); ``` This useEffect sets up a WebSocket connection using SockJS and STOMP. When the connection is established, it subscribes to a topic (/topic/messages/{currUser}) to receive messages for the current user. Whenever a new message is received, it checks if the message is between the current user and the selected user (user.username), and if so, adds it to the messages state. The stompClientRef is used to manage the STOMP client instance. ``` const handleSend = () => { if (newMessage.trim() === "") return; const messageObject = { id: Date.now(), // Generate a temporary ID based on timestamp sender: currUser, receiver: user.username, message: newMessage, timestamp: new Date().toISOString() }; if (stompClientRef.current && stompClientRef.current.connected) { stompClientRef.current.send('/app/chat', {}, JSON.stringify(messageObject)); console.log('Sent message:', messageObject); setMessages(prevMessages => { const exists = prevMessages.some(msg => msg.timestamp === messageObject.timestamp); return exists ? prevMessages : [...prevMessages, messageObject]; // Avoid duplicates }); setNewMessage(""); // Clear input field } else { console.error('STOMP client is not connected'); } }; ``` This function handles sending a message. It creates a messageObject with the necessary properties, such as the sender, receiver, message text, and timestamp. It then sends the message via STOMP if the WebSocket connection is active. After sending the message, it adds the new message to the messages state and clears the input field. ``` return (

Chat with {user.userName}

{messages.map((message, index) => (

{message.sender}: {message.message}

{new Date(message.timestamp).toLocaleTimeString()}

))}

setNewMessage(e.target.value)} />

); ``` The chat-screen displays the chat interface, which includes: A Back button that triggers the onBack function (likely to go back to the previous screen). A list of messages (chat-messages), where each message is displayed with the sender's name and the message content. An input field to type new messages, and a Send button to send the message. The messages are dynamically rendered using .map(), and the message sender is styled differently (me vs. them) for visual distinction. Now we are done Just add Css and enjoy chatting ``` /* Chat screen container */ .chat-screen { display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f9f9f9; font-family: Arial, sans-serif; height: 100vh; box-sizing: border-box; } /* Back button */ .back-button { align-self: flex-start; margin-bottom: 20px; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .back-button:hover { background-color: #0056b3; } /* Chat header */ h2 { margin: 0; margin-bottom: 20px; color: #333; } /* Chat messages container */ .chat-messages { width: 100%; max-width: 600px; height: 400px; overflow-y: scroll; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Individual messages */ .message { margin-bottom: 10px; padding: 5px; border-radius: 4px; font-size: 14px; } .message.me { background-color: #d1e7dd; align-self: flex-end; } .message.them { background-color: #f8d7da; align-self: flex-start; } /* Timestamp for messages */ .message div { font-size: 12px; color: gray; text-align: right; } /* Chat input container */ .chat-input { display: flex; width: 100%; max-width: 600px; align-items: center; gap: 10px; } /* Input field */ .chat-input input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } /* Send button */ .chat-input button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .chat-input button:hover { background-color: #0056b3; } ```

himanshu_singh_0e86632da5

Chat Application with Spring boot And React JS

Join Our Newsletter. No Spam, Only the good stuff.