Skip to content

Чат -приложение для обмена сообщениями между вкладками браузера.

Notifications You must be signed in to change notification settings

Alex1986nder/course-javascript

 
 

Repository files navigation

Учебный проект курса "Web-разработчик" в Loftschool 🎓

👉 "Чат -приложение для обмена сообщениями между вкладками браузера" 📂

Реализован следующий функционал:

✔️ страница входа в чат: поле для ввода ника и кнопка "Войти",
✔️ при нажатии на кнопку "Войти", окно входа скрывается и отображается окно чата,
✔️ окно чата, состоит из следующих элементов: информации о текущем пользователе (ник, который мы ввели в окне входа и место для фото), список пользователей, список сообщений, поле для ввода сообщения,
✔️ web-soсket сервер, который сообщает всем, когда кто-то заходит в чат, сообщает всем, когда кто-то выходит из чата, сообщает всем, когда кто-то отправляет сообщение в чат,
✔️ когда кто-то входит в чат - добавляется его ник в список пользователей, когда кто-то выходит из чата - его ник удаляется из списка пользователей, когда кто-то присылает сообщение - добавляется ник и фото автора, время и текст сообщения в список сообщений,
✔️ возможно загружать фотографию в качество своего аватара на сервер и хранить ее там, а также отдавать фотографии с сервера, чтобы отображать их в чате,
✔️ при перетаскивании файла (Drag and Drop) с фотографией на место для фото, аватарка поменяется в нескольких местах: в месте для аватара, во всех сообщениях и в интерфейсе, во всех сообщениях в интерфейсе у всех, кто находится в чате, при входе в чат отображаются фотографии авторов сообщений в чате.

👉Код в ветке mega-chat📂

Стек технологий: 💼

🔹 JavaScript 🔹 HTML5 🔹 CSS3 🔹 Webpack

About

Чат -приложение для обмена сообщениями между вкладками браузера.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.6%
  • TypeScript 5.2%
  • HTML 4.5%
  • Shell 0.7%