Создаем приложение для чата с помощью node.js и socket.io

Создаем приложение для чата: WebSockets and socket.io

JavaScript

Настройка среды разработки

Chat приложение

Создаем приложение для чата, архитектура приложения

Создаем приложение для чата с помощью node.js и socket.io

Серверная часть:

Создаем приложение для чата с помощью node.js и socket.io

Этот набор кода фактически инициализирует наше экспресс-приложение. Если вы перейдете на http: // localhost: 3000, вы увидите сообщение.
Теперь нам просто нужно настроить socket.io, чтобы быть готовым глубоко погрузиться в мир WebSocket.

Создаем приложение для чата

Здесь объект io предоставит нам доступ к библиотеке socket.io. Теперь объект io прослушивает каждое соединение с нашим приложением. Каждый раз, когда подключается новый пользователь, он выводит на экран «Новый пользователь подключен».
Если вы попытаетесь перезагрузить наш браузер на localhost, ничего не произойдет … Почему? Потому что наша клиентская сторона еще не готова.

Создаем приложение для чата

Клиентская часть

Создаем приложение для чата

Клиентская часть

Создаем приложение для чата

Создаем приложение для чата

Отправлять и получать данные

Пользователь

Создаем приложение для чата

Мы также будем слушать любые звонки, сделанные в «change_username». Если на это событие отправлено сообщение, имя пользователя будет изменено.
На стороне клиента цель состоит в том, чтобы сделать наоборот. Каждый раз, когда нажимается кнопка смены имени пользователя, клиент отправляет событие с новым значением.

Создаем приложение для чата с помощью node.js и socket.io

Создаем приложение для чата- сообщение

Создаем приложение для чата с помощью node.js и socket.io

app.js:

Создаем приложение для чата с помощью node.js и socket.io

Создаем приложение для чата с помощью node.js и socket.io

Для крутости нашего приложения добавим некоторые улучшения, теперь когда кто то будет печатать сообщение мы увидим это

Создаем приложение для чата с помощью node.js и socket.io

Создаем приложение для чата с помощью node.js и socket.io

Давайте добавим цвета к пользователям

Создаем приложение для чата с помощью node.js и socket.io

После рефакторигнга получится такой результат:

Создаем приложение для чата с помощью node.js и socket.io

Создаем приложение для чата- Заключение

Возможно вам будет интересно — Подборка Node.js-библиотек, о которых стоит знать

источник