init

2026-05-29 04:59:58 +03:00
commit 83ef0d5ab3
28 changed files with 3027 additions and 0 deletions
@@ -0,0 +1,7 @@
 node_modules
 npm-debug.log
 .git
 .gitignore
 **/dist
 client/node_modules
 server/node_modules
@@ -0,0 +1,4 @@
 node_modules/
 dist/
 .env.local
 npm-debug.log*
@@ -0,0 +1,36 @@
 # Stage 1: Build client
 FROM node:18-alpine AS client-builder
 WORKDIR /client
 COPY client/package*.json ./
 RUN npm ci
 COPY client/ .
 RUN npm run build
 # Stage 2: Production image
 FROM nginx:alpine
 # Install Node.js for the server
 RUN apk add --no-cache nodejs npm
 # Remove default nginx config
 RUN rm /etc/nginx/conf.d/default.conf
 # Copy custom nginx config
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 # Copy client build
 COPY --from=client-builder /client/dist /usr/share/nginx/html
 # Copy server
 WORKDIR /server
 COPY server/package*.json ./
 RUN npm ci --omit=dev
 COPY server/ .
 # Copy entrypoint
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh
 EXPOSE 80
 ENTRYPOINT ["/docker-entrypoint.sh"]
@@ -0,0 +1,208 @@
 # Чат с общей комнатой
 Веб-приложение чата с одной общей комнатой на WebSocket. Поддерживает текстовые сообщения, отправку файлов и отображение изображений.
 **Сервер:** Node.js + `ws`  
 **Клиент:** React + Vite  
 **Прокси:** nginx (production-сборка)  
 ---
 ## Быстрый запуск (разработка)
 ### Сервер
 ```bash
 cd server
 npm install
 npm start
 ```
 Запускает WebSocket сервер на `ws://localhost:8080`.
 ### Клиент
 ```bash
 cd client
 npm install
 npx vite
 ```
 Запускает dev-сервер на `http://localhost:3000`.  
 В режиме разработки клиент подключается напрямую к `ws://localhost:8080`.
 ### Пользователи по умолчанию
 | Логин | Пароль |
 |-------|--------|
 | alice | 123    |
 | bob   | 456    |
 ---
 ## Production (Docker)
 ### Сборка образа
 ```bash
 docker build -t chat-app .
 ```
 ### Запуск контейнера
 ```bash
 docker run -d -p 80:80 chat-app
 ```
 Открой `http://localhost`.
 ### Как это работает
 - **nginx** на порту 80 раздаёт статику React и проксирует WebSocket
 - Путь `/` → статические файлы клиента (`index.html`, JS, CSS)
 - Путь `/ws` → прокси на Node.js WebSocket сервер (порт 8080 внутри контейнера)
 - nginx поддерживает Upgrade до WebSocket, таймаут соединения — 24 часа
 - Максимальный размер загружаемых файлов через nginx — 50 МБ
 - После остановки Node.js контейнер завершается (через `wait`)
 ---
 ## Переменные окружения
 ### Сервер
 | Переменная | По умолчанию | Описание |
 |-----------|-------------|---------|
 | `PORT` | `8080` | Порт WebSocket сервера |
 | `MAX_FILE_SIZE` | `10485760` (10 МБ) | Максимальный размер файла в байтах |
 | `USERS_FILE` | `users.json` | Путь к файлу с пользователями |
 Пример:
 ```bash
 $env:PORT=9090; $env:MAX_FILE_SIZE=2097152; node server.js
 ```
 ### Клиент
 | Переменная | По умолчанию (dev) | По умолчанию (production) | Описание |
 |-----------|-------------------|--------------------------|---------|
 | `VITE_WS_URL` | `ws://localhost:8080` | `/ws` | URL WebSocket сервера |
 Настройки хранятся в файлах:
 - `client/.env.development` — для `npx vite` (dev-режим)
 - `client/.env` — для `vite build` (production-сборка)
 ---
 ## Протокол обмена
 ### Аутентификация
 Клиент → Сервер:
 ```json
 { "type": "auth", "login": "alice", "password": "123" }
 ```
 Сервер → Клиент:
 ```json
 { "type": "auth_result", "success": true }
 ```
 ```json
 { "type": "auth_result", "success": false, "reason": "Invalid login or password" }
 ```
 ### Текстовое сообщение
 Клиент → Сервер:
 ```json
 { "type": "text", "text": "Привет!" }
 ```
 Сервер → Все:
 ```json
 { "type": "text", "from": "alice", "timestamp": 1717000000000, "text": "Привет!" }
 ```
 ### Файл / изображение
 Клиент → Сервер:
 ```json
 {
  "type": "file",
  "filename": "cat.png",
  "mime": "image/png",
  "data": "<base64>"
 }
 ```
 Сервер → Все (такая же структура, добавлены `from` и `timestamp`):
 ```json
 {
  "type": "file",
  "from": "alice",
  "timestamp": 1717000000000,
  "filename": "cat.png",
  "mime": "image/png",
  "data": "<base64>"
 }
 ```
 ### Системные сообщения
 Сервер → Все:
 ```json
 { "type": "system", "text": "alice joined the chat" }
 ```
 ---
 ## Функциональность
 - **Текстовые сообщения** — отображаются с логином отправителя и временем
 - **Файлы** — любые типы, до 10 МБ (настраивается). Файлы передаются через base64 в JSON
 - **Изображения** — автоматически определяются по MIME-типу (`image/*`), рендерятся как `<img>`, клик открывает в новой вкладке
 - **Не-изображения** — отображаются как ссылка для скачивания с именем файла
 - **Уведомления на неактивной вкладке** — звуковой сигнал (Web Audio API) и красная точка на favicon
 - **Системные сообщения** — подключение / отключение участников
 - **Скролл** — автоматический, кастомный тонкий скроллбар в теме приложения
 ---
 ## Структура проекта
 ```
 chat/
 ├── server/
 │   ├── server.js          # WebSocket сервер
 │   ├── users.json         # Хардкоженые логины/пароли
 │   └── package.json
 ├── client/
 │   ├── src/
 │   │   ├── App.jsx        # Корневой компонент
 │   │   ├── App.css
 │   │   ├── main.jsx       # Точка входа
 │   │   └── components/
 │   │       ├── Login.jsx / .css
 │   │       ├── Chat.jsx / .css
 │   │       ├── MessageList.jsx
 │   │       ├── Message.jsx / .css
 │   │       └── MessageInput.jsx / .css
 │   ├── .env               # Production настройки
 │   ├── .env.development   # Dev настройки
 │   ├── index.html
 │   ├── vite.config.js
 │   └── package.json
 ├── Dockerfile             # Многостадийная сборка
 ├── docker-entrypoint.sh   # Точка входа контейнера
 ├── nginx.conf             # Конфигурация nginx
 └── README.md
 ```
