Чат-комната на основе websocket

После нескольких дней изучения я попытался создать простой чат-комнату с использованием socket.io. Пользователи могут использовать её, просто посетив адрес чата и введя имя пользователя. Интерфейс пользователя отображает текущего пользователя в верхнем левом углу, текущих пользователей, находящихся в сети, в нижнем левом углу, а также интерфейс чата с правой стороны, где пользователи могут вводить текст, вставлять изображения и отправлять файлы.

Вот как это выглядит на практике:

1 Инициализация проекта

Создайте директорию chat, перейдите в неё и инициализируйте проект.

mkdir chat # создание директории
cd chat  # переход в проектную директорию
npm init -y # инициализация проекта

2 Установка зависимостей

Так как этот проект представляет собой веб-чат, я использую express для создания сервера и socket.io для коммуникации между клиентом и сервером.

npm install -S express # установка пакета express
npm install -S socket.io # установка пакета socket.io

3 Создание и запуск сервера

Сначала используем express для создания сервера.```js var express = require("express"); // использование express для создания сервера var http = require("http"); // можно использовать express для запуска сервера, но для использования socket.io используется модуль http как посредник (это мое предположение) var path = require("path"); var SocketIO = require("socket.io"); // импорт пакета socket.io var app = express(); app.use(express.static(path.join(__dirname, "html"))); // установка директории статических ресурсов var httpServer = http.Server(app); var server = new SocketIO(httpServer, {}); // второй параметр - конфигурация, которую я не заполнил, но могу изучить позже, если потребуется httpServer.listen(8080); // прослушивание порта 8080

### 4.1 Структура интерфейса

Основной интерфейс чата выглядит следующим образом:
![Структура чата](./readme-assets/structure.png)

### 4.2 Импорт файлов ресурсов

Для стилей используется `bootstrap`, а для манипуляций с `DOM` - `jquery`. Вы можете скачать эти файлы с [bootcdn](https://www.bootcdn.cn/).

```html
<!-- верхняя часть -->
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.css" />
<script src="./assets/jquery.js"></script>
<!-- нижняя часть -->

4.3 Использование socket.io на клиенте

Так как на клиенте также используется socket.io, необходимо импортировать файл socket.io.js. После запуска сервера (порт 8080), откройте http://localhost:8080/socket.io/socket.io.js в браузере, сохраните этот файл в папке assets, а затем импортируйте его.

<!-- Верхняя часть -->
<script src="./assets/socket.io.js"></script>
<!-- Нижняя часть -->

4.4 Исходный код

Процесс написания кода здесь не описан, подробности см. в исходном коде файла.

5 Требования и подход к реализации

1. Для доступа к чату необходимо ввести имя пользователя (любое) и подключиться к серверу.

    Ключ: io.connect(сервер)

2. Сервер автоматически отправляет текущий список подключенных пользователей клиенту.

    Ключ: сервер использует переменную socketList для хранения всех сокетов клиентов, socket.emit(eventName, value) отправляет список подключенных пользователей (массив) клиенту.3. Ввод текста в интерфейсе клиента для отправки сообщения всем.
   
    Ключ: клиент emit(eventName, data), сервер on(eventName, function()).

3. Клиентская вставка из буфера обмена отправляет изображение из буфера обмена всем.

    Ключ: клиент emit(eventName, data), сервер on(eventName, function()).

4. Клиент отправляет файл.

    Ключ: клиент emit(eventName, data), сервер on(eventName, function()), модуль fs.

6 Тестирование

После тестирования выявленных проблем не обнаружено!