it Новости Создание веб чата на Socket.io и Node JS

Создание веб чата на Socket.io и Node JS

29 955

15 февраля 2019 в 17:02

При помощи 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});
	});

});

Для более подробного пояснения можете также посмотреть видео урок:

Полезные ссылки из видео:

Node JS;
Socket IO;
Установка jQuery.

Больше интересных новостей

Самые медленные из популярных языков программирования

Расширения Chrome, которые упростят вашу работу

Raspberry Pi - что это? Языки программирования для Raspberry

Бесплатные игры для оттачивания навыков работы с Python: ТОП-4

Комментарии (2)