Часть 1 - Чат на React, Node.js и TailwindCSS: Протоколы и сервер
Часть 2 - Чат на React, Node.js и TailwindCSS: Фронт

Синхронизация состояния: подводные камни

WebSocket создает иллюзию простоты - отправил событие, получил ответ, обновил UI. На практике между этими шагами куча точек отказа, и каждая может привести к рассинхронизации...

Часть 1 - Чат на React, Node.js и TailwindCSS: Протоколы и сервер
Часть 3 - Чат на React, Node.js и TailwindCSS: Синхронизация, валидация, шифрование, демо-приложение

React на клиенте: компоненты без фанатизма

React для чата - естественный выбор, но я видел проекты где разработчики строили архитектуру уровня Facebook Messenger для обмена десятком...

Я открываю GitHub и вижу еще пятьдесят репозиториев с чат-приложениями. Зачем создавать новое? Вопрос резонный, но давайте разберемся по честному. Большинство туториалов по чатам делятся на два лагеря. Первые показывают игрушечные примеры на двадцать строк кода, которые в продакшене развалятся от первой сотни пользователей. Вторые сразу погружают в энтерпрайз-архитектуру с микросервисами, Kubernetes и базами данных, когда тебе надо просто добавить...

Веб-сокеты — это технологический прорыв, который серьёзно тряхнул устои классического HTTP-взаимодейстия. Пока HTTP пыхтит и отдувается, открывая и закрывая соединение для каждого чиха, веб-сокеты устанавливают постоянный канал связи между клиентом и сервером, по...

Содержание блога

Бонус - клиент на WPF (файл server.js лежит в папке Server). Далее описан консольный проект на C# (клиент) и сервер на Node.js/socket.io/JavaScript.

Создаём пустую папку для сервера. Заходим в папку через консоль. Вводим команды:

npm init -y
npm i socket.io shortid

Создаём файл socket.js и копируем в него код, я написал комментарии к каждой строке:

...

Содержание блога

05.12.2025 - Heroku не имеет больше бесплатного плана. Для мультиплеера и бесплатного хостинга можно использовать Firebase хостинг + высокоскоростная база данных Firebase RTDB. Как её пользоваться можно узнать у встроенного в Firebase ИИ Gemini https://firebase.google.com/ Либо можно пользоваться бесплатным Node.js хостингом на https://render.com/, но приложение будет засыпать если им не пользоваться через 15 минут...

Blog content

I will show differences between "emit" and "broadcast" on server side.

In short:

• "emit" sends JSON data to a connected client
• "broadcast" sends JSON data to every client except the connected client

At first time create a connection between the server and the client using this instruction: 101. Socket.io Connection, JS/ES5

We have this callback function in "app.js":

...

Blog content

I will try to explain a process in step-by-step how to prepare server but it will be good if you will watch this video tutorial in parallel: Setup & Sending Files. Node.js Tutorial Guide


You need to download and install Node.js: https://nodejs.org/en/download/

At first test let's create a very simple server script locally that will write in the console terminal*"client connected" when client will be connected to...

Содержание блога

Создайте папку для проекта. Находясь в папке проекта, нужно набрать команды:
npm init -y
npm install express --save
npm install socket.io --save
npm install shortid --save (ставить shortid необязательно, но для примера нужно)

Создайте папку 'public', где будут хратиться файлы клиента: .html,...