Real-Time Chat Application: Vue WebSocket Server

This challenge focuses on building a foundational real-time communication feature within a Vue.js application using WebSockets. You will create a simple chat server that allows multiple Vue clients to connect, send messages, and receive messages from other connected clients in real-time. This is a crucial skill for developing dynamic and interactive user experiences.

Problem Description

Your task is to implement a WebSocket server in TypeScript that integrates with a Vue.js frontend. This server will manage WebSocket connections from multiple clients, broadcast messages to all connected clients, and handle disconnections gracefully.

Key Requirements:

WebSocket Server Implementation: Create a TypeScript WebSocket server (you can choose a suitable Node.js WebSocket library like ws).
Connection Handling: The server should accept incoming WebSocket connections.
Message Broadcasting: When a message is received from any client, the server must broadcast that message to all other connected clients.
Disconnection Handling: The server should properly handle clients disconnecting.
Vue.js Client Integration: Develop a basic Vue.js component (using TypeScript) that connects to the WebSocket server, sends messages, and displays received messages.

Expected Behavior:

When the server starts, it should listen on a specified port for WebSocket connections.
When a Vue client connects, the server acknowledges the connection (optional, but good for debugging).
When a client sends a message (e.g., "Hello from client A"), the server should receive it and then send it to all other connected clients. The original sender should ideally not receive their own message back (unless explicitly designed to do so, which is not required for this basic implementation).
When a client disconnects, the server should remove it from its list of active connections.

Edge Cases to Consider:

Multiple simultaneous connections: The server should handle numerous clients connecting and disconnecting concurrently.
Empty messages: How should the server behave if it receives an empty message? (For this challenge, you can ignore empty messages or broadcast them as is).
Server restart: What happens to clients when the server restarts? (They will likely disconnect and need to re-establish connection).

Examples

Example 1: Basic Message Flow

Server (Conceptual):

Client A connects.
Client B connects.
Client A sends message: "Hello from A"
Server receives "Hello from A" from Client A.
Server broadcasts "Hello from A" to Client B.

Vue Client (Conceptual):

Displays received message: "Hello from A"

Example 2: Handling Disconnection

Server (Conceptual):

Client A connects.
Client B connects.
Client A disconnects.
Server detects Client A's disconnection and removes it.
Client B sends message: "Hi A, where did you go?"
Server receives "Hi A, where did you go?" from Client B.
Server attempts to broadcast to all currently connected clients (only Client B in this scenario). Since there are no other clients, the message is effectively dropped or handled according to your broadcasting logic (e.g., only broadcast to others). For this challenge, broadcasting to others means if there are no others, nothing is sent.

Vue Client (Conceptual):

The client that sent the message will not see it echoed back (unless your broadcast logic includes the sender).
If Client A were still connected, it would receive the message from Client B.

Example 3: Server Initialization

Server (Conceptual):

Server starts and logs: "WebSocket server started on ws://localhost:8080"
Server listens for connections.

Vue Client (Conceptual):

The Vue app attempts to establish a WebSocket connection to ws://localhost:8080.
Upon successful connection, the client might display a status message like "Connected to chat server."

Constraints

The WebSocket server must be implemented in TypeScript and run in a Node.js environment.
The Vue.js client must be implemented using TypeScript and the Vue 3 Composition API (or Options API, but Composition API is preferred for modern development).
The server should listen on ws://localhost:8080.
Your solution should be a self-contained project that can be run locally.
Performance is not a critical concern for this introductory challenge, but ensure your broadcasting mechanism is reasonably efficient for a small number of clients.

Notes

Consider using the ws library for your Node.js WebSocket server. It's popular and well-documented.
For the Vue.js client, you'll need to handle the WebSocket API within your TypeScript component.
Think about how you will maintain a list of connected WebSocket clients on the server-side.
The message format can be simple strings for this challenge. You don't need to implement complex JSON structures.
Success will be demonstrated by being able to connect multiple Vue clients to your running WebSocket server and see messages typed in one client appear in all other connected clients in real-time.

Real-Time Chat Application: Vue WebSocket Server

Problem Description

Key Requirements:

WebSocket Server Implementation: Create a TypeScript WebSocket server (you can choose a suitable Node.js WebSocket library like ws).
Connection Handling: The server should accept incoming WebSocket connections.
Message Broadcasting: When a message is received from any client, the server must broadcast that message to all other connected clients.
Disconnection Handling: The server should properly handle clients disconnecting.
Vue.js Client Integration: Develop a basic Vue.js component (using TypeScript) that connects to the WebSocket server, sends messages, and displays received messages.

Expected Behavior:

When the server starts, it should listen on a specified port for WebSocket connections.
When a Vue client connects, the server acknowledges the connection (optional, but good for debugging).
When a client sends a message (e.g., "Hello from client A"), the server should receive it and then send it to all other connected clients. The original sender should ideally not receive their own message back (unless explicitly designed to do so, which is not required for this basic implementation).
When a client disconnects, the server should remove it from its list of active connections.

Edge Cases to Consider:

Multiple simultaneous connections: The server should handle numerous clients connecting and disconnecting concurrently.
Empty messages: How should the server behave if it receives an empty message? (For this challenge, you can ignore empty messages or broadcast them as is).
Server restart: What happens to clients when the server restarts? (They will likely disconnect and need to re-establish connection).

Examples

Example 1: Basic Message Flow

Server (Conceptual):

Client A connects.
Client B connects.
Client A sends message: "Hello from A"
Server receives "Hello from A" from Client A.
Server broadcasts "Hello from A" to Client B.

Vue Client (Conceptual):

Displays received message: "Hello from A"

Example 2: Handling Disconnection

Server (Conceptual):

Client A connects.
Client B connects.
Client A disconnects.
Server detects Client A's disconnection and removes it.
Client B sends message: "Hi A, where did you go?"
Server receives "Hi A, where did you go?" from Client B.
Server attempts to broadcast to all currently connected clients (only Client B in this scenario). Since there are no other clients, the message is effectively dropped or handled according to your broadcasting logic (e.g., only broadcast to others). For this challenge, broadcasting to others means if there are no others, nothing is sent.

Vue Client (Conceptual):

The client that sent the message will not see it echoed back (unless your broadcast logic includes the sender).
If Client A were still connected, it would receive the message from Client B.

Example 3: Server Initialization

Server (Conceptual):

Server starts and logs: "WebSocket server started on ws://localhost:8080"
Server listens for connections.

Vue Client (Conceptual):

The Vue app attempts to establish a WebSocket connection to ws://localhost:8080.
Upon successful connection, the client might display a status message like "Connected to chat server."

Constraints

The WebSocket server must be implemented in TypeScript and run in a Node.js environment.
The Vue.js client must be implemented using TypeScript and the Vue 3 Composition API (or Options API, but Composition API is preferred for modern development).
The server should listen on ws://localhost:8080.
Your solution should be a self-contained project that can be run locally.
Performance is not a critical concern for this introductory challenge, but ensure your broadcasting mechanism is reasonably efficient for a small number of clients.

Notes

Consider using the ws library for your Node.js WebSocket server. It's popular and well-documented.
For the Vue.js client, you'll need to handle the WebSocket API within your TypeScript component.
Think about how you will maintain a list of connected WebSocket clients on the server-side.
The message format can be simple strings for this challenge. You don't need to implement complex JSON structures.
Success will be demonstrated by being able to connect multiple Vue clients to your running WebSocket server and see messages typed in one client appear in all other connected clients in real-time.