В этой статье вы прочитаете как сделать чат на JavaScript и HTML, ещё для сервера будем использовать Node.js.
Если у вас не установлен Node.js и вы не знаете как это сделать, то прочитайте эти статьи:
Front-end:
Для начала разберём как сделать клиентскую часть сайта, создадим файл «chat.html», вот он:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Chat</title> </head> <body> <main> <div id="divMessages" class="message border rounded container"> </div> <div class="container"> <div id="blockSendMessage" class="row"> <input id="inputMessage" class="form-control col-8 col-sm-9 col-md-8" type="text" placeholder="Сообщений"> <button id="btnSend" type="button" class="btn btn-secondary col-4 col-sm-3 col-md-4">Отправить</button> </div> </div> </main> </body> </html> |
Тут не чего сложного и особенного нет, единственное мы добавляем CSS bootstrap, чтобы всё чуть красивее стало и так же имеем два блока, первый куда будем выводить сообщения, второе для форм, куда будем вводить текст сообщения и кнопка отправить.
После создания HTML можете сделать отдельный JS файл или прямо внутри HTML писать код, я выберу второй вариант.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // Получаем элемент чата let chat = document.querySelector("#divMessages") // Получаем строку ввода сообщения let input = document.querySelector("#inputMessage") // Получаем кнопку для ввода сообщения let btnSubmit = document.querySelector("#btnSend") // Подключаем WebSocket const webSocket = new WebSocket('ws://localhost:8081'); // Получаем сообщение от сервера webSocket.onmessage = function(e) { // Парсим полученные данные const data = JSON.parse(e.data); // Выводим в блог сообщение от сервера chat.innerHTML += '<div class="msg">' + data.message + '</div>' }; // Отслеживаем нажатие мыши btnSubmit.addEventListener("click", () => { // Получаем текст из формы для ввода сообщения message = input.value; // Отправка сообщения через WS webSocket.send(JSON.stringify({ 'message': message })); // Очищаем поле для ввода текста input.value = ''; }) |
Как видите кода не так уж много, в начале мы берём все нужные нам HTML элементы, это блог чата, куда будем выводить все сообщения, поле для ввода сообщений и кнопка для их отправки.
Потом подключаем к серверу через WebSocket, дальше начинаем грубо говоря прослушивать сообщения которые на отправляет сервер, мы парсим данные от сервера и выводим полученное сообщение в блок чата.
Последние отслеживаем нажатие кнопки отправить сообщение, при клики на неё берём строку из формы и отправляем сообщение предварительно из JSON сделав строку и чистим форму.
На этом мы закончили делать клиентскую часть.
Back-end:
Теперь будем делать чат для сайт на Node.js, то есть сделаем серверную часть, для этого создадим файл «App.js».
Примечание:
Если вы не хотите использовать Node.js для вашего чата, не знаете его, или предпочитаете Python Django, то почитайте эту статью «Как сделать чат на Python Django»
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // Подключаем библиотеку для работы с WebSocket const WebSocket = require('ws'); // Создаём подключение к WS let wsServer = new WebSocket.Server({ port: 8081 }); // Создаём массив для хранения всех подключенных пользователей let users = [] // Проверяем подключение wsServer.on('connection', function (ws) { Делаем подключение пользователя let user = { connection: ws } // Добавляем нового пользователя ко всем остальным users.push(user) // Получаем сообщение от клиента ws.on('message', function (message) { // Перебираем всех подключенных клиентов for (let u of users) { // Отправляем им полученное сообщения u.connection.send(message) } }) // Делаем действие при выходе пользователя из чата ws.on('close', function () { // Получаем ID этого пользователя let id = users.indexOf(user) // Убираем этого пользователя users.splice(id, 1) }) }) |
Как можете заметить код на Node.js тоже очень простой, в начале подключаем библиотеку «ws» для работы с WebSocket, потом создаём подключение к серверу через этот протокол, и делаем массив в котором будут хранится все пользователи.
Потом создаём подключение пользователя, сразу там назначаем тип конекта, и добавляем его в массив всех пользователей, дальше идёт функция которая будет срабатывать при получение сообщения от клиента, его мы отправляем всем остальным, для этого проходимся по всем подключенным пользователям.
Последние это отслеживаем отключение клиента, если такое произошло, то просто убираем его из массива.
На этом разработка серверной части закончилась и как видите тоже не чего особо сложного нет, для запуска видите эту команду:
1 | node app.js |
Всё должно запустится, открываем HTML документ, в котором мы сделали front-end и отправляем сообщения.
Вывод:
В этой статье вы прочитали как сделать чат на JavaScript и HTML, так же для разработки серверной части использовали Node.JS.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,33
Загрузка...