Чат на JavaScript и Node.js

Как сделать чат на JavaScript, HTML и Node.JS для сайта
Метки: / / /

В этой статье вы прочитаете  как сделать чат на JavaScript и HTML, ещё для сервера будем использовать Node.js.

Если у вас не установлен Node.js и вы не знаете как это сделать, то прочитайте эти статьи:

Front-end:

Для начала разберём как сделать клиентскую часть сайта, создадим файл «chat.html», вот он:

Тут не чего сложного и особенного нет, единственное мы добавляем CSS bootstrap, чтобы всё чуть красивее стало и так же имеем два блока, первый куда будем выводить сообщения, второе для форм, куда будем вводить текст сообщения и кнопка отправить.

После создания HTML можете сделать отдельный JS файл или прямо внутри HTML писать код, я выберу второй вариант.

Как видите кода не так уж много, в начале мы берём все нужные нам HTML элементы, это блог чата, куда будем выводить все сообщения, поле для ввода сообщений и кнопка для их отправки.

Потом подключаем к серверу через WebSocket, дальше начинаем грубо говоря прослушивать сообщения которые на отправляет сервер, мы парсим данные от сервера и выводим полученное сообщение в блок чата.

Последние отслеживаем нажатие кнопки отправить сообщение, при клики на неё берём строку из формы и отправляем сообщение предварительно из JSON сделав строку и чистим форму.

На этом мы закончили делать клиентскую часть.

Back-end:

Теперь будем делать чат для сайт на Node.js, то есть сделаем серверную часть, для этого создадим файл «App.js».

Примечание:

Если вы не хотите использовать Node.js для вашего чата, не знаете его, или предпочитаете Python Django, то почитайте эту статью «Как сделать чат на Python Django»



Как можете заметить код на Node.js тоже очень простой, в начале подключаем библиотеку «ws» для работы с WebSocket,  потом создаём подключение к серверу через этот протокол, и делаем массив в котором будут хранится все пользователи.

Потом создаём подключение пользователя, сразу там назначаем тип конекта, и добавляем его в массив всех пользователей, дальше идёт функция которая будет срабатывать при получение сообщения от клиента, его мы отправляем всем остальным, для этого проходимся по всем подключенным пользователям.

Последние это отслеживаем отключение клиента, если такое произошло, то просто убираем его из массива.

На этом разработка серверной части закончилась и как видите тоже не чего особо сложного нет, для запуска видите эту команду:

Всё должно запустится, открываем HTML документ, в котором мы сделали front-end и отправляем сообщения.

Вывод:

В этой статье вы прочитали как сделать чат на JavaScript и HTML, так же для разработки серверной части использовали Node.JS.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653