@@ -0,0 +1 @@
 VITE_WS_URL=/ws
@@ -0,0 +1 @@
 VITE_WS_URL=ws://localhost:8080
@@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Chat Room</title>
 </head>
 <body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>
@@ -0,0 +1,19 @@
 {
  "name": "chat-client",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.1.0"
  }
 }
@@ -0,0 +1,17 @@
 *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }
 html, body, #root {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
 }
 a {
  color: #7ec8e3;
 }
@@ -0,0 +1,75 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import Login from './components/Login';
 import Chat from './components/Chat';
 const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8080';
 export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [login, setLogin] = useState('');
  const [error, setError] = useState('');
  const wsRef = useRef(null);
  const handleLogin = useCallback((userLogin, password) => {
    setError('');
    const ws = new WebSocket(WS_URL);
    ws.onopen = () => {
      ws.send(JSON.stringify({ type: 'auth', login: userLogin, password }));
    };
    ws.onmessage = (event) => {
      let msg;
      try {
        msg = JSON.parse(event.data);
      } catch {
        return;
      }
      if (msg.type === 'auth_result') {
        if (msg.success) {
          setLogin(userLogin);
          setLoggedIn(true);
        } else {
          setError(msg.reason || 'Authentication failed');
          ws.close();
        }
      }
    };
    ws.onerror = () => {
      setError('Cannot connect to server');
    };
    ws.onclose = () => {
      if (!loggedIn) {
        setError('Connection closed');
      }
    };
    wsRef.current = ws;
  }, [loggedIn]);
  const handleLogout = useCallback(() => {
    if (wsRef.current) {
      wsRef.current.close();
      wsRef.current = null;
    }
    setLoggedIn(false);
    setLogin('');
  }, []);
  useEffect(() => {
    return () => {
      if (wsRef.current) {
        wsRef.current.close();
      }
    };
  }, []);
  if (!loggedIn) {
    return <Login onLogin={handleLogin} error={error} />;
  }
  return <Chat ws={wsRef.current} login={login} onLogout={handleLogout} />;
 }
