Real-Time Chat Application with Vue and WebSockets

This challenge tasks you with building a simple real-time chat application using Vue.js and WebSockets. Real-time communication is crucial for many modern applications, and understanding how to implement it with WebSockets and a frontend framework like Vue is a valuable skill. You'll be creating a server and a client-side Vue application that allows users to send and receive messages instantly.

Problem Description

You need to create a Vue.js application that connects to a WebSocket server and allows users to send and receive chat messages. The application should have the following features:

• Message Input: A text input field where users can type their messages.
• Send Button: A button to send the message to the server.
• Message Display: A display area that shows all the messages received from the server, including messages sent by the user.
• Connection Status: A visual indicator (e.g., a text label) showing whether the WebSocket connection is open, closed, or in a connecting state.
• Error Handling: Gracefully handle WebSocket connection errors and display appropriate messages to the user.

The WebSocket server will be a simple Node.js server (you don't need to build this, it's assumed to be running and accessible). The server will broadcast any received message to all connected clients.

Key Requirements:

• Use Vue.js 3 with TypeScript.
• Implement WebSocket connection management within the Vue component.
• Handle incoming messages from the server and update the message display accordingly.
• Handle sending messages to the server.
• Provide clear visual feedback on the connection status.
• Implement error handling for WebSocket connection issues.

Expected Behavior:

1. When the Vue application loads, it should attempt to connect to the WebSocket server (default URL: ws://localhost:8080).
2. Upon successful connection, the connection status should update to "Connected."
3. When a user types a message and clicks "Send," the message should be sent to the server.
4. The server will broadcast the message to all connected clients.
5. The Vue application should receive the broadcast message and display it in the message display area.
6. If the WebSocket connection is closed or encounters an error, the connection status should update to "Disconnected" or an appropriate error message.
7. The application should attempt to reconnect automatically after a disconnection (with a reasonable delay, e.g., 5 seconds).

Edge Cases to Consider:

• Server is unavailable or unreachable.
• Network connectivity issues.
• User rapidly sending messages.
• Large number of messages in the chat history.
• Unexpected data format from the server.

Examples

Example 1:

Input: User types "Hello!" and clicks Send. Server receives "Hello!" and broadcasts it.
Output: The message "Hello!" appears in the message display area for all connected clients.
Explanation: The Vue component sends the message to the server via the WebSocket connection. The server broadcasts the message, and the Vue component receives and displays it.

Example 2:

Input: WebSocket connection is lost.
Output: The connection status changes to "Disconnected" and an error message is displayed. The application attempts to reconnect after 5 seconds.
Explanation: The Vue component detects the connection closure and updates the UI accordingly.  A reconnection attempt is initiated.

Example 3:

Input: Server sends a message with an unexpected format.
Output: The application logs the error to the console and continues to function, ignoring the malformed message. The connection status remains unchanged.
Explanation: The Vue component includes error handling to gracefully manage unexpected data from the server, preventing crashes and maintaining a stable user experience.

Constraints

• WebSocket URL: The default WebSocket URL is ws://localhost:8080. The application should be able to handle this URL.
• Reconnection Delay: The reconnection delay should be between 3 and 7 seconds.
• Message Length: Messages should be limited to a maximum length of 255 characters.
• Performance: The application should remain responsive even with a large number of messages (e.g., 100+). Consider using techniques like virtual scrolling if necessary.
• Dependencies: You are allowed to use Vue.js 3, TypeScript, and standard browser APIs. No external WebSocket libraries are required.

Notes

• Focus on the client-side Vue.js implementation. You do not need to build the WebSocket server. Assume it's already running and accessible.
• Consider using Vue's reactivity system to efficiently update the message display when new messages arrive.
• Think about how to handle different WebSocket events (e.g., open, close, message, error).
• Implement a clear and concise component structure to manage the WebSocket connection and message handling logic.
• Prioritize clean, readable, and well-documented code.
• Error handling is crucial for a robust application. Provide informative error messages to the user.