I-Discuss: Обсудить идею
Цель:
Чтобы создать веб-приложение для чата в реальном времени. Технология, необходимая для создания приложения, — это vanilla JS, Node.js и socket.io.
Демо: https://i-discuss-chat-app.netlify.app/
Исходный код: https://github.com/Gaurav-pandey04/I-Discuss-Discuss-Ideas
Обзор:
Этот проект содержит три папки, а именно
- Активы • Ping.mp3 • Icon.png
- Внешний интерфейс • Index.html • Style.css • Client.js
- nodeServer • node_modules • index.js • package.json • package-lock.json
Активы отвечают за сохранение изображения и звука файлов уведомлений. Фронтенд отвечает за основной пользовательский интерфейс и пользовательский интерфейс. nodeServer отвечает за подключение всех пользователей через socket.io в режиме реального времени и соответствующее управление ими.
Объяснение:
узелсервер:
index.js:
PORT — это порт по умолчанию для сервера, а process.env.PORT — это порт по умолчанию для переменных среды, и если он отсутствует, запустите его на localhost:8000 .
const PORT = process.env.PORT || 8000
Это инициализирует сервер на порту 8000 с модулем socket.io и устанавливает режим cors, чтобы сеть могла быть установлена правильно без каких-либо ограничений.
const io = require("socket.io")(PORT,{ cors:{ mode:'cors' } });
Содержит всех пользователей как объект.
const users={};
Этот блок описывает, когда соединение установлено, проверяет три события: присоединение нового пользователя, отправку, отключение. Далее он описывает, присоединяется ли новый пользователь, а затем добавляет этого пользователя к объекту пользователей с его socket.id и присваивает ему имя, введенное пользователем после этого широковещательного события присоединения пользователя с именем в качестве аргумента. Если происходит событие отправки, то транслируйте событие приема с сообщением и именем в качестве аргумента. Если происходит событие отключения, то транслируйте левое событие с объектом пользователей в качестве аргумента и после этого удалите этого пользователя из объекта пользователей.
io.on('connection', socket => { socket.on('new-user-joined', name => { users[socket.id] = name; socket.broadcast.emit('user-joined', name) }); socket.on('send', message => { socket.broadcast.emit('receive', {message: message, name: users[socket.id]}) }); socket.on('disconnect', message =>{ socket.broadcast.emit('left', users[socket.id]); delete users[socket.id]; }); });
Вот и все настройки для сервера, а теперь давайте перейдем к фронтенд части.
Внешний интерфейс:
Индекс.html:
Включен nodeServer, работающий по ссылке порта на index.html, чтобы index.html мог получить доступ к nodeServer и мог соответствующим образом управлять пользователями.
<script defer src="http://localhost:8000/socket.io/socket.io.js" ></script>
Включен JavaScript-файл client.js, который имеет доступ к index.html и действует как мост к nodeServer и index.html. т. е. он информирует nodeServer о том, какое событие происходит в index.html, и дает соответствующий ответ.
<script defer src="./client.js"></script>
Включен файл CSS в index.html для улучшения пользовательского интерфейса.
<link rel="stylesheet" href="style.css" />
Отсюда начинается тело, элемент навигации содержит логотип и основной заголовок приложения. Изображение находится в «../Assets/icon.png»
<nav> <img src="../Assets/icon.png" alt="Logo" id="logo" /> <h1 id="main-heading">I-Discuss: Discuss Ideas</h1> </nav>
Часть section содержит мат чат-бокс, в котором должны появляться чаты. Этому разделу присваивается идентификатор «чат-бокса».
<section id="chat-box"> </section>
Этот раздел содержит поле ввода, где сообщение должно быть набрано с помощью кнопки отправки. А вот index.html овер.
<section class="send"> <form action="#" id="send-container"> <input type="text" name="messageInp" id="messageInp" placeholder="Type Your Message Here"> <button class="btn" type="submit">send</button> </form> </section>
Стиль.css:
Этот файл содержит все свойства CSS index.html.
Клиент.js:
Это связывает сервер с пользовательским интерфейсом. Создайте постоянный сокет, который извлекает данные с http://localhost:8000. Примечание. На http:localhost:8000 работает nodeServer.
const socket = io('http://localhost:8000');
Получает следующие элементы из DOM.
const form = document.getElementById('send-container'); const messageInput = document.getElementById('messageInp') const messageContainer = document.getElementById('chat-box')
Аудио для воспроизведения звука при присоединении нового пользователя, прибытии нового сообщения и уходе пользователя.
var audio = new Audio('../Assets/ting.mp3');
Функция Append используется для добавления сообщения в окно чата в dom. Он принимает два аргумента: сообщение и позицию.
MessageElement создает новый div, в который должно быть добавлено сообщение. Метод innerText используется для вставки сообщения в DOM. После этого добавьте сообщение и позицию в качестве класса в созданный div. После этого он добавляется к messageContainer, который содержит идентификатор окна чата.
После этого он проверяет позицию элемента, если он оставлен, затем воспроизводит звук, а currentTime = 0 используется для воспроизведения звука, когда звук все еще воспроизводится.
const append = (message, position)=>{ const messageElement = document.createElement('div'); messageElement.innerText = message; messageElement.classList.add('message'); messageElement.classList.add(position); messageContainer.append(messageElement); if(position =='left'){ audio.currentTime = 0; audio.play(); } }
Предлагает пользователю ввести имя, чтобы присоединиться к чату, и запускает событие нового пользователя, присоединившегося с именем пользователя.
const name = prompt("Enter your name to join"); socket.emit('new-user-joined', name);
Это запускает событие, связанное с пользователем, чтобы показать другому пользователю, что новый пользователь присоединился.
socket.on('user-joined', name =>{ append(`${name} joined the chat`, 'left') })
Эти пожары получают событие, которое показывает сообщение, когда сообщение получено другим пользователем.
socket.on('receive', data =>{ append(`${data.name}: ${data.message}`, 'left') })
Они срабатывают, когда пользователь уходит, и показывают всем пользователям, что любой пользователь ушел.
socket.on('left', name =>{ append(`${name} left the chat`, 'left') })
Если из т.е. сообщение отправляется, то они отправляют сообщение на сервер. И запускает событие отправки.
form.addEventListener('submit', (e) => { e.preventDefault(); const message = messageInput.value; append(`You: ${message}`, 'right'); socket.emit('send', message); messageInput.value = '' })
Вот и все, приложение чатов готово к использованию.
Заключение:
Socket.io — отличный способ создать приложение чата в реальном времени, которое отправляет сообщение пользователю, если на сервере есть обновление, и пользователь также может отправлять сообщение на сервер, если у пользователя есть обновление. Что делает его сверхмощным.