Building Real-Time Chat Room with Spring Boot WebSocket

 1Frontend Layer (Client)
 2├── WebSocket Client (Browser)
 3├── SockJS (Fallback Support)
 4├── STOMP.js (Protocol Implementation)
 5├── HTML5/CSS3/JavaScript
 6└── Real-time DOM Updates
 7
 8Backend Services (Server)
 9├── Spring Boot 3.0.12
10├── Spring WebSocket
11├── STOMP Message Broker
12├── WebSocket Session Management
13├── Message Broadcasting Service
14└── Redis Cluster Integration
15
16Communication Protocol
17├── WebSocket (Primary Transport)
18├── STOMP (Message Protocol)
19├── SockJS (Fallback Transports)
20├── Long Polling (Degraded Mode)
21└── HTTP Streaming (Alternative)
22
23Infrastructure & Scaling
24├── Redis Cluster (Message Distribution)
25├── Load Balancers (Connection Distribution)
26├── Session Affinity (Sticky Sessions)
27├── Docker Containerization
28└── Horizontal Scaling Support

 1@Configuration
 2@EnableWebSocket
 3@EnableWebSocketMessageBroker
 4public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 5
 6    @Override
 7    public void configureMessageBroker(MessageBrokerRegistry config) {
 8        // Enable simple in-memory message broker
 9        config.enableSimpleBroker("/topic");
10
11        // Set application destination prefix
12        config.setApplicationDestinationPrefixes("/app");
13
14        // Configure user destination prefix for private messages
15        config.setUserDestinationPrefix("/user");
16    }
17
18    @Override
19    public void registerStompEndpoints(StompEndpointRegistry registry) {
20        // Register STOMP endpoint with SockJS fallback
21        registry.addEndpoint("/ws")
22                .setAllowedOriginPatterns("*")
23                .withSockJS()
24                .setHeartbeatTime(25000)  // Keep connection alive
25                .setDisconnectDelay(30000); // Graceful disconnect timeout
26    }
27
28    @Override
29    public void configureClientInboundChannel(ChannelRegistration registration) {
30        // Configure thread pool for incoming messages
31        registration.taskExecutor()
32                   .corePoolSize(8)
33                   .maxPoolSize(16)
34                   .queueCapacity(100);
35    }
36}

  1@Controller
  2public class ChatController {
  3
  4    private static final Logger logger = LoggerFactory.getLogger(ChatController.class);
  5
  6    @Autowired
  7    private SimpMessagingTemplate messagingTemplate;
  8
  9    @Autowired
 10    private RedisTemplate<String, Object> redisTemplate;
 11
 12    /**
 13     * Handle incoming chat messages
 14     */
 15    @MessageMapping("/chat.send")
 16    @SendTo("/topic/public")
 17    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
 18        try {
 19            // Validate and sanitize message content
 20            if (chatMessage.getContent() == null || chatMessage.getContent().trim().isEmpty()) {
 21                logger.warn("Empty message received from user: {}", chatMessage.getSender());
 22                return null;
 23            }
 24
 25            // Set server timestamp
 26            chatMessage.setTimestamp(LocalDateTime.now());
 27
 28            // Sanitize HTML content to prevent XSS
 29            chatMessage.setContent(sanitizeContent(chatMessage.getContent()));
 30
 31            // Store message history (optional)
 32            storeMessageHistory(chatMessage);
 33
 34            // Publish to Redis for cluster distribution
 35            publishToCluster(chatMessage);
 36
 37            logger.info("Message sent from {} to public channel", chatMessage.getSender());
 38            return chatMessage;
 39
 40        } catch (Exception e) {
 41            logger.error("Error processing message from {}: {}",
 42                        chatMessage.getSender(), e.getMessage());
 43            return createErrorMessage("Failed to send message");
 44        }
 45    }
 46
 47    /**
 48     * Handle user join events
 49     */
 50    @MessageMapping("/chat.addUser")
 51    @SendTo("/topic/public")
 52    public ChatMessage addUser(@Payload ChatMessage chatMessage,
 53                              SimpMessageHeaderAccessor headerAccessor) {
 54        try {
 55            // Add username to WebSocket session
 56            headerAccessor.getSessionAttributes()
 57                         .put("username", chatMessage.getSender());
 58
 59            // Create join notification
 60            ChatMessage joinMessage = new ChatMessage();
 61            joinMessage.setType(MessageType.JOIN);
 62            joinMessage.setSender(chatMessage.getSender());
 63            joinMessage.setContent(chatMessage.getSender() + " joined the chat!");
 64            joinMessage.setTimestamp(LocalDateTime.now());
 65
 66            // Update online user count
 67            updateOnlineUserCount(1);
 68
 69            // Broadcast user list update
 70            broadcastUserListUpdate();
 71
 72            logger.info("User {} joined the chat", chatMessage.getSender());
 73            return joinMessage;
 74
 75        } catch (Exception e) {
 76            logger.error("Error adding user {}: {}",
 77                        chatMessage.getSender(), e.getMessage());
 78            return null;
 79        }
 80    }
 81
 82    /**
 83     * Handle typing indicator events
 84     */
 85    @MessageMapping("/chat.typing")
 86    public void handleTyping(@Payload TypingIndicator typingIndicator) {
 87        try {
 88            // Broadcast typing status to all users except sender
 89            messagingTemplate.convertAndSend("/topic/typing", typingIndicator);
 90
 91            logger.debug("Typing indicator from {}: {}",
 92                        typingIndicator.getUsername(), typingIndicator.isTyping());
 93
 94        } catch (Exception e) {
 95            logger.error("Error handling typing indicator: {}", e.getMessage());
 96        }
 97    }
 98
 99    /**
100     * Sanitize message content to prevent XSS attacks
101     */
102    private String sanitizeContent(String content) {
103        return content.replaceAll("<script[^>]*>.*?</script>", "")
104                     .replaceAll("<[^>]+>", "")
105                     .trim();
106    }
107
108    /**
109     * Store message in database for history
110     */
111    private void storeMessageHistory(ChatMessage message) {
112        try {
113            // Implementation depends on chosen persistence layer
114            // Could use JPA, MongoDB, or Redis for message storage
115            String key = "chat:history:" + LocalDate.now().toString();
116            redisTemplate.opsForList().rightPush(key, message);
117
118            // Set expiration for message history (e.g., 30 days)
119            redisTemplate.expire(key, Duration.ofDays(30));
120
121        } catch (Exception e) {
122            logger.error("Failed to store message history: {}", e.getMessage());
123        }
124    }
125
126    /**
127     * Publish message to Redis for cluster distribution
128     */
129    private void publishToCluster(ChatMessage message) {
130        try {
131            redisTemplate.convertAndSend("chat:messages", message);
132        } catch (Exception e) {
133            logger.error("Failed to publish message to cluster: {}", e.getMessage());
134        }
135    }
136
137    /**
138     * Update and broadcast online user count
139     */
140    private void updateOnlineUserCount(int delta) {
141        try {
142            Long userCount = redisTemplate.opsForValue()
143                                        .increment("chat:users:online", delta);
144
145            UserCountUpdate countUpdate = new UserCountUpdate(userCount.intValue());
146            messagingTemplate.convertAndSend("/topic/usercount", countUpdate);
147
148        } catch (Exception e) {
149            logger.error("Failed to update user count: {}", e.getMessage());
150        }
151    }
152
153    /**
154     * Broadcast current user list to all connected clients
155     */
156    private void broadcastUserListUpdate() {
157        try {
158            // Get current online users from Redis
159            Set<Object> onlineUsers = redisTemplate.opsForSet().members("chat:users:list");
160
161            UserListUpdate update = new UserListUpdate(
162                onlineUsers.stream()
163                          .map(Object::toString)
164                          .collect(Collectors.toList())
165            );
166
167            messagingTemplate.convertAndSend("/topic/userlist", update);
168
169        } catch (Exception e) {
170            logger.error("Failed to broadcast user list: {}", e.getMessage());
171        }
172    }
173
174    private ChatMessage createErrorMessage(String error) {
175        ChatMessage errorMessage = new ChatMessage();
176        errorMessage.setType(MessageType.ERROR);
177        errorMessage.setContent(error);
178        errorMessage.setTimestamp(LocalDateTime.now());
179        return errorMessage;
180    }
181}

  1@Component
  2public class WebSocketEventListener {
  3
  4    private static final Logger logger = LoggerFactory.getLogger(WebSocketEventListener.class);
  5
  6    @Autowired
  7    private SimpMessagingTemplate messagingTemplate;
  8
  9    @Autowired
 10    private RedisTemplate<String, Object> redisTemplate;
 11
 12    /**
 13     * Handle user disconnect events
 14     */
 15    @EventListener
 16    public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) {
 17        try {
 18            StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());
 19            String username = (String) headerAccessor.getSessionAttributes().get("username");
 20
 21            if (username != null) {
 22                logger.info("User {} disconnected from chat", username);
 23
 24                // Remove user from online list
 25                redisTemplate.opsForSet().remove("chat:users:list", username);
 26
 27                // Create leave notification
 28                ChatMessage leaveMessage = new ChatMessage();
 29                leaveMessage.setType(MessageType.LEAVE);
 30                leaveMessage.setSender(username);
 31                leaveMessage.setContent(username + " left the chat!");
 32                leaveMessage.setTimestamp(LocalDateTime.now());
 33
 34                // Broadcast leave notification
 35                messagingTemplate.convertAndSend("/topic/public", leaveMessage);
 36
 37                // Update online user count
 38                updateOnlineUserCount(-1);
 39
 40                // Broadcast updated user list
 41                broadcastUserListUpdate();
 42
 43                // Clean up user-specific data
 44                cleanupUserSession(username);
 45            }
 46
 47        } catch (Exception e) {
 48            logger.error("Error handling user disconnect: {}", e.getMessage());
 49        }
 50    }
 51
 52    /**
 53     * Handle successful WebSocket connections
 54     */
 55    @EventListener
 56    public void handleWebSocketConnectListener(SessionConnectEvent event) {
 57        try {
 58            StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());
 59            String sessionId = headerAccessor.getSessionId();
 60
 61            logger.info("New WebSocket connection established: {}", sessionId);
 62
 63            // Initialize session-specific data
 64            initializeSession(sessionId);
 65
 66        } catch (Exception e) {
 67            logger.error("Error handling WebSocket connection: {}", e.getMessage());
 68        }
 69    }
 70
 71    /**
 72     * Handle subscription events
 73     */
 74    @EventListener
 75    public void handleSubscribeEvent(SessionSubscribeEvent event) {
 76        try {
 77            StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());
 78            String destination = headerAccessor.getDestination();
 79            String sessionId = headerAccessor.getSessionId();
 80
 81            logger.debug("User subscribed to {}: {}", destination, sessionId);
 82
 83            // Track subscriptions for analytics
 84            trackSubscription(sessionId, destination);
 85
 86        } catch (Exception e) {
 87            logger.error("Error handling subscription event: {}", e.getMessage());
 88        }
 89    }
 90
 91    private void updateOnlineUserCount(int delta) {
 92        try {
 93            Long userCount = redisTemplate.opsForValue()
 94                                        .increment("chat:users:online", delta);
 95
 96            UserCountUpdate countUpdate = new UserCountUpdate(userCount.intValue());
 97            messagingTemplate.convertAndSend("/topic/usercount", countUpdate);
 98
 99        } catch (Exception e) {
100            logger.error("Failed to update user count: {}", e.getMessage());
101        }
102    }
103
104    private void broadcastUserListUpdate() {
105        try {
106            Set<Object> onlineUsers = redisTemplate.opsForSet().members("chat:users:list");
107
108            UserListUpdate update = new UserListUpdate(
109                onlineUsers.stream()
110                          .map(Object::toString)
111                          .collect(Collectors.toList())
112            );
113
114            messagingTemplate.convertAndSend("/topic/userlist", update);
115
116        } catch (Exception e) {
117            logger.error("Failed to broadcast user list: {}", e.getMessage());
118        }
119    }
120
121    private void cleanupUserSession(String username) {
122        try {
123            // Remove typing indicators
124            redisTemplate.delete("typing:" + username);
125
126            // Clean up any user-specific temporary data
127            redisTemplate.delete("session:" + username);
128
129            logger.debug("Cleaned up session data for user: {}", username);
130
131        } catch (Exception e) {
132            logger.error("Failed to cleanup session for user {}: {}", username, e.getMessage());
133        }
134    }
135
136    private void initializeSession(String sessionId) {
137        try {
138            // Store session creation time
139            redisTemplate.opsForValue().set("session:" + sessionId,
140                                           LocalDateTime.now().toString(),
141                                           Duration.ofHours(24));
142
143        } catch (Exception e) {
144            logger.error("Failed to initialize session {}: {}", sessionId, e.getMessage());
145        }
146    }
147
148    private void trackSubscription(String sessionId, String destination) {
149        try {
150            String key = "analytics:subscriptions:" + LocalDate.now().toString();
151            redisTemplate.opsForHash().increment(key, destination, 1);
152            redisTemplate.expire(key, Duration.ofDays(7));
153
154        } catch (Exception e) {
155            logger.error("Failed to track subscription: {}", e.getMessage());
156        }
157    }
158}

  1@Configuration
  2@EnableConfigurationProperties(RedisProperties.class)
  3public class RedisConfig {
  4
  5    @Autowired
  6    private RedisProperties redisProperties;
  7
  8    /**
  9     * Redis connection factory for cluster deployment
 10     */
 11    @Bean
 12    @ConditionalOnProperty(name = "spring.redis.cluster.nodes")
 13    public LettuceConnectionFactory redisConnectionFactory() {
 14        RedisClusterConfiguration clusterConfig = new RedisClusterConfiguration(
 15            redisProperties.getCluster().getNodes()
 16        );
 17
 18        clusterConfig.setMaxRedirects(redisProperties.getCluster().getMaxRedirects());
 19
 20        LettuceClientConfiguration clientConfig = LettuceClientConfiguration.builder()
 21            .commandTimeout(Duration.ofMillis(redisProperties.getTimeout().toMillis()))
 22            .shutdownTimeout(Duration.ofMillis(100))
 23            .build();
 24
 25        return new LettuceConnectionFactory(clusterConfig, clientConfig);
 26    }
 27
 28    /**
 29     * Redis template for message serialization
 30     */
 31    @Bean
 32    public RedisTemplate<String, Object> redisTemplate(LettuceConnectionFactory connectionFactory) {
 33        RedisTemplate<String, Object> template = new RedisTemplate<>();
 34        template.setConnectionFactory(connectionFactory);
 35
 36        // JSON serialization for complex objects
 37        Jackson2JsonRedisSerializer<Object> jackson2JsonRedisSerializer =
 38            new Jackson2JsonRedisSerializer<>(Object.class);
 39
 40        ObjectMapper objectMapper = new ObjectMapper();
 41        objectMapper.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
 42        objectMapper.activateDefaultTyping(LaissezFaireSubTypeValidator.instance,
 43                                          ObjectMapper.DefaultTyping.NON_FINAL);
 44        jackson2JsonRedisSerializer.setObjectMapper(objectMapper);
 45
 46        // Set serializers
 47        template.setDefaultSerializer(jackson2JsonRedisSerializer);
 48        template.setKeySerializer(new StringRedisSerializer());
 49        template.setValueSerializer(jackson2JsonRedisSerializer);
 50        template.setHashKeySerializer(new StringRedisSerializer());
 51        template.setHashValueSerializer(jackson2JsonRedisSerializer);
 52
 53        template.afterPropertiesSet();
 54        return template;
 55    }
 56
 57    /**
 58     * Redis message listener container for cluster communication
 59     */
 60    @Bean
 61    public RedisMessageListenerContainer redisMessageListenerContainer(
 62            LettuceConnectionFactory connectionFactory,
 63            MessageListener messageListener) {
 64
 65        RedisMessageListenerContainer container = new RedisMessageListenerContainer();
 66        container.setConnectionFactory(connectionFactory);
 67
 68        // Subscribe to cluster message topics
 69        container.addMessageListener(messageListener,
 70                                   new PatternTopic("chat:messages"));
 71        container.addMessageListener(messageListener,
 72                                   new PatternTopic("chat:events"));
 73
 74        // Configure task executor
 75        SimpleAsyncTaskExecutor executor = new SimpleAsyncTaskExecutor();
 76        executor.setConcurrencyLimit(10);
 77        container.setTaskExecutor(executor);
 78
 79        return container;
 80    }
 81
 82    /**
 83     * Message listener for handling cluster events
 84     */
 85    @Bean
 86    public MessageListener messageListener(SimpMessagingTemplate messagingTemplate) {
 87        return new MessageListener() {
 88            private final ObjectMapper objectMapper = new ObjectMapper();
 89            private final Logger logger = LoggerFactory.getLogger(MessageListener.class);
 90
 91            @Override
 92            public void onMessage(Message message, byte[] pattern) {
 93                try {
 94                    String channel = new String(pattern);
 95                    String messageBody = new String(message.getBody());
 96
 97                    logger.debug("Received cluster message on channel: {}", channel);
 98
 99                    if (channel.equals("chat:messages")) {
100                        ChatMessage chatMessage = objectMapper.readValue(messageBody, ChatMessage.class);
101                        messagingTemplate.convertAndSend("/topic/public", chatMessage);
102                    } else if (channel.equals("chat:events")) {
103                        ChatEvent chatEvent = objectMapper.readValue(messageBody, ChatEvent.class);
104                        handleChatEvent(chatEvent, messagingTemplate);
105                    }
106
107                } catch (Exception e) {
108                    logger.error("Error processing cluster message: {}", e.getMessage());
109                }
110            }
111        };
112    }
113
114    private void handleChatEvent(ChatEvent event, SimpMessagingTemplate messagingTemplate) {
115        switch (event.getType()) {
116            case USER_JOIN:
117                messagingTemplate.convertAndSend("/topic/userlist", event.getData());
118                break;
119            case USER_LEAVE:
120                messagingTemplate.convertAndSend("/topic/userlist", event.getData());
121                break;
122            case TYPING_START:
123            case TYPING_STOP:
124                messagingTemplate.convertAndSend("/topic/typing", event.getData());
125                break;
126        }
127    }
128}

  1class ChatApplication {
  2    constructor() {
  3        this.stompClient = null;
  4        this.username = null;
  5        this.connected = false;
  6        this.messageQueue = [];
  7        this.reconnectAttempts = 0;
  8        this.maxReconnectAttempts = 5;
  9        this.typingTimer = null;
 10        this.heartbeatInterval = null;
 11
 12        this.initializeEventListeners();
 13    }
 14
 15    /**
 16     * Initialize WebSocket connection
 17     */
 18    connect() {
 19        if (this.username && this.username.trim() !== '') {
 20            const socket = new SockJS('/ws', null, {
 21                transports: ['websocket', 'xhr-streaming', 'xhr-polling'],
 22                timeout: 10000,
 23                heartbeat_delay: 10000
 24            });
 25
 26            this.stompClient = Stomp.over(socket);
 27
 28            // Disable debug logging in production
 29            this.stompClient.debug = (str) => {
 30                console.log('STOMP: ' + str);
 31            };
 32
 33            const connectHeaders = {
 34                'X-Username': this.username,
 35                'X-Client-Version': '1.0.0'
 36            };
 37
 38            this.stompClient.connect(connectHeaders,
 39                this.onConnected.bind(this),
 40                this.onError.bind(this)
 41            );
 42
 43        } else {
 44            this.showError('Username is required');
 45        }
 46    }
 47
 48    /**
 49     * Handle successful connection
 50     */
 51    onConnected() {
 52        console.log('Connected to WebSocket server');
 53        this.connected = true;
 54        this.reconnectAttempts = 0;
 55
 56        // Subscribe to public messages
 57        this.stompClient.subscribe('/topic/public', this.onMessageReceived.bind(this));
 58
 59        // Subscribe to user list updates
 60        this.stompClient.subscribe('/topic/userlist', this.onUserListUpdate.bind(this));
 61
 62        // Subscribe to user count updates
 63        this.stompClient.subscribe('/topic/usercount', this.onUserCountUpdate.bind(this));
 64
 65        // Subscribe to typing indicators
 66        this.stompClient.subscribe('/topic/typing', this.onTypingIndicator.bind(this));
 67
 68        // Send join notification
 69        this.stompClient.send("/app/chat.addUser", {},
 70            JSON.stringify({
 71                sender: this.username,
 72                type: 'JOIN'
 73            })
 74        );
 75
 76        // Process queued messages
 77        this.processMessageQueue();
 78
 79        // Start heartbeat
 80        this.startHeartbeat();
 81
 82        // Update UI
 83        this.updateConnectionStatus('Connected');
 84        this.showChatInterface();
 85    }
 86
 87    /**
 88     * Handle connection errors
 89     */
 90    onError(error) {
 91        console.error('WebSocket connection error:', error);
 92        this.connected = false;
 93
 94        this.updateConnectionStatus('Disconnected');
 95
 96        // Attempt reconnection
 97        if (this.reconnectAttempts < this.maxReconnectAttempts) {
 98            this.reconnectAttempts++;
 99            const delay = Math.pow(2, this.reconnectAttempts) * 1000; // Exponential backoff
100
101            console.log(`Attempting reconnection ${this.reconnectAttempts}/${this.maxReconnectAttempts} in ${delay}ms`);
102
103            setTimeout(() => {
104                this.connect();
105            }, delay);
106        } else {
107            this.showError('Unable to connect to chat server. Please refresh the page.');
108        }
109    }
110
111    /**
112     * Send chat message
113     */
114    sendMessage() {
115        const messageInput = document.getElementById('messageInput');
116        const messageContent = messageInput.value.trim();
117
118        if (messageContent === '') {
119            return;
120        }
121
122        if (!this.connected) {
123            // Queue message for later sending
124            this.messageQueue.push(messageContent);
125            this.showWarning('Message queued. Attempting to reconnect...');
126            this.connect();
127            return;
128        }
129
130        const chatMessage = {
131            sender: this.username,
132            content: messageContent,
133            type: 'CHAT',
134            timestamp: new Date().toISOString()
135        };
136
137        try {
138            this.stompClient.send("/app/chat.send", {}, JSON.stringify(chatMessage));
139            messageInput.value = '';
140
141            // Stop typing indicator
142            this.sendTypingIndicator(false);
143
144        } catch (error) {
145            console.error('Failed to send message:', error);
146            this.showError('Failed to send message');
147        }
148    }
149
150    /**
151     * Handle incoming messages
152     */
153    onMessageReceived(payload) {
154        try {
155            const message = JSON.parse(payload.body);
156
157            switch (message.type) {
158                case 'CHAT':
159                    this.displayChatMessage(message);
160                    break;
161                case 'JOIN':
162                    this.displaySystemMessage(message.content, 'user-join');
163                    this.playNotificationSound('join');
164                    break;
165                case 'LEAVE':
166                    this.displaySystemMessage(message.content, 'user-leave');
167                    this.playNotificationSound('leave');
168                    break;
169                case 'ERROR':
170                    this.showError(message.content);
171                    break;
172            }
173
174            // Scroll to bottom
175            this.scrollToBottom();
176
177            // Update last activity timestamp
178            this.updateLastActivity();
179
180        } catch (error) {
181            console.error('Error processing received message:', error);
182        }
183    }
184
185    /**
186     * Display chat message in UI
187     */
188    displayChatMessage(message) {
189        const messageArea = document.getElementById('messageArea');
190        const messageElement = document.createElement('div');
191        messageElement.className = 'message-item';
192
193        const isOwnMessage = message.sender === this.username;
194        messageElement.classList.add(isOwnMessage ? 'own-message' : 'other-message');
195
196        const timestamp = new Date(message.timestamp).toLocaleTimeString([], {
197            hour: '2-digit',
198            minute: '2-digit'
199        });
200
201        messageElement.innerHTML = `
202            <div class="message-header">
203                <span class="message-sender">${this.escapeHtml(message.sender)}</span>
204                <span class="message-timestamp">${timestamp}</span>
205            </div>
206            <div class="message-content">${this.escapeHtml(message.content)}</div>
207        `;
208
209        messageArea.appendChild(messageElement);
210
211        // Add animation
212        messageElement.classList.add('message-appear');
213    }
214
215    /**
216     * Handle typing indicators
217     */
218    onTypingIndicator(payload) {
219        try {
220            const typingData = JSON.parse(payload.body);
221
222            if (typingData.username !== this.username) {
223                this.updateTypingIndicator(typingData.username, typingData.isTyping);
224            }
225
226        } catch (error) {
227            console.error('Error processing typing indicator:', error);
228        }
229    }
230
231    /**
232     * Send typing indicator
233     */
234    sendTypingIndicator(isTyping) {
235        if (this.connected) {
236            const typingData = {
237                username: this.username,
238                isTyping: isTyping
239            };
240
241            this.stompClient.send("/app/chat.typing", {}, JSON.stringify(typingData));
242        }
243    }
244
245    /**
246     * Handle message input events
247     */
248    handleMessageInput() {
249        // Send typing indicator
250        if (!this.typingTimer) {
251            this.sendTypingIndicator(true);
252        }
253
254        // Clear existing timer
255        clearTimeout(this.typingTimer);
256
257        // Set timer to stop typing indicator
258        this.typingTimer = setTimeout(() => {
259            this.sendTypingIndicator(false);
260            this.typingTimer = null;
261        }, 2000);
262    }
263
264    /**
265     * Update typing indicator display
266     */
267    updateTypingIndicator(username, isTyping) {
268        const typingIndicator = document.getElementById('typingIndicator');
269
270        if (isTyping) {
271            typingIndicator.innerHTML = `
272                <div class="typing-indicator">
273                    <span>${this.escapeHtml(username)} is typing</span>
274                    <div class="typing-dots">
275                        <span></span><span></span><span></span>
276                    </div>
277                </div>
278            `;
279            typingIndicator.style.display = 'block';
280        } else {
281            typingIndicator.style.display = 'none';
282        }
283    }
284
285    /**
286     * Process queued messages after reconnection
287     */
288    processMessageQueue() {
289        while (this.messageQueue.length > 0 && this.connected) {
290            const messageContent = this.messageQueue.shift();
291            const chatMessage = {
292                sender: this.username,
293                content: messageContent,
294                type: 'CHAT',
295                timestamp: new Date().toISOString()
296            };
297
298            this.stompClient.send("/app/chat.send", {}, JSON.stringify(chatMessage));
299        }
300    }
301
302    /**
303     * Start heartbeat to keep connection alive
304     */
305    startHeartbeat() {
306        this.heartbeatInterval = setInterval(() => {
307            if (this.connected && this.stompClient) {
308                // Send ping frame
309                this.stompClient.send("/app/chat.ping", {}, JSON.stringify({
310                    type: 'PING',
311                    timestamp: new Date().toISOString()
312                }));
313            }
314        }, 30000); // 30 seconds
315    }
316
317    /**
318     * Disconnect from WebSocket
319     */
320    disconnect() {
321        if (this.stompClient !== null) {
322            this.stompClient.disconnect(() => {
323                console.log('Disconnected from WebSocket server');
324            });
325        }
326
327        this.connected = false;
328
329        // Clear intervals
330        if (this.heartbeatInterval) {
331            clearInterval(this.heartbeatInterval);
332        }
333
334        if (this.typingTimer) {
335            clearTimeout(this.typingTimer);
336        }
337
338        this.updateConnectionStatus('Disconnected');
339    }
340
341    /**
342     * Initialize event listeners
343     */
344    initializeEventListeners() {
345        // Username form submission
346        document.getElementById('usernameForm')?.addEventListener('submit', (e) => {
347            e.preventDefault();
348            const usernameInput = document.getElementById('usernameInput');
349            this.username = usernameInput.value.trim();
350            this.connect();
351        });
352
353        // Message form submission
354        document.getElementById('messageForm')?.addEventListener('submit', (e) => {
355            e.preventDefault();
356            this.sendMessage();
357        });
358
359        // Message input typing events
360        document.getElementById('messageInput')?.addEventListener('input', () => {
361            this.handleMessageInput();
362        });
363
364        // Handle page visibility changes
365        document.addEventListener('visibilitychange', () => {
366            if (document.hidden) {
367                // Page is hidden, reduce activity
368                if (this.heartbeatInterval) {
369                    clearInterval(this.heartbeatInterval);
370                }
371            } else {
372                // Page is visible, resume activity
373                this.startHeartbeat();
374            }
375        });
376
377        // Handle beforeunload for graceful disconnect
378        window.addEventListener('beforeunload', () => {
379            this.disconnect();
380        });
381    }
382
383    /**
384     * Utility function to escape HTML
385     */
386    escapeHtml(text) {
387        const div = document.createElement('div');
388        div.textContent = text;
389        return div.innerHTML;
390    }
391
392    /**
393     * Show error message
394     */
395    showError(message) {
396        console.error(message);
397        // Implementation depends on UI framework
398        this.showNotification(message, 'error');
399    }
400
401    /**
402     * Show warning message
403     */
404    showWarning(message) {
405        console.warn(message);
406        this.showNotification(message, 'warning');
407    }
408
409    /**
410     * Show notification
411     */
412    showNotification(message, type) {
413        const notification = document.createElement('div');
414        notification.className = `notification notification-${type}`;
415        notification.textContent = message;
416
417        document.body.appendChild(notification);
418
419        // Auto-remove after 5 seconds
420        setTimeout(() => {
421            notification.remove();
422        }, 5000);
423    }
424
425    /**
426     * Update connection status display
427     */
428    updateConnectionStatus(status) {
429        const statusElement = document.getElementById('connectionStatus');
430        if (statusElement) {
431            statusElement.textContent = status;
432            statusElement.className = `status status-${status.toLowerCase()}`;
433        }
434    }
435
436    /**
437     * Show chat interface
438     */
439    showChatInterface() {
440        document.getElementById('usernameInterface')?.style.setProperty('display', 'none');
441        document.getElementById('chatInterface')?.style.setProperty('display', 'block');
442    }
443
444    /**
445     * Scroll message area to bottom
446     */
447    scrollToBottom() {
448        const messageArea = document.getElementById('messageArea');
449        messageArea.scrollTop = messageArea.scrollHeight;
450    }
451}
452
453// Initialize chat application when DOM is loaded
454document.addEventListener('DOMContentLoaded', () => {
455    window.chatApp = new ChatApplication();
456});