Создание веб чата на Socket.io и Node JS
Coding
При помощи Socket.io и Node JS можно создавать потрясающие программы. В ходе статьи мы расскажем как создать веб чат используя сокеты и локальный сервер.
Мы расскажем про разработку веб сервисов на платформе Socket.io. Для работы с чатом необходимо будет ввести имя, после чего пользователи смогут обмениваться сообщениями будучи в разных городах и даже странах.
Мы реализуем программу при помощи платформы Socket.io, а также Node JS и Express. Socket.IO — JavaScript-библиотека, выполняющая роль программы для обмена данными между клиентами и сервером. Все обновления происходят в режиме реального времени, что позволяет создавать функционал на подобии веб чата, онлайн игры или других мультиплеерных сервисов.
Благодаря сокетам мы можем отправлять данные на один сервер, а далее все клиенты (пользователи), подключенные к этому серверу, будут видеть всю информацию и взаимодействовать с ней. На основе Socket.IO можно создавать как небольшие чат программы, так и полноценные мультиплеерные игры, запускаемые через браузер.
Для начала разработки необходимо установить Node JS, а также настроить проект, добавив в него необходимые библиотеки.
Для установки Node перейдите на их официальный сайт и выполните установку программы на ваш компьютер.
Создайте папку и откройте её через командную строку или терминал. В командной строке пропишите команду npm init. У вас спросят различные настройки, введите их:
Далее выполните установку npm install express и npm install socket.io. Это два пакета, которые понадобятся для разработки программы.
Далее создайте два файла: index.js, а также index.html. Оба эти файла представлены ниже вместе с комментариями.
HTML код программы:
<!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">
<!-- Подключение Bootstrap чтобы все выглядело красиво -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Чат программа</title>
<!-- Свои стили -->
<style>
body {
background: #fcfcfc;
}
</style>
</head>
<body>
<!-- Создание меню на сайте (без функций) -->
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto">itProger</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Главная</a>
<a class="p-2 text-dark" href="#">Про нас</a>
<a class="p-2 text-dark" href="#">Поддержка</a>
<a class="p-2 text-dark" href="#">Цены</a>
</nav>
<a class="btn btn-outline-primary" href="#">Регистрация</a>
</div>
<!-- Основная часть страницы -->
<div class="container">
<div class="py-5 text-center">
<h2>Чат программа</h2>
<p class="lead">Укажите ваше имя и начинайте переписку</p>
</div>
<div class="row">
<div class="col-6">
<!-- Форма для получения сообщений и имени -->
<h3>Форма сообщений</h3>
<form id="messForm">
<label for="name">Имя</label>
<input type="text" name="name" id="name" placeholder="Введите имя" class="form-control">
<br>
<label for="message">Сообщение</label>
<textarea name="message" id="message" class="form-control" placeholder="Введите сообщение"></textarea>
<br>
<input type="submit" value="Отправить" class="btn btn-danger">
</form>
</div>
<div class="col-6">
<h3>Сообщения</h3>
<!-- Вывод всех сообщений будет здесь -->
<div id="all_mess"></div>
</div>
</div>
</div>
<!-- Подключаем jQuery, а также Socket.io -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// У каждого пользователя будет случайный стиль для блока с сообщенями,
// поэтому в этом кусочке кода мы получаем случайные числа
var min = 1;
var max = 6;
var random = Math.floor(Math.random() * (max - min)) + min;
// Устаналиваем класс в переменную в зависимости от случайного числа
// Эти классы взяты из Bootstrap стилей
var alertClass;
switch (random) {
case 1:
alertClass = 'secondary';
break;
case 2:
alertClass = 'danger';
break;
case 3:
alertClass = 'success';
break;
case 4:
alertClass = 'warning';
break;
case 5:
alertClass = 'info';
break;
case 6:
alertClass = 'light';
break;
}
// Функция для работы с данными на сайте
$(function() {
// Включаем socket.io и отслеживаем все подключения
var socket = io.connect();
// Делаем переменные на:
var $form = $("#messForm"); // Форму сообщений
var $name = $("#name"); // Поле с именем
var $textarea = $("#message"); // Текстовое поле
var $all_messages = $("#all_mess"); // Блок с сообщениями
// Отслеживаем нажатие на кнопку в форме сообщений
$form.submit(function(event) {
// Предотвращаем классическое поведение формы
event.preventDefault();
// В сокет отсылаем новое событие 'send mess',
// в событие передаем различные параметры и данные
socket.emit('send mess', {mess: $textarea.val(), name: $name.val(), className: alertClass});
// Очищаем поле с сообщением
$textarea.val('');
});
// Здесь отслеживаем событие 'add mess',
// которое должно приходить из сокета в случае добавления нового сообщения
socket.on('add mess', function(data) {
// Встраиваем полученное сообщение в блок с сообщениями
// У блока с сообщением будет тот класс, который соответвует пользователю что его отправил
$all_messages.append("<div class='alert alert-" + data.className + "'><b>" + data.name + "</b>: " + data.mess + "</div>");
});
});
</script>
</body>
</html>
JavaScript код программы:
// Подключение всех модулей к программе
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
// Отслеживание порта
server.listen(3000);
// Отслеживание url адреса и отображение нужной HTML страницы
app.get('/', function(request, respons) {
respons.sendFile(__dirname + '/index.html');
});
// Массив со всеми подключениями
connections = [];
// Функция, которая сработает при подключении к странице
// Считается как новый пользователь
io.sockets.on('connection', function(socket) {
console.log("Успешное соединение");
// Добавление нового соединения в массив
connections.push(socket);
// Функция, которая срабатывает при отключении от сервера
socket.on('disconnect', function(data) {
// Удаления пользователя из массива
connections.splice(connections.indexOf(socket), 1);
console.log("Отключились");
});
// Функция получающая сообщение от какого-либо пользователя
socket.on('send mess', function(data) {
// Внутри функции мы передаем событие 'add mess',
// которое будет вызвано у всех пользователей и у них добавиться новое сообщение
io.sockets.emit('add mess', {mess: data.mess, name: data.name, className: data.className});
});
});