В этой статье мы собираемся создать приложение для чата, которое будет отправлять рисунки, сделанные пользователями, вместо простых сообщений чата. Мы используем Express и HTTP-сервер с Socket.io для работы в режиме реального времени и используем drawingboard.js и jQuery в веб-интерфейсе, чтобы он оставался чистым и минималистичным. вот последняя рабочая демонстрация того, что мы собираемся построить.
Репозиторий Github кода, связанного с этим уроком, приведен ниже:
Https://github.com/Mayank-MP05/Realtime-Drawing-Chat-NodeJS-SocketIO
Мы начинаем с создания серверной части, затем переходим к части внешнего интерфейса, а затем перед созданием серверной части мы должны знать тип данных, который мы собираемся обмениваться через соединение клиент-сервер.
Мы используем изображение DataURI в качестве строкового типа данных для отправки клиенту на сервер и наоборот. Вы можете прочитать больше здесь: Схема URI данных
Бэкэнд
Во-первых, убедитесь, что у вас установлены node.js и npm и вы работаете с CLI, чтобы запустить проект npm и установить необходимые зависимости. Ниже приведены команды.
npm init -y npm install express socket.io
Первым делом мы импортировали все библиотеки Express HTTP и Socket IO. Мы устанавливаем статическое значение для клиентской папки, чтобы обслуживать статический интерфейс по запросу. При подключенном сокете мы проверили, отправляется ли URI данных чертежа пользователем и отправляется ли он, мы повторно отправили его через сервер всем подключенным пользователям. Наконец, мы начали слушать сервер на указанном ПОРТУ.
Поздравляю! Вы закончили с Backend-частью. Это самый минимальный
Внешний интерфейс
Внешняя часть - это клиентская часть, которая имеет набор файлов разметки стилей и сценариев. Я хочу объяснить основной механизм, сокет и чертежную доску. Итак, если вы хотите сослаться на стили, вы можете просмотреть код в моем репозитории Github, упомянутый выше.
В папке клиента есть папка чертежной доски, в которой находятся файлы CSS и JS библиотеки. index.html служит базовым файлом разметки. Стили хранятся в style.css. Основная логика клиентского сокета и доски для рисования содержится в script.js. Кроме того, мы используем загрузку jQuery и клиентскую часть socket.io с использованием CDN.
Самая первая задача - связать все эти файлы и CDN в index.html, связать все файлы стилей и CSS с разделом заголовка и файлами JS перед конечным тегом тела, тогда ваш пустой HTML-файл будет выглядеть следующим образом:
После настройки всех ссылок следующая задача - добавить некоторую разметку и стили к файлам. Теперь я не собираюсь подробно объяснять стиль здесь, просто нужно уловить, что стиль используется, удерживайте доску для рисования и навигационную панель, фиксированные в положениях и небольшой ширине и в целях окраски
Это моментальный снимок кода тела после добавления пользовательского интерфейса разметки, мы добавили очень простую панель навигации, затем контейнер сообщений и внизу чертежную доску с кнопкой Отправить DWG.
позвольте переместить часть JS на стороне клиента
Приносим извинения за опечатки!
Таким образом, выше использован синтаксис jQuery Once auto-execute. Все, что вы пишете в теле этой функции, выполняется один раз при запуске. Прежде всего, мы создали экземпляр класса IO как socket и инициализировали чертежную доску, используя идентификатор div предоставляется как параметр
Мы добавили событие щелчка (click() в jQuery) к кнопке, что всякий раз, когда пользователь нажимает кнопку send dwg, этот код запускается. В этой функции мы сначала получаем изображение DataURI изображения чертежной доски, используя функцию .getImg() , предопределенную в drawing-board.js затем мы выделили эту строку DataURI изображения, используя функцию вывода клиента ввода-вывода сокета.
при отправке изображения мы сбрасываем фон на пустой, используя метод resetBackground( ).
также, когда сервер излучает «рисунок», мы должны сопоставить его с пользовательским интерфейсом, поэтому мы использовали метод on(“drawing”) и добавили изображение как объект списка в контейнер сообщения
Простой! Это все, что касается интерфейсной части.
Это очень простой пример того, как socket.io можно использовать для создания соединения с клиентом в реальном времени и для обмена данными в реальном времени.
