Как создать чат-приложение с помощью Node.js и Socket.IO

Введение

В этом руководстве вы узнаете, как создать простое приложение для чата с использованием Node.js и Socket.IO.

Предпосылки

Чтобы следовать этому руководству, вам понадобятся:

Node.js и npm установлены на вашем компьютере. Вы можете скачать оба отсюда.
Редактор кода, например Visual Studio Code.
Базовое понимание JavaScript и HTML.

Установка зависимостей

Откройте терминал или командную строку и перейдите в папку, в которой вы хотите создать свой проект. Оказавшись там, выполните следующую команду, чтобы инициализировать новый проект Node.js:

npm init -y

Затем установите express и socket.io с помощью npm:

npm install express socket.io

Создание сервера

Создайте новый файл с именем server.js и вставьте следующий код:

const express = require('express');
 const http = require('http');
 const socketIo = require('socket.io');

 const app = express();
 const server = http.createServer(app);
 const io = socketIo(server);

 app.use(express.static('public'));

 io.on('connection', (socket) => {
 console.log('New client connected');

 socket.on('message', (message) => {
 io.emit('message', message);
 });

 socket.on('disconnect', () => {
 console.log('Client disconnected');
 });
 });

 server.listen(3000, () => {
 console.log('Listening on port 3000');
 });

Этот код инициализирует экспресс-сервер и Socket.IO, а также настраивает приложение для обслуживания статических файлов из public папки. Он также прослушивает события подключения и отключения сокета, а также событие message для пересылки полученных сообщений всем подключенным клиентам.

Создание клиента

Создайте новую папку с именем public и внутри нее создайте новый файл с именем index.html со следующим кодом:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Chat App</title>
 </head>
 <body>
 <ul id="messages"></ul>
 <form id="form">
 <input id="input" autocomplete="off" /><button>Send</button>
 </form>
 <script src="/socket.io/socket.io.js"></script>
 <script>
 const socket = io();
 const form = document.getElementById('form');
 const input = document.getElementById('input');

 form.addEventListener('submit', function(e) {
 e.preventDefault();
 if (input.value) {
 socket.emit('message', input.value);
 input.value = '';
 }
 });

 socket.on('message', function(message) {
 const item = document.createElement('li');
 item.textContent = message;
 document.getElementById('messages').appendChild(item);
 window.scrollTo(0, document.body.scrollHeight);
 });
 </script>
 </body>
 </html>

Этот HTML-код содержит простую форму ввода и элемент <ul> для отображения сообщений. Код JavaScript обрабатывает соединение Socket.IO, отправляя сообщения на сервер, когда пользователь отправляет форму, и добавляя новые сообщения в список, когда он получает сообщение от сервера.

Запуск приложения

Теперь вы можете запустить сервер с помощью следующей команды:

node server.js

Откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть свое простое приложение чата. Вы можете открыть несколько вкладок или окон браузера, чтобы имитировать нескольких пользователей и посмотреть, как сообщения передаются всем клиентам.

Заключение

Поздравляем! Вы только что создали простое приложение для чата, используя Node.js и Socket.IO. Отсюда вы можете добавить дополнительные функции, такие как поддержка имен пользователей, приватные чаты, прямые сообщения и многое другое.