Кожні 2 секунди:
  Client → Server: GET /api/messages?since=1234567890
  Server → Client: 200 OK (порожній масив, якщо нових немає)

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

id: 1
event: message
data: {"user": "Alice", "text": "Привіт!"}

id: 2
event: message
data: {"user": "Bob", "text": "Привіт, Аліс!"}

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Origin: https://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+-------------------------------+
|     Extended payload length continued, if payload len == 127  |
+---------------------------------------------------------------+
|              Masking-key, if MASK set to 1                    |
+---------------------------------------------------------------+
|    Masking-key (cont.)    |          Payload Data             |
+---------------------------------------------------------------+
|                     Payload Data continued                    |
+---------------------------------------------------------------+

Запит браузера: Origin: https://evil.com
Сервер перевіряє: чи є evil.com у whitelist дозволених Origins?
Якщо ні → HTTP 403 Forbidden (відмовляємо у Upgrade)

dotnet new sln -n ChatDemo
dotnet new console -n ChatServer
dotnet new console -n ChatClient
dotnet sln add ChatServer ChatClient

namespace ChatServer.Models;

public record ChatMessage
{
    public required string Type { get; init; }   // "chat" | "private" | "system" | "users"
    public string? From { get; init; }
    public string? To { get; init; }
    public string? Text { get; init; }
    public List<string>? Users { get; init; }
    public DateTimeOffset Timestamp { get; init; } = DateTimeOffset.UtcNow;
}

using System.Collections.Concurrent;
using System.Net.WebSockets;
using System.Text;
using System.Text.Json;
using ChatServer.Models;

namespace ChatServer.Services;

public class ChatRoom
{
    private readonly ConcurrentDictionary<string, WebSocket> _connections = new();
    private static readonly JsonSerializerOptions JsonOptions = new()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    };

    public bool TryAddClient(string username, WebSocket socket)
        => _connections.TryAdd(username, socket);

    public void RemoveClient(string username)
        => _connections.TryRemove(username, out _);

    public IReadOnlyList<string> GetOnlineUsers()
        => [.. _connections.Keys];

    public async Task BroadcastAsync(ChatMessage message, string? excludeUsername = null)
    {
        byte[] bytes = Encoding.UTF8.GetBytes(
            JsonSerializer.Serialize(message, JsonOptions));
        ArraySegment<byte> segment = new(bytes);

        // Task.WhenAll — паралельне відправлення всім клієнтам одночасно
        var tasks = _connections
            .Where(kv => kv.Key != excludeUsername
                      && kv.Value.State == WebSocketState.Open)
            .Select(kv => SafeSendAsync(kv.Value, segment));

        await Task.WhenAll(tasks);
    }

    public async Task<bool> SendToUserAsync(string username, ChatMessage message)
    {
        if (!_connections.TryGetValue(username, out WebSocket? socket)
            || socket.State != WebSocketState.Open)
            return false;

        byte[] bytes = Encoding.UTF8.GetBytes(
            JsonSerializer.Serialize(message, JsonOptions));
        await SafeSendAsync(socket, new ArraySegment<byte>(bytes));
        return true;
    }

    // WebSocket.SendAsync не є thread-safe — використовуйте SemaphoreSlim
    // у продакшні для захисту від concurrent writes до одного сокету
    private static async Task SafeSendAsync(WebSocket socket, ArraySegment<byte> data)
    {
        try
        {
            await socket.SendAsync(data, WebSocketMessageType.Text,
                endOfMessage: true, CancellationToken.None);
        }
        catch (WebSocketException) { /* з'єднання вже закрито */ }
    }
}

using System.Net.WebSockets;
using System.Text;
using System.Text.Json;
using ChatServer.Models;
using ChatServer.Services;

namespace ChatServer.Handlers;

