Автор оригинала: Ashay Mandwarya.
Ashay Mandwarya Blockedunblockfollowfollioning.
4 ноября
Приложения обмена сообщениями на сегодняшний день выравниваются в популярности, буквально тысячи приложений на основе чата, и они также очень популярны среди пользователей, поскольку они предоставляют личное прикосновение, соединяясь во время соединения мира.
Socket.io logo (сайт socket.io)
Чтобы создать приложение для чата в реальном времени, должна быть система в реальном времени для отправки данных приема. Это может быть достигнуто с помощью веб-розетки. Вместо использования API Web-Sockets напрямую мы будем использовать Socket.IO. Мы также будем использовать Express.io с Node.js, чтобы упростить здание веб-приложение более простое.
Учебник в основном будет включать в себя заднюю часть, и читатели могут использовать любую из доступных библиотек CSS для UI.
Мы будем использовать визуальный студийный код для проекта.
– построить сервер
npm init
Это начнет новый проект, предоставить всю необходимую информацию. Это будет выглядеть так.
{
"name": "app",
"version": "1.0.0",
"description": "Chat app",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ashay Mandwarya",
"license": "ISC"
}
Установите зависимости.
npm install --save socket.io express
Это установит все зависимости, и теперь мы можем начать кодировать для сервера.
Создайте два файла в папке проекта в качестве Server.js и index.html. Откройте Server.js.
В Server.js начните со следующего кода
var express=require('express');
var app=express();
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html');
});
var server=require('http').Server(app);
io=require('socket.io')(server);
server.listen(3000);
Приведенный выше код устанавливает основы для настройки сервера. Он использует как Socket.IO, так и экспрессные зависимости для создания сервера. Последняя строка запускает сервер в порту 3000.
Настройка клиента
Это довольно просто. Откройте index.html и начните с следующего кода.
Document
Строка № 9 и содержание в последнем теге скрипта – это единственное требование, чтобы ваш клиентский чал готов.
Давайте начнем написать код для обмена сообщениями в реальном времени.
Код для приложения
index.html.
- Линия 25 => Строка 25 – это всего лишь сокращение для документа. Докурируется (функция () {}). Ниже приведены все элементы кнопки Text-Box связаны с переменной, и если вы использовали события в JavaScript раньше, вы знаете, насколько просто это делает.
- Линия 30 => Линия 30 действует при вводе вашего имени и нажмите «Отправить». Это регистрирует пользователя с сервером и испускает событие. Эти события возникают от Socket.io. Вы просто должны назвать событие и написать функцию, основанную на том, что вы хотите сделать с событием с данными, которые вы хотите отправить другим.
- Линия 46 => Линия 46 действует, когда мы вводим имя приемника с сообщением. Мероприятие названо MSG. Он отправляет детали приемника с сообщением на сервер.
- Линия 53 => Линия 53 отвечает на событие, поднятое сервером, и используется для получения сообщения от других клиентов.
server.js.
Когда новый клиент подключается к серверу Socket.IO поднимает событие, называемое соединением. Событие соединения утверждает, что новый клиент подключен к серверу. Это помогает отслеживать, сколько и что с клиентами.
- Линия 12 => Эта линия реагирует на событие подключения, и вы можете сделать понравиться приветственное сообщение или успешное сообщение для подключения.
- Линия 14 => Линия 14 отвечает на новое событие, испускаемое клиентом в строке 30. После получения события он отвечает функцией, которая принимает данные и функцию обратного вызова. Данные во имя клиента. Он проверяет, является ли имя уникальным входом в объекты пользователей, чтобы отслеживать и пользователи уникальными. Функция обратного вызова отвечает с помощью True или False на основе проверки уникального пользователя. После обратного вызова клиент получает значение как TRUE или FALSE и отвечает соответственно.
- Линия 26 => Линия 26 отвечает на событие MSG клиента. Он также имеет функцию, которая принимает данные параметров и функцию обратного вызова. Здесь функция обратных вызовов только для отправки данных обратно YO пользователю, чтобы он мог добавить сообщение в окно чата, которые могут быть легко выполнены на стороне клиента. Это просто для демонстрации использования обратных вызовов. Линия 29 – самая важная линия, которая помогает создавать частные чаты, которые наиболее важны для достижения частных чатов. Он принимает имя приемника и создает комнату с клиентом и приемником и отправляет сообщение в комнату.
Это самое простое приложение для чата, которое мы можем создать. Это маленький и легкий вес, но эффективен. Вы можете добавить свои функции в приложении с лучшими пользовательскими интерфейсами, и вы хотите пойти.