@@ -0,0 +1,52 @@
 .chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
 }
 .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #2a2a4a;
 }
 .chat-header h2 {
  font-size: 1.1rem;
  font-weight: 500;
 }
 .logout-btn {
  padding: 0.4rem 1rem;
  border: 1px solid #5c5c7a;
  border-radius: 6px;
  background: transparent;
  color: #e0e0e0;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s;
 }
 .logout-btn:hover {
  background: #2a2a4a;
 }
 .chat-error {
  background: #5c1a1a;
  color: #ff8a8a;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
 }
 .chat-notification {
  background: #1a3a5c;
  color: #8ab8ff;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
 }
@@ -0,0 +1,137 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import MessageList from './MessageList';
 import MessageInput from './MessageInput';
 import './Chat.css';
 function setFavicon(hasNotification) {
  const canvas = document.createElement('canvas');
  canvas.width = 32;
  canvas.height = 32;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4a9eff';
  ctx.beginPath();
  ctx.arc(16, 16, 14, 0, 2 * Math.PI);
  ctx.fill();
  ctx.fillStyle = '#fff';
  ctx.font = 'bold 18px sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('CH', 16, 16);
  if (hasNotification) {
    ctx.fillStyle = '#ff4444';
    ctx.beginPath();
    ctx.arc(26, 6, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.strokeStyle = '#1a1a2e';
    ctx.lineWidth = 2;
    ctx.stroke();
  }
  let link = document.querySelector('link[rel="icon"]');
  if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
  }
  link.href = canvas.toDataURL();
 }
 export default function Chat({ ws, login, onLogout }) {
  const [messages, setMessages] = useState([]);
  const [connected, setConnected] = useState(true);
  const [error, setError] = useState('');
  const hasNotifRef = useRef(false);
  const messagesRef = useRef(messages);
  messagesRef.current = messages;
  const addMessage = useCallback((msg) => {
    setMessages(prev => [...prev, { ...msg, id: Date.now() + Math.random() }]);
    if (
      document.hidden &&
      msg.from &&
      msg.from !== login &&
      (msg.type === 'text' || msg.type === 'file')
    ) {
      if (!hasNotifRef.current) {
        hasNotifRef.current = true;
        setFavicon(true);
      }
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.frequency.value = 520;
        gain.gain.value = 0.15;
        osc.start();
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
        osc.stop(ctx.currentTime + 0.15);
        osc.onended = () => ctx.close();
      } catch {}
    }
  }, [login]);
  useEffect(() => {
    setFavicon(false);
    const onVisible = () => {
      if (hasNotifRef.current) {
        hasNotifRef.current = false;
        setFavicon(false);
      }
    };
    document.addEventListener('visibilitychange', onVisible);
    return () => {
      document.removeEventListener('visibilitychange', onVisible);
    };
  }, []);
  useEffect(() => {
    if (!ws) return;
    ws.onmessage = (event) => {
      let msg;
      try {
        msg = JSON.parse(event.data);
      } catch {
        return;
      }
      if (msg.type === 'text') {
        addMessage(msg);
      } else if (msg.type === 'file') {
        addMessage(msg);
      } else if (msg.type === 'system') {
        addMessage(msg);
      } else if (msg.type === 'error') {
        setError(msg.message);
      }
    };
    ws.onclose = () => {
      setConnected(false);
      setError('Connection lost');
    };
    ws.onerror = () => {
      setConnected(false);
      setError('Connection error');
    };
  }, [ws, addMessage]);
  return (
    <div className="chat-container">
      <div className="chat-header">
        <h2>Chat room — logged in as <strong>{login}</strong></h2>
        <button className="logout-btn" onClick={onLogout}>Logout</button>
      </div>
      {error && !connected && <div className="chat-error">{error}</div>}
      {error && connected && <div className="chat-notification">{error}</div>}
      <MessageList messages={messages} currentUser={login} />
      <MessageInput ws={ws} />
    </div>
  );
 }
