Сетевое программирование на JavaScript: от сокетов до WebSocket

Зачем JavaScript в сетевом программировании?

Когда-то JavaScript был просто языком для анимации кнопок и проверки форм. Сегодня же это мощнейший инструмент для создания сетевых приложений. Сетевое программирование на JavaScript открывает двери в мир реального времени: чаты, онлайн-игры, стриминг данных, системы мониторинга и даже собственные веб-серверы.

В этой статье мы не будем нудно переписывать документацию. Мы пройдем путь от простого HTTP-запроса до полноценного WebSocket-соединения. Вы увидите, как Node.js превращает браузерный язык в мощный сетевой движок. Готовы? Поехали!

Основы: HTTP и модули Node.js

Любое сетевое программирование на JavaScript начинается с понимания протоколов. Самый популярный — HTTP. В браузере вы делаете fetch() или XMLHttpRequest, но серверная часть требует другого подхода.

Создаем простой HTTP-сервер

Node.js предоставляет встроенный модуль http. Вот минимальный пример, который отвечает "Привет, мир!" на любой запрос:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Привет, мир! Сетевое программирование на JavaScript работает!\n');
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Сервер запущен на http://127.0.0.1:3000/');
});

Запустите этот код через node server.js и откройте браузер. Вы увидите наше сообщение. Просто, правда? Но это только начало. Настоящая магия начинается, когда мы работаем с сокетами.

Работа с TCP сокетами в JavaScript

HTTP — это протокол прикладного уровня, построенный поверх TCP. Если вам нужен полный контроль над передачей данных, используйте сокеты JavaScript. В Node.js за это отвечает модуль net.

TCP-сервер: принимаем данные

Представьте, что вы пишете простой эхо-сервер. Клиент подключается, отправляет сообщение, сервер возвращает его обратно. Вот как это выглядит:

const net = require('net');

const server = net.createServer((socket) => {
  console.log('Клиент подключился');

  socket.on('data', (data) => {
    console.log('Получено:', data.toString());
    socket.write('Эхо: ' + data.toString());
  });

  socket.on('end', () => {
    console.log('Клиент отключился');
  });
});

server.listen(8080, () => {
  console.log('TCP-сервер слушает порт 8080');
});

Теперь напишем клиента для этого сервера. Клиент-сервер на JavaScript — это двухстороннее движение:

const net = require('net');

const client = net.createConnection({ port: 8080 }, () => {
  console.log('Подключились к серверу');
  client.write('Привет, сервер!');
});

client.on('data', (data) => {
  console.log('Ответ сервера:', data.toString());
  client.end();
});

client.on('end', () => {
  console.log('Отключились от сервера');
});

Запустите сначала сервер, потом клиент. Вы увидите, как данные путешествуют туда-обратно. Это основа всех сетевых протоколов JavaScript.

WebSocket: реальное время без задержек

HTTP и TCP хороши, но у них есть проблема: чтобы получить новые данные, клиент должен постоянно делать запросы (polling). Это неэффективно. WebSocket в JavaScript решает эту проблему — после установки соединения сервер сам может отправлять данные в любой момент.

WebSocket на Node.js (библиотека ws)

Установите библиотеку: npm install ws

Сервер:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8081 });

wss.on('connection', (ws) => {
  console.log('WebSocket клиент подключился');

  ws.on('message', (message) => {
    console.log('Получено:', message.toString());
    // Отправляем обратно
    ws.send(`Сервер получил: ${message}`);
  });

  // Отправляем приветствие через 2 секунды
  setTimeout(() => {
    ws.send('Привет от сервера! Это real-time сообщение');
  }, 2000);
});

console.log('WebSocket сервер запущен на ws://localhost:8081');

Клиент (браузерный или Node.js):

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8081');

ws.on('open', () => {
  console.log('Соединение установлено');
  ws.send('Привет, сервер!');
});

ws.on('message', (data) => {
  console.log('Получено от сервера:', data.toString());
});

ws.on('close', () => {
  console.log('Соединение закрыто');
});

Обратите внимание: сервер сам инициирует отправку данных через setTimeout. Это невозможно в обычном HTTP. Real-time приложения на JavaScript строятся именно на таких механизмах.

Socket.IO: WebSocket с "плюшками"

Библиотека Socket.IO — это надстройка над WebSocket. Она добавляет автоматическое переподключение, комнаты, события и fallback на long-polling, если WebSocket недоступен. Это стандарт для сетевого программирования JavaScript в современных проектах.

Чат на Socket.IO за 5 минут

Установка: npm install socket.io и npm install socket.io-client

Сервер (app.js):

const http = require('http');
const { Server } = require('socket.io');

const server = http.createServer();
const io = new Server(server, {
  cors: { origin: '*' }
});

io.on('connection', (socket) => {
  console.log('Пользователь подключился:', socket.id);

  socket.on('chat message', (msg) => {
    console.log('Сообщение:', msg);
    // Рассылаем всем, кроме отправителя
    socket.broadcast.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('Пользователь отключился:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Сервер Socket.IO запущен на порту 3000');
});

Клиент (client.js):

const { io } = require('socket.io-client');

const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('Подключились к серверу с ID:', socket.id);
  socket.emit('chat message', 'Всем привет!');
});

socket.on('chat message', (msg) => {
  console.log('Новое сообщение:', msg);
});

Этот пример — основа для любого чата на JavaScript. Вы можете легко добавить комнаты, авторизацию и историю сообщений.

Практические советы для сет