public class WebSocketHandler(ChatRoom room)
{
    private static readonly JsonSerializerOptions JsonOptions = new()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    };

    public async Task HandleAsync(WebSocket ws, string username,
        CancellationToken ct = default)
    {
        if (!room.TryAddClient(username, ws))
        {
            await ws.CloseAsync((WebSocketCloseStatus)4000,
                $"Username '{username}' is already taken", ct);
            return;
        }

        Console.WriteLine($"[+] {username} підключився. Онлайн: {room.GetOnlineUsers().Count}");

        // Сповіщаємо всіх про нового учасника
        await room.BroadcastAsync(new ChatMessage
        {
            Type = "system",
            Text = $"🟢 {username} приєднався до чату"
        }, excludeUsername: username);

        // Новому клієнту — список онлайн
        await room.SendToUserAsync(username, new ChatMessage
        {
            Type = "users",
            Users = [.. room.GetOnlineUsers()]
        });

        try { await ReceiveLoopAsync(ws, username, ct); }
        finally
        {
            room.RemoveClient(username);
            Console.WriteLine($"[-] {username} відключився");
            await room.BroadcastAsync(new ChatMessage
            {
                Type = "system",
                Text = $"🔴 {username} покинув чат"
            });
        }
    }

    private async Task ReceiveLoopAsync(WebSocket ws, string username,
        CancellationToken ct)
    {
        byte[] buffer = new byte[4096];

        while (ws.State == WebSocketState.Open && !ct.IsCancellationRequested)
        {
            using var ms = new MemoryStream();
            WebSocketReceiveResult result;

            // Збираємо фрагментоване повідомлення в єдиний MemoryStream
            do
            {
                result = await ws.ReceiveAsync(new ArraySegment<byte>(buffer), ct);

                if (result.MessageType == WebSocketMessageType.Close)
                {
                    await ws.CloseAsync(WebSocketCloseStatus.NormalClosure, "OK", ct);
                    return;
                }

                ms.Write(buffer, 0, result.Count);
            } while (!result.EndOfMessage);

            if (result.MessageType != WebSocketMessageType.Text) continue;

            await ProcessMessageAsync(username,
                Encoding.UTF8.GetString(ms.ToArray()));
        }
    }

    private async Task ProcessMessageAsync(string from, string json)
    {
        ChatMessage? msg;
        try { msg = JsonSerializer.Deserialize<ChatMessage>(json, JsonOptions); }
        catch { return; }
        if (msg is null) return;

        switch (msg.Type)
        {
            case "chat":
                await room.BroadcastAsync(new ChatMessage
                {
                    Type = "chat", From = from, Text = msg.Text
                });
                break;

            case "private" when msg.To is not null:
                var pm = new ChatMessage
                {
                    Type = "private", From = from, To = msg.To, Text = msg.Text
                };
                bool sent = await room.SendToUserAsync(msg.To, pm);
                // Відправляємо копію відправнику
                await room.SendToUserAsync(from, sent ? pm : new ChatMessage
                {
                    Type = "system",
                    Text = $"⚠️ {msg.To} не в мережі"
                });
                break;
        }
    }
}

using System.Net;
using System.Text;
using ChatServer.Handlers;
using ChatServer.Services;

// Ручна інстанціація залежностей (без DI-контейнера)
var chatRoom = new ChatRoom();

using var listener = new HttpListener();
listener.Prefixes.Add("http://localhost:5000/");
listener.Start();

Console.WriteLine("ChatServer запущено: http://localhost:5000");
Console.WriteLine("WebSocket endpoint: ws://localhost:5000/ws?user=<нікнейм>");
Console.WriteLine("Натисніть Ctrl+C для зупинки.");

using var cts = new CancellationTokenSource();
Console.CancelKeyPress += (_, e) => { e.Cancel = true; cts.Cancel(); };

try
{
    while (!cts.Token.IsCancellationRequested)
    {
        HttpListenerContext ctx = await listener.GetContextAsync();
        // Кожен запит обробляється в окремій Task, щоб не блокувати цикл
        _ = HandleRequestAsync(ctx, chatRoom, cts.Token);
    }
}
catch (HttpListenerException) when (cts.Token.IsCancellationRequested) { }
finally
{
    listener.Stop();
    Console.WriteLine("Сервер зупинено.");
}

// ─── Обробка запитів ────────────────────────────────────────────────────────
static async Task HandleRequestAsync(HttpListenerContext ctx, ChatRoom chatRoom,
    CancellationToken ct)
{
    string path = ctx.Request.Url?.AbsolutePath ?? "/";

    // WebSocket upgrade: GET /ws?user=<username>
    if (ctx.Request.IsWebSocketRequest && path == "/ws")
    {
        string? username = ctx.Request.QueryString["user"];
        if (string.IsNullOrWhiteSpace(username))
        {
            ctx.Response.StatusCode = 400;
            byte[] body = Encoding.UTF8.GetBytes("?user= required");
            await ctx.Response.OutputStream.WriteAsync(body, ct);
            ctx.Response.Close();
            return;
        }

        // AcceptWebSocketAsync → відповідає 101 Switching Protocols автоматично
        var wsCtx = await ctx.AcceptWebSocketAsync(subProtocol: null);
        var handler = new WebSocketHandler(chatRoom);
        await handler.HandleAsync(wsCtx.WebSocket, username, ct);
        return;
    }

    // Статичні файли: GET / або GET /index.html
    if (!ctx.Request.IsWebSocketRequest &&
        (path == "/" || path == "/index.html") &&
        ctx.Request.HttpMethod == "GET")
    {
        string filePath = Path.Combine(AppContext.BaseDirectory, "wwwroot", "index.html");
        if (File.Exists(filePath))
        {
            ctx.Response.StatusCode = 200;
            ctx.Response.ContentType = "text/html; charset=utf-8";
            byte[] content = await File.ReadAllBytesAsync(filePath, ct);
            ctx.Response.ContentLength64 = content.Length;
            await ctx.Response.OutputStream.WriteAsync(content, ct);
        }
        else
        {
            ctx.Response.StatusCode = 404;
        }
        ctx.Response.Close();
        return;
    }

    ctx.Response.StatusCode = 404;
    ctx.Response.Close();
}

using System.Net.WebSockets;
using System.Text;
using System.Text.Json;

Console.Write("Ваш нікнейм: ");
string username = Console.ReadLine()?.Trim() ?? "Anonymous";

// ClientWebSocket — нативний WS-клієнт .NET
// Виконує HTTP Upgrade Handshake автоматично при ConnectAsync
using var ws = new ClientWebSocket();

// Додаємо заголовок для ідентифікації клієнта (опціонально)
ws.Options.SetRequestHeader("X-Client-App", "ConsoleChat/1.0");

Uri serverUri = new($"ws://localhost:5000/ws?user={Uri.EscapeDataString(username)}");

try
{
    Console.WriteLine($"Підключення до {serverUri}...");
    await ws.ConnectAsync(serverUri, CancellationToken.None);
    Console.WriteLine("✅ Підключено! Введіть повідомлення (або /private <user> <text>):");
    Console.WriteLine("─────────────────────────────────────────");
}
catch (WebSocketException ex)
{
    Console.Error.WriteLine($"❌ Не вдалось підключитись: {ex.Message}");
    return;
}

using var cts = new CancellationTokenSource();

// Задача 1: отримання повідомлень від сервера (безперервно у фоні)
Task receiveTask = ReceiveLoopAsync(ws, cts.Token);

// Задача 2: читання введення користувача з консолі (головний потік)
Task inputTask = SendLoopAsync(ws, username, cts);

// Чекаємо завершення будь-якої з задач
// (або розрив з'єднання, або Ctrl+C від користувача)
await Task.WhenAny(receiveTask, inputTask);

// Коректне закриття: сигналізуємо скасування другій задачі
cts.Cancel();

if (ws.State == WebSocketState.Open)
{
    await ws.CloseAsync(WebSocketCloseStatus.NormalClosure,
        "Client closing", CancellationToken.None);
}

Console.WriteLine("\nВідключено. До побачення!");

// ─── Методи ────────────────────────────────────────────────────────────

static async Task ReceiveLoopAsync(ClientWebSocket ws, CancellationToken ct)
{
    byte[] buffer = new byte[8192];
    var jsonOptions = new JsonSerializerOptions
    {
        PropertyNameCaseInsensitive = true
    };

    try
    {
        while (ws.State == WebSocketState.Open && !ct.IsCancellationRequested)
        {
            using var ms = new MemoryStream();
            WebSocketReceiveResult result;

            // Читаємо, поки не отримаємо повне повідомлення
            do
            {
                result = await ws.ReceiveAsync(new ArraySegment<byte>(buffer), ct);
                if (result.MessageType == WebSocketMessageType.Close) return;
                ms.Write(buffer, 0, result.Count);
            } while (!result.EndOfMessage);

            string json = Encoding.UTF8.GetString(ms.ToArray());

            // Десеріалізуємо та відображаємо відповідно до типу
            var msg = JsonSerializer.Deserialize<JsonElement>(json, jsonOptions);
            string type = msg.GetProperty("type").GetString() ?? "";

            // Зберігаємо поточний курсор і перемальовуємо повідомлення
            // вище рядка введення (спрощена версія без ncurses)
            Console.ForegroundColor = type switch
            {
                "system" => ConsoleColor.Yellow,
                "private" => ConsoleColor.Magenta,
                "users" => ConsoleColor.Cyan,
                _ => ConsoleColor.White
            };

            string displayText = type switch
            {
                "chat" => $"[{msg.TryGetProp("from")}]: {msg.TryGetProp("text")}",
                "private" => $"[🔒 {msg.TryGetProp("from")} → {msg.TryGetProp("to")}]: {msg.TryGetProp("text")}",
                "system" => $"  {msg.TryGetProp("text")}",
                "users" => $"  👥 Онлайн: {string.Join(", ", msg.GetProperty("users").EnumerateArray().Select(u => u.GetString()))}",
                _ => json
            };

            Console.WriteLine(displayText);
            Console.ResetColor();
        }
    }
    catch (OperationCanceledException) { }
    catch (WebSocketException ex)
    {
        Console.Error.WriteLine($"\n⚠️ З'єднання розірвано: {ex.Message}");
    }
}

static async Task SendLoopAsync(ClientWebSocket ws, string username,
    CancellationTokenSource cts)
{
    var jsonOptions = new JsonSerializerOptions
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    };

    while (!cts.Token.IsCancellationRequested && ws.State == WebSocketState.Open)
    {
        // Console.ReadLine() блокує — не підходить для async.
        // У реальному застосунку — використовуйте спеціалізовану TUI-бібліотеку.
        string? input = await Task.Run(() => Console.ReadLine(), cts.Token);
        if (input is null) break;
        input = input.Trim();
        if (string.IsNullOrEmpty(input)) continue;

        if (input == "/quit" || input == "/exit")
        {
            cts.Cancel();
            break;
        }

        // Формат приватного повідомлення: /private <username> <text>
        object message;
        if (input.StartsWith("/private "))
        {
            string[] parts = input[9..].Split(' ', 2);
            if (parts.Length < 2)
            {
                Console.WriteLine("Використання: /private <user> <text>");
                continue;
            }
            message = new { type = "private", to = parts[0], text = parts[1] };
        }
        else
        {
            message = new { type = "chat", text = input };
        }

        string json = JsonSerializer.Serialize(message, jsonOptions);
        byte[] bytes = Encoding.UTF8.GetBytes(json);

        await ws.SendAsync(new ArraySegment<byte>(bytes),
            WebSocketMessageType.Text, endOfMessage: true, cts.Token);
    }
}

// Extension method для зручного читання полів JsonElement
static class JsonElementExtensions
{
    public static string TryGetProp(this JsonElement el, string prop)
        => el.TryGetProperty(prop, out var val) ? val.GetString() ?? "" : "";
}

const ws = new WebSocket('ws://localhost:5000/ws?user=Alice');

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WebSocket Chat</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: #1a1a2e;
      color: #e0e0e0;
      height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    /* ── Заголовок ──────────────────────────────── */
    header {
      background: #16213e;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid #0f3460;
    }
    header h1 { font-size: 1.1rem; font-weight: 600; color: #e94560; }
    #status-badge {
      font-size: 0.75rem;
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 500;
    }
    .badge-connecting { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b55; }
    .badge-open       { background: #10b98122; color: #10b981; border: 1px solid #10b98155; }
    .badge-closed     { background: #ef444422; color: #ef4444; border: 1px solid #ef444455; }

    /* ── Основний layout ────────────────────────── */
    main {
      flex: 1;
      display: grid;
      grid-template-columns: 220px 1fr;
      overflow: hidden;
    }

    /* ── Бокова панель (онлайн-список) ─────────── */
    aside {
      background: #16213e;
      border-right: 1px solid #0f3460;
      padding: 16px;
      overflow-y: auto;
    }
    aside h2 { font-size: 0.75rem; text-transform: uppercase;
               letter-spacing: 0.1em; color: #64748b; margin-bottom: 10px; }
    #users-list { list-style: none; }
    #users-list li {
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #users-list li:hover { background: #0f3460; }
    #users-list li.me { color: #e94560; font-weight: 600; }
    #users-list li::before { content: '●'; font-size: 0.55rem; color: #10b981; }

    /* ── Область повідомлень ────────────────────── */
    .chat-area {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      scroll-behavior: smooth;
    }

    /* Базовий стиль повідомлення */
    .msg {
      max-width: 70%;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 0.9rem;
      line-height: 1.5;
      animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

    /* Чужі повідомлення — ліворуч */
    .msg-other {
      align-self: flex-start;
      background: #0f3460;
      border-bottom-left-radius: 4px;
    }
    /* Мої повідомлення — праворуч */
    .msg-mine {
      align-self: flex-end;
      background: #e94560;
      color: #fff;
      border-bottom-right-radius: 4px;
    }
    /* Приватні — фіолетові */
    .msg-private {
      align-self: flex-start;
      background: #4c1d95;
      border: 1px solid #7c3aed;
      border-bottom-left-radius: 4px;
    }
    .msg-private.msg-mine {
      align-self: flex-end;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 12px;
    }
    /* Системні — по центру */
    .msg-system {
      align-self: center;
      background: transparent;
      color: #64748b;
      font-size: 0.8rem;
      font-style: italic;
    }

    .msg-header {
      font-size: 0.72rem;
      font-weight: 600;
      margin-bottom: 2px;
      opacity: 0.8;
    }
    .msg-time {
      font-size: 0.68rem;
      opacity: 0.5;
      margin-top: 3px;
    }

    /* ── Поле введення ──────────────────────────── */
    .input-area {
      padding: 12px 16px;
      background: #16213e;
      border-top: 1px solid #0f3460;
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    .input-wrap {
      flex: 1;
      position: relative;
    }
    #private-target {
      font-size: 0.75rem;
      color: #7c3aed;
      padding: 2px 8px;
      margin-bottom: 4px;
      display: none;
      align-items: center;
      gap: 6px;
      background: #4c1d9520;
      border-radius: 4px;
    }
    #private-target.visible { display: flex; }
    #private-target button {
      background: none; border: none; color: #64748b;
      cursor: pointer; font-size: 0.8rem; padding: 0;
    }
    #msg-input {
      width: 100%;
      background: #0f3460;
      border: 1px solid #1e4080;
      color: #e0e0e0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 0.9rem;
      resize: none;
      min-height: 42px;
      max-height: 120px;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
    }
    #msg-input:focus { border-color: #e94560; }

    #send-btn {
      background: #e94560;
      color: white;
      border: none;
      border-radius: 10px;
      width: 42px;
      height: 42px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    #send-btn:hover { background: #c73652; }
    #send-btn:active { transform: scale(0.95); }
    #send-btn:disabled { background: #374151; cursor: not-allowed; }

    /* ── Вікно входу ────────────────────────────── */
    #login-overlay {
      position: fixed; inset: 0;
      background: #1a1a2eee;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      backdrop-filter: blur(4px);
    }
    .login-card {
      background: #16213e;
      border: 1px solid #0f3460;
      border-radius: 16px;
      padding: 32px;
      width: 320px;
      text-align: center;
    }
    .login-card h2 { color: #e94560; margin-bottom: 8px; }
    .login-card p { color: #64748b; font-size: 0.85rem; margin-bottom: 24px; }
    .login-card input {
      width: 100%;
      background: #0f3460;
      border: 1px solid #1e4080;
      color: #e0e0e0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 1rem;
      outline: none;
      margin-bottom: 14px;
      font-family: inherit;
    }
    .login-card input:focus { border-color: #e94560; }
    .login-card button {
      width: 100%;
      background: #e94560;
      color: white;
      border: none;
      border-radius: 10px;
      padding: 11px;
      font-size: 1rem;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.2s;
    }
    .login-card button:hover { background: #c73652; }
    #login-error { color: #f87171; font-size: 0.8rem; margin-top: 8px; }
  </style>
</head>
<body>

<!-- ── Вікно входу ──────────────────────────────────── -->
<div id="login-overlay">
  <div class="login-card">
    <h2>💬 WebSocket Chat</h2>
    <p>Введіть нікнейм для входу в кімнату</p>
    <input id="username-input" type="text" placeholder="Ваш нікнейм..."
           maxlength="20" autocomplete="off" />
    <button id="join-btn">Увійти</button>
    <div id="login-error"></div>
  </div>
</div>

<!-- ── Головний інтерфейс ──────────────────────────── -->
<header>
  <h1>💬 WebSocket Chat</h1>
  <span id="status-badge" class="badge-connecting">● Підключення...</span>
  <span id="my-name" style="margin-left:auto; color:#64748b; font-size:0.85rem"></span>
</header>

<main>
  <aside>
    <h2>🟢 Онлайн</h2>
    <ul id="users-list"></ul>
  </aside>

  <div class="chat-area">
    <div id="messages"></div>
    <div class="input-area">
      <div class="input-wrap">
        <div id="private-target">
          <span id="private-label">🔒 Приватно до: <strong></strong></span>
          <button id="cancel-private" title="Скасувати">✕</button>
        </div>
        <textarea id="msg-input" placeholder="Введіть повідомлення... (Enter — надіслати, Shift+Enter — новий рядок)"
                  rows="1"></textarea>
      </div>
      <button id="send-btn" disabled title="Надіслати">➤</button>
    </div>
  </div>
</main>

<script>
  // ── Стан застосунку ──────────────────────────────────
  let ws = null;
  let myUsername = '';
  let privateTarget = null; // username для приватного повідомлення або null

  const $ = id => document.getElementById(id);

  // ── Елементи DOM ─────────────────────────────────────
  const overlay     = $('login-overlay');
  const usernameIn  = $('username-input');
  const joinBtn     = $('join-btn');
  const loginError  = $('login-error');
  const statusBadge = $('status-badge');
  const myNameEl    = $('my-name');
  const messagesList = $('messages');
  const usersList   = $('users-list');
  const msgInput    = $('msg-input');
  const sendBtn     = $('send-btn');
  const privateDiv  = $('private-target');
  const privateLabel = $('private-label').querySelector('strong');

  // ── Підключення до сервера ───────────────────────────
  function connect(username) {
    myUsername = username;
    // Визначаємо URL: якщо HTTPS — використовуємо wss://, якщо HTTP — ws://
    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const url = `${protocol}//${location.host}/ws?user=${encodeURIComponent(username)}`;

    ws = new WebSocket(url);

    setStatus('connecting');

    // Підключення встановлено
    ws.onopen = () => {
      setStatus('open');
      sendBtn.disabled = false;
      overlay.style.display = 'none';
      myNameEl.textContent = `Ви: ${myUsername}`;
      addSystemMessage('✅ Підключено до чату');
    };

    // Отримано повідомлення від сервера
    ws.onmessage = (event) => {
      // event.data завжди рядок для Text frames
      let msg;
      try { msg = JSON.parse(event.data); }
      catch { return; }
      handleMessage(msg);
    };

    // Помилка (деталі не доступні з міркувань безпеки)
    ws.onerror = () => {
      addSystemMessage('⚠️ Помилка з\'єднання');
    };

    // Закриття з'єднання
    ws.onclose = (event) => {
      setStatus('closed');
      sendBtn.disabled = true;
      const reason = event.reason || 'невідома причина';
      // Код 4000 — ім'я зайняте (визначено у сервері)
      if (event.code === 4000) {
        loginError.textContent = `❌ Нікнейм "${username}" вже зайнятий`;
        overlay.style.display = 'flex';
      } else {
        addSystemMessage(`🔴 Відключено (код ${event.code}: ${reason})`);
      }
    };
  }

  // ── Обробка вхідних повідомлень ──────────────────────
  function handleMessage(msg) {
    switch (msg.type) {
      case 'chat':
        addChatMessage(msg.from, msg.text, msg.timestamp, false);
        break;

      case 'private':
        // msg.from: хто надіслав, msg.to: кому
        const isOutgoing = msg.from === myUsername;
        addPrivateMessage(msg.from, msg.to, msg.text, msg.timestamp, isOutgoing);
        break;

      case 'system':
        addSystemMessage(msg.text);
        break;

      case 'users':
        renderUsersList(msg.users);
        break;
    }
  }

  // ── Відображення повідомлень ─────────────────────────
  function addChatMessage(from, text, timestamp, isMine) {
    const isMineMsg = from === myUsername;
    const el = document.createElement('div');
    el.className = `msg ${isMineMsg ? 'msg-mine' : 'msg-other'}`;
    el.innerHTML = `
      ${!isMineMsg ? `<div class="msg-header">${escapeHtml(from)}</div>` : ''}
      <div>${escapeHtml(text).replace(/\n/g, '<br>')}</div>
      <div class="msg-time">${formatTime(timestamp)}</div>
    `;
    appendMessage(el);
  }

  function addPrivateMessage(from, to, text, timestamp, isOutgoing) {
    const el = document.createElement('div');
    el.className = `msg msg-private ${isOutgoing ? 'msg-mine' : ''}`;
    const label = isOutgoing
      ? `🔒 → ${escapeHtml(to)}`
      : `🔒 ${escapeHtml(from)}`;
    el.innerHTML = `
      <div class="msg-header">${label}</div>
      <div>${escapeHtml(text).replace(/\n/g, '<br>')}</div>
      <div class="msg-time">${formatTime(timestamp)}</div>
    `;
    appendMessage(el);
  }

  function addSystemMessage(text) {
    const el = document.createElement('div');
    el.className = 'msg msg-system';
    el.textContent = text;
    appendMessage(el);
  }

  function appendMessage(el) {
    messagesList.appendChild(el);
    // Автоскрол донизу
    messagesList.scrollTop = messagesList.scrollHeight;
  }

  // ── Список користувачів ──────────────────────────────
  function renderUsersList(users) {
    usersList.innerHTML = '';
    users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user;
      if (user === myUsername) li.classList.add('me');
      li.title = user === myUsername ? 'Це ви' : `Написати приватно ${user}`;
      if (user !== myUsername) {
        // Клік на користувача — переключаємо на приватний режим
        li.addEventListener('click', () => setPrivateTarget(user));
      }
      usersList.appendChild(li);
    });
  }

  // ── Приватний режим ──────────────────────────────────
  function setPrivateTarget(username) {
    privateTarget = username;
    privateLabel.textContent = username;
    privateDiv.classList.add('visible');
    msgInput.placeholder = `Приватне для ${username}...`;
    msgInput.focus();
  }

  $('cancel-private').addEventListener('click', () => {
    privateTarget = null;
    privateDiv.classList.remove('visible');
    msgInput.placeholder = 'Введіть повідомлення...';
  });

  // ── Відправлення повідомлення ────────────────────────
  function sendMessage() {
    const text = msgInput.value.trim();
    if (!text || !ws || ws.readyState !== WebSocket.OPEN) return;

    const payload = privateTarget
      ? { type: 'private', to: privateTarget, text }
      : { type: 'chat', text };

    // ws.send() — передає рядок як Text WebSocket frame
    ws.send(JSON.stringify(payload));
    msgInput.value = '';
    msgInput.style.height = 'auto';
  }

  // ── Обробники подій UI ───────────────────────────────
  joinBtn.addEventListener('click', () => {
    const username = usernameIn.value.trim();
    if (!username) { loginError.textContent = 'Введіть нікнейм'; return; }
    if (username.length > 20) { loginError.textContent = 'Максимум 20 символів'; return; }
    loginError.textContent = '';
    connect(username);
  });

  usernameIn.addEventListener('keydown', e => {
    if (e.key === 'Enter') joinBtn.click();
  });

  sendBtn.addEventListener('click', sendMessage);

  msgInput.addEventListener('keydown', e => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault(); // Запобігаємо новому рядку
      sendMessage();
    }
  });

  // Автозростання textarea
  msgInput.addEventListener('input', () => {
    msgInput.style.height = 'auto';
    msgInput.style.height = Math.min(msgInput.scrollHeight, 120) + 'px';
  });

  // Коректне закриття при закритті вкладки
  window.addEventListener('beforeunload', () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      // Надсилаємо Close Frame із кодом 1001 "Going Away"
      ws.close(1001, 'Page closing');
    }
  });

  // ── Допоміжні функції ────────────────────────────────
  function setStatus(state) {
    const labels = {
      connecting: ['● Підключення...', 'badge-connecting'],
      open:       ['● Онлайн',         'badge-open'],
      closed:     ['● Відключено',      'badge-closed'],
    };
    const [text, cls] = labels[state];
    statusBadge.textContent = text;
    statusBadge.className = cls;
  }

  function formatTime(iso) {
    if (!iso) return '';
    try {
      return new Date(iso).toLocaleTimeString('uk-UA',
        { hour: '2-digit', minute: '2-digit' });
    } catch { return ''; }
  }

  function escapeHtml(str = '') {
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }
</script>
</body>
</html>

const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
const url = `${protocol}//${location.host}/ws?user=${encodeURIComponent(username)}`;

case 'chat':
  const isMineMsg = msg.from === myUsername;  // порівнюємо з myUsername
  addChatMessage(msg.from, msg.text, msg.timestamp, isMineMsg);

msgInput.addEventListener('input', () => {
  msgInput.style.height = 'auto';
  msgInput.style.height = Math.min(msgInput.scrollHeight, 120) + 'px';
});

window.addEventListener('beforeunload', () => {
  if (ws && ws.readyState === WebSocket.OPEN)
    ws.close(1001, 'Page closing');
});