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

4616

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

WebSockets and socket.io

JavaScript

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

$ npm install --save package_name
“start”: “nodemon app”
$ npm run start

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

<script src=”https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script src=”http://code.jquery.com/jquery-latest.min.js"></script><script src=”chat.js”></script>

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

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

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

Сообщение

app.js:

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

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

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

Пишем чат на Node.js и socket.io: заключение 

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

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

 

источник