@@ -0,0 +1,65 @@
 .login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
 }
 .login-form {
  background: #16213e;
  padding: 2.5rem;
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 .login-form h1 {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  color: #e0e0e0;
 }
 .login-error {
  background: #5c1a1a;
  color: #ff8a8a;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
 }
 .login-form input {
  padding: 0.75rem 1rem;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  background: #1a1a2e;
  color: #e0e0e0;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
 }
 .login-form input:focus {
  border-color: #4a9eff;
 }
 .login-form button {
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #4a9eff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
 }
 .login-form button:hover {
  background: #357abd;
 }
@@ -0,0 +1,36 @@
 import React, { useState } from 'react';
 import './Login.css';
 export default function Login({ onLogin, error }) {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!login.trim() || !password.trim()) return;
    onLogin(login.trim(), password);
  };
  return (
    <div className="login-container">
      <form className="login-form" onSubmit={handleSubmit}>
        <h1>Chat Login</h1>
        {error && <div className="login-error">{error}</div>}
        <input
          type="text"
          placeholder="Login"
          value={login}
          onChange={(e) => setLogin(e.target.value)}
          autoFocus
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Sign In</button>
      </form>
    </div>
  );
 }
@@ -0,0 +1,129 @@
 .message-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #3a3a5a transparent;
 }
 .message-list::-webkit-scrollbar {
  width: 6px;
 }
 .message-list::-webkit-scrollbar-track {
  background: transparent;
 }
 .message-list::-webkit-scrollbar-thumb {
  background: #3a3a5a;
  border-radius: 3px;
 }
 .message-list::-webkit-scrollbar-thumb:hover {
  background: #4a4a6a;
 }
 .message-list-empty {
  text-align: center;
  color: #6a6a8a;
  margin-top: 3rem;
  font-size: 0.95rem;
 }
 .message-system {
  text-align: center;
  color: #6a6a8a;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  font-style: italic;
 }
 .message {
  max-width: 75%;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  word-wrap: break-word;
 }
 .message-own {
  align-self: flex-end;
  background: #2b4a7a;
  border-bottom-right-radius: 4px;
 }
 .message-other {
  align-self: flex-start;
  background: #2a2a4a;
  border-bottom-left-radius: 4px;
 }
 .message-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
 }
 .message-author {
  font-weight: 600;
  font-size: 0.85rem;
  color: #8ab8ff;
 }
 .message-time {
  font-size: 0.7rem;
  color: #6a6a8a;
 }
 .message-body p {
  margin-bottom: 0.3rem;
  line-height: 1.4;
 }
 .message-body p:last-child {
  margin-bottom: 0;
 }
 .message-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin-top: 0.3rem;
  transition: opacity 0.2s;
 }
 .message-image:hover {
  opacity: 0.9;
 }
 .message-file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  text-decoration: none;
  color: #7ec8e3;
  font-size: 0.9rem;
  margin-top: 0.3rem;
 }
 .message-file-link:hover {
  background: rgba(255, 255, 255, 0.1);
 }
 .file-icon {
  font-size: 1.1rem;
 }
 .message-file-error {
  color: #ff6a6a;
  font-size: 0.85rem;
  margin-top: 0.3rem;
 }
@@ -0,0 +1,113 @@
 import React, { useMemo } from 'react';
 import './Message.css';
 function formatTime(ts) {
  const d = new Date(ts);
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
 const URL_REGEX = /(https?:\/\/[^\s<]+[^\s<.,!?)}\]"'\\])/gi;
 function linkifyText(text) {
  const parts = [];
  let lastIndex = 0;
  let match;
  URL_REGEX.lastIndex = 0;
  while ((match = URL_REGEX.exec(text)) !== null) {
    if (match.index > lastIndex) {
      parts.push(text.slice(lastIndex, match.index));
    }
    parts.push(
      <a key={match.index} href={match[0]} target="_blank" rel="noopener noreferrer">
        {match[0]}
      </a>
    );
    lastIndex = match.index + match[0].length;
  }
  if (lastIndex < text.length) {
    parts.push(text.slice(lastIndex));
  }
  return parts.length ? parts : text;
 }
 function dataURLToBlobUrl(dataUrl) {
  try {
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    const n = bstr.length;
    const u8arr = new Uint8Array(n);
    for (let i = 0; i < n; i++) {
      u8arr[i] = bstr.charCodeAt(i);
    }
    const blob = new Blob([u8arr], { type: mime });
    return URL.createObjectURL(blob);
  } catch {
    return null;
  }
 }
 export default function Message({ message, isOwn }) {
  const isImage = message.mime && message.mime.startsWith('image/');
  const isSystem = message.type === 'system';
  const isFile = message.type === 'file';
  const blobUrl = useMemo(() => {
    if (isFile && message.data) {
      return dataURLToBlobUrl(`data:${message.mime};base64,${message.data}`);
    }
    return null;
  }, [isFile, message.data, message.mime]);
  const downloadUrl = useMemo(() => {
    if (isFile && message.data && !isImage) {
      return dataURLToBlobUrl(`data:${message.mime};base64,${message.data}`);
    }
    return null;
  }, [isFile, message.data, message.mime, isImage]);
  if (isSystem) {
    return (
      <div className="message-system">
        <span>{message.text}</span>
      </div>
    );
  }
  return (
    <div className={`message ${isOwn ? 'message-own' : 'message-other'}`}>
      <div className="message-header">
        <span className="message-author">{message.from}</span>
        <span className="message-time">{formatTime(message.timestamp)}</span>
      </div>
      <div className="message-body">
        {message.text && <p>{linkifyText(message.text)}</p>}
        {isFile && isImage && blobUrl && (
          <a href={blobUrl} target="_blank" rel="noreferrer">
            <img
              className="message-image"
              src={blobUrl}
              alt={message.filename}
            />
          </a>
        )}
        {isFile && isImage && !blobUrl && (
          <div className="message-file-error">Failed to load image</div>
        )}
        {isFile && !isImage && downloadUrl && (
          <a
            className="message-file-link"
            href={downloadUrl}
            download={message.filename}
          >
            <span className="file-icon">&#128206;</span>
            {message.filename}
          </a>
        )}
        {isFile && !isImage && !downloadUrl && (
          <div className="message-file-error">Failed to load file</div>
        )}
      </div>
    </div>
  );
 }
@@ -0,0 +1,58 @@
 .message-input-container {
  padding: 1rem 0;
  border-top: 1px solid #2a2a4a;
 }
 .message-input-form {
  display: flex;
  gap: 0.5rem;
 }
 .message-input-field {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  background: #16213e;
  color: #e0e0e0;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
 }
 .message-input-field:focus {
  border-color: #4a9eff;
 }
 .attach-btn, .send-btn {
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s;
 }
 .attach-btn {
  background: #2a2a4a;
  color: #e0e0e0;
  font-size: 1.1rem;
 }
 .attach-btn:hover {
  background: #3a3a5a;
 }
 .send-btn {
  background: #4a9eff;
  color: #fff;
  font-weight: 600;
 }
 .send-btn:hover {
  background: #357abd;
 }
 .file-input-hidden {
  display: none;
 }
@@ -0,0 +1,71 @@
 import React, { useState, useRef } from 'react';
 import './MessageInput.css';
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 export default function MessageInput({ ws }) {
  const [text, setText] = useState('');
  const fileInputRef = useRef(null);
  const sendText = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    ws.send(JSON.stringify({ type: 'text', text: text.trim() }));
    setText('');
  };
  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (file.size > MAX_FILE_SIZE) {
      alert('File too large. Maximum is 10 MB.');
      e.target.value = '';
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      const base64 = reader.result.split(',')[1];
      ws.send(JSON.stringify({
        type: 'file',
        filename: file.name,
        mime: file.type || 'application/octet-stream',
        data: base64
      }));
    };
    reader.onerror = () => {
      alert('Failed to read file');
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  };
  const handleAttachClick = () => {
    fileInputRef.current?.click();
  };
  return (
    <div className="message-input-container">
      <form className="message-input-form" onSubmit={sendText}>
        <input
          className="message-input-field"
          type="text"
          placeholder="Type a message..."
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button type="button" className="attach-btn" onClick={handleAttachClick} title="Attach file">
          &#128206;
        </button>
        <button type="submit" className="send-btn">Send</button>
      </form>
      <input
        ref={fileInputRef}
        type="file"
        className="file-input-hidden"
        onChange={handleFileSelect}
      />
    </div>
  );
 }
@@ -0,0 +1,22 @@
 import React, { useRef, useEffect } from 'react';
 import Message from './Message';
 export default function MessageList({ messages, currentUser }) {
  const bottomRef = useRef(null);
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);
  return (
    <div className="message-list">
      {messages.length === 0 && (
        <div className="message-list-empty">No messages yet. Start chatting!</div>
      )}
      {messages.map((msg) => (
        <Message key={msg.id} message={msg} isOwn={msg.from === currentUser} />
      ))}
      <div ref={bottomRef} />
    </div>
  );
 }
@@ -0,0 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './App.css';
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 );
@@ -0,0 +1,9 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
 });
@@ -0,0 +1,16 @@
 #!/bin/sh
 set -e
 # Start nginx in foreground
 nginx -g 'daemon off;' &
 NGINX_PID=$!
 # Start WebSocket server
 node /server/server.js &
 NODE_PID=$!
 # Forward signals to both processes
 trap 'kill $NGINX_PID $NODE_PID 2>/dev/null; exit' SIGTERM SIGINT
 # Exit if node server stops
 wait $NODE_PID
@@ -0,0 +1,29 @@
 server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;
    client_max_body_size 50M;
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
    gzip_min_length 256;
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "public, max-age=3600";
    }
    location /ws {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 86400;
    }
 }
@@ -0,0 +1,36 @@
 {
  "name": "chat-server",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "chat-server",
      "version": "1.0.0",
      "dependencies": {
        "ws": "^8.16.0"
      }
    },
    "node_modules/ws": {
      "version": "8.21.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
      "license": "MIT",
      "engines": {
        "node": ">=10.0.0"
      },
      "peerDependencies": {
        "bufferutil": "^4.0.1",
        "utf-8-validate": ">=5.0.2"
      },
      "peerDependenciesMeta": {
        "bufferutil": {
          "optional": true
        },
        "utf-8-validate": {
          "optional": true
        }
      }
    }
  }
 }
@@ -0,0 +1,12 @@
 {
  "name": "chat-server",
  "version": "1.0.0",
  "description": "WebSocket chat server with file sharing",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "ws": "^8.16.0"
  }
 }
@@ -0,0 +1,129 @@
 const fs = require('fs');
 const path = require('path');
 const { WebSocketServer } = require('ws');
 const PORT = parseInt(process.env.PORT, 10) || 8080;
 const MAX_FILE_SIZE = parseInt(process.env.MAX_FILE_SIZE, 10) || 10 * 1024 * 1024;
 const usersPath = path.join(__dirname, process.env.USERS_FILE || 'users.json');
 let validUsers;
 try {
  validUsers = JSON.parse(fs.readFileSync(usersPath, 'utf-8'));
  console.log(`Loaded ${validUsers.length} users from users.json`);
 } catch (err) {
  console.error('Failed to load users.json:', err.message);
  process.exit(1);
 }
 function authenticate(login, password) {
  return validUsers.find(u => u.login === login && u.password === password) || null;
 }
 const wss = new WebSocketServer({ port: PORT });
 console.log(`WebSocket server running on ws://localhost:${PORT}`);
 wss.on('connection', (ws, req) => {
  const clientIp = req.socket.remoteAddress;
  console.log(`New connection from ${clientIp}`);
  let authenticated = false;
  let userLogin = null;
  ws.on('message', (data) => {
    let parsed;
    try {
      parsed = JSON.parse(data.toString());
    } catch (e) {
      ws.send(JSON.stringify({ type: 'error', message: 'Invalid JSON' }));
      return;
    }
    if (!authenticated) {
      if (parsed.type === 'auth') {
        const user = authenticate(parsed.login, parsed.password);
        if (user) {
          authenticated = true;
          userLogin = parsed.login;
          console.log(`User authenticated: ${userLogin}`);
          ws.send(JSON.stringify({ type: 'auth_result', success: true }));
          broadcast({
            type: 'system',
            text: `${userLogin} joined the chat`
          }, null);
        } else {
          console.log(`Auth failed for login: ${parsed.login}`);
          ws.send(JSON.stringify({
            type: 'auth_result',
            success: false,
            reason: 'Invalid login or password'
          }));
        }
      } else {
        ws.send(JSON.stringify({ type: 'error', message: 'Authenticate first' }));
      }
      return;
    }
    if (parsed.type === 'text') {
      if (!parsed.text || typeof parsed.text !== 'string') {
        ws.send(JSON.stringify({ type: 'error', message: 'Invalid text message' }));
        return;
      }
      console.log(`Text from ${userLogin}: ${parsed.text.substring(0, 50)}`);
      broadcast({
        type: 'text',
        from: userLogin,
        timestamp: Date.now(),
        text: parsed.text
      }, null);
      return;
    }
    if (parsed.type === 'file') {
      if (!parsed.filename || !parsed.mime || !parsed.data) {
        ws.send(JSON.stringify({ type: 'error', message: 'Invalid file message' }));
        return;
      }
      const size = Math.ceil((parsed.data.length * 3) / 4);
      if (size > MAX_FILE_SIZE) {
        ws.send(JSON.stringify({ type: 'error', message: 'File too large (max 10 MB)' }));
        return;
      }
      console.log(`File from ${userLogin}: ${parsed.filename} (${parsed.mime}, ~${size} bytes)`);
      broadcast({
        type: 'file',
        from: userLogin,
        timestamp: Date.now(),
        filename: parsed.filename,
        mime: parsed.mime,
        data: parsed.data
      }, null);
      return;
    }
    ws.send(JSON.stringify({ type: 'error', message: 'Unknown message type' }));
  });
  ws.on('close', (code, reason) => {
    console.log(`Connection closed${userLogin ? ` for ${userLogin}` : ''} (code: ${code})`);
    if (userLogin) {
      broadcast({
        type: 'system',
        text: `${userLogin} left the chat`
      }, null);
    }
  });
  ws.on('error', (err) => {
    console.error(`WebSocket error${userLogin ? ` for ${userLogin}` : ''}:`, err.message);
  });
 });
 function broadcast(message, excludeWs) {
  const json = JSON.stringify(message);
  wss.clients.forEach(client => {
    if (client !== excludeWs && client.readyState === 1) {
      client.send(json);
    }
  });
 }
@@ -0,0 +1,4 @@
 [
  { "login": "alice", "password": "123" },
  { "login": "bob", "password": "456" }
 ]