Создайте веб-приложение для чата с помощью node.js и socket.io (включая обмен личными сообщениями).
Ашай МандварияЗаблокированоUnblockFollowFollowing
4 ноя
Приложения для обмена сообщениями в настоящее время набирают популярность, существуют буквально тысячи приложений для чата, и они также очень популярны среди пользователей, поскольку обеспечивают индивидуальный подход, соединяя мир воедино.
Логотип Socket.io (веб-сайт Socket.io)
Чтобы создать приложение для чата в реальном времени, должна быть система реального времени для отправки-получения данных. Этого можно добиться с помощью веб-сокетов. Вместо прямого использования API веб-сокетов мы будем использовать socket.io. Мы также будем использовать Express.io с node.js, чтобы упростить создание веб-приложения.
Учебник в основном будет включать внутреннюю часть, и читатели могут использовать любую из доступных библиотек CSS для части пользовательского интерфейса.
Мы будем использовать код Visual Studio для проекта.
— Собрать сервер
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 и начните работу с приведенным ниже кодом.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="box">
</div>
<form id="register">
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
<form id="chat">
<input type="text" id="to">
<input type="text" id="message">
<input type="submit">
</form>
<script>
var socket=io.connect();
</script>
</body>
</html>
Строка номер 9 и содержимое последнего тега скрипта — единственное требование, чтобы ваш клиентский чат был готов.
Давайте начнем писать код для обмена сообщениями в реальном времени.
Код для приложения
index.html
- Строка 25 => Строка 25 — это просто сокращение для document.ready(function(){}). Ниже этого все элементы, кнопки и текстовое поле, связаны с переменной, и если вы раньше использовали события в javascript, вы знаете, насколько это упрощает работу.
- Строка 30 => Строка 30 действует, когда вы вводите свое имя и нажимаете «Отправить». Это регистрирует пользователя на сервере и генерирует событие. Эти события возникают из socket.io. Вам просто нужно назвать событие и написать функцию, основанную на том, что вы хотите сделать с событием с данными, которые вы хотите отправить другим.
- Строка 46 => Строка 46 срабатывает, когда мы вводим имя получателя сообщения. Событие называется msg. Он отправляет детали получателя с сообщением на сервер.
- Строка 53 => Строка 53 отвечает на событие, вызванное сервером, и используется для получения сообщений от других клиентов.
сервер.js
Когда новый клиент подключается к серверу, socket.io вызывает событие, называемое соединением. Событие подключения указывает, что новый клиент был подключен к серверу. Это помогает отслеживать, сколько и что с клиентами.
- Строка 12 => Эта строка реагирует на событие подключения, и вы можете сделать приветственное сообщение или сообщение об успешном подключении.
- Строка 14 => Строка 14 отвечает на новое событие, сгенерированное клиентом в строке 30. После получения события он отвечает функцией, которая принимает данные, и функцией обратного вызова. Данные на имя клиента. Он проверяет, является ли имя уникальной записью в объектах пользователей, чтобы отслеживать, а пользователи уникальны. Функция обратного вызова возвращает значение true или false в зависимости от проверки уникальности пользователя. После обратного вызова клиент получает значение true или false и соответственно отвечает.
- Строка 26 => Строка 26 отвечает на событие msg клиента. Он также имеет функцию, которая принимает данные параметров и функцию обратного вызова. Здесь функция обратного вызова предназначена только для отправки данных обратно пользователю, чтобы он мог добавить сообщение в окно чата, что также можно легко сделать на стороне клиента. Это просто для демонстрации использования обратных вызовов. Строка 29 — самая важная строка, которая помогает в создании приватных чатов, которые наиболее важны для достижения приватных чатов. Он принимает имя получателя и создает комнату с клиентом и получателем и отправляет сообщение в комнату.
Это самое простое приложение для чата, которое мы можем создать. Он небольшой и легкий, но эффективный. Вы можете добавить свои функции в приложение с улучшенным пользовательским интерфейсом, и все готово.
