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

0
496

Пишем чат на Node.js и socket.io

WebSockets and socket.io

JavaScript

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

Chat приложение

Архитектура приложения

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

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

Пишем чат на Node.js и socket.io

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

Пишем чат на Node.js и socket.io

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

Пишем чат на Node.js и socket.io

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

Пишем чат на Node.js и socket.io

Пишем чат на Node.js и socket.io

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

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

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

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

Мы также будем слушать любые звонки, сделанные в «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 и socket.io: заключение 

Возможно вам будет интересно:

Фронтенд-разработчик (frontend) — подборка полезных инструментов

 

источник