I-Discuss: Обсудить идею

Цель:

Чтобы создать веб-приложение для чата в реальном времени. Технология, необходимая для создания приложения, — это vanilla JS, Node.js и socket.io.

Демо: https://i-discuss-chat-app.netlify.app/

Исходный код: https://github.com/Gaurav-pandey04/I-Discuss-Discuss-Ideas

Обзор:

Этот проект содержит три папки, а именно

  1. Активы • Ping.mp3 • Icon.png
  2. Внешний интерфейс • Index.html • Style.css • Client.js
  3. 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 — отличный способ создать приложение чата в реальном времени, которое отправляет сообщение пользователю, если на сервере есть обновление, и пользователь также может отправлять сообщение на сервер, если у пользователя есть обновление. Что делает его сверхмощным.