Введение
В этом руководстве вы узнаете, как создать простое приложение для чата с использованием 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. Отсюда вы можете добавить дополнительные функции, такие как поддержка имен пользователей, приватные чаты, прямые сообщения и многое другое.
