Как сделать чат на сокетах

Добавил пользователь Валентин П.
Обновлено: 10.09.2024

NodeJS дает мне возможность писать внутренний код на одном из моих любимых языков: JavaScript. Это идеальная технология для создания приложений в реальном времени. В этом руководстве я покажу вам, как создать приложение для веб-чата, используя ExpressJS и Socket.io .

Кстати, если вы хотите найти готовое решение для чата с помощью Node.js, взгляните на Yahoo! Messenger node.JS BOT на рынке Envato .

Настройка среды

После того, как вы установили NodeJS, вы готовы установить необходимые инструменты.

1. ExpressJS — это будет управлять сервером и ответом пользователю
2. Jade — шаблонный движок
3. Socket.io — обеспечивает связь в реальном времени между интерфейсом и сервером

Продолжая, внутри пустой директории, создайте файл package.json со следующим содержимым.

Используя консоль (в Windows — командная строка), перейдите к своей папке и выполните:

В течение нескольких секунд вы загрузите все необходимые зависимости в каталог node_modules .

Разработка бэкэнда

Давайте начнем с простого сервера, который доставит HTML-страницу приложения, а затем продолжим с более интересными моментами: обмен данными в реальном времени. Создайте файл index.js со следующим основным кодом expressjs :

Выше мы создали приложение и определили его порт. Затем мы зарегистрировали маршрут, который в данном случае представляет собой простой запрос GET без каких-либо параметров. На данный момент обработчик маршрута просто отправляет некоторый текст клиенту. Наконец, конечно, внизу, мы запускаем сервер. Для инициализации приложения из консоли выполните:

Поскольку мы будем использовать внешний файл JavaScript, который будет содержать внешнюю логику, нам нужно сообщить ExpressJS, где искать такие ресурсы. Создайте пустой каталог public и добавьте следующую строку перед вызовом метода .listen .

Все идет нормально; у нас есть сервер, который успешно отвечает на запросы GET. Теперь пришло время добавить интеграцию с Socket.io . Измените эту строку:

Выше мы передали сервер ExpressJS в Socket.io. По сути, наше общение в реальном времени будет происходить через один и тот же порт.

Разработка Front-end

Создайте chat.js и поместите его в public каталог вашего приложения. Вставьте следующий код:

Всем привет, недавно у меня появилось желание освоить библиотеку Socket.IO и создать чат-приложение, так сказать, закрепить теоретические знания практикой. Весь стек технологий (без Socket,IO), который применен в приложении - я активно использую в работе над коммерческими проектами.

Данную библиотеку легко внедрять и в уже рабочий проект, но сегодня речь пойдет о создании приложения с нуля.

Давайте приступим, сам не люблю долгие предисловия.

Настройка и установка базового шаблона Nuxt.js:

• У вас должен быть установлен Node.js, если его нет - установите.
• Если у вас версия NPM ниже чем 5.2 - установите npx глобально, используя права администратора.

$sudo npm install -g npx.

(тут более детальная информация о создании проекта).

1. Название проекта - “Nuxt-chat-app”
2. Описание - “Simple chat with Nuxt.js”
3. Имя автора - “Petr Borul”
4. Пакетный менеджер - “NPM”
5. UI Фреймворк - “Vuetify.js”
6. Server Framework - “Express”
7. Nuxt.js modules - “PWA”
8. Linting tools - “ESLint”
9. Test framework - “none”
10. Rendering mode - “Universal”

$npm install socket.io --save

В данной библиотеке можно вызывать веб сокет ивенты и подписываться на них через Vuex store, но для первого знакомства с библиотекой - это слишком не понятно, поэтому я реализовал логику на уровне компонентов (тут есть описание двух способов

$npm install vue-socket.io --save

Полную информацию по структуре папок Nuxt.js вы можете найти здесь.

• Папка pages содержит представления (views) и маршруты (routes). Фреймворк считывает все файлы .vue внутри папки и создает маршрутизатор для вашего приложения.
• Папка plugins содержит JavaScript-плагины, запускаемые перед созданием экземпляра корневого приложения Vue.js (тут будет содержаться наш плагин socket.io).
• Папка middleware содержит функции промежуточной обработки (именованные создаются в данной папке, если вы хотите указать анонимные - вы можете объявить их внутри компонента).
• Файл nuxt.config.js содержит пользовательскую конфигурацию Nuxt.js.
• Папка store содержит файлы Vuex хранилища. После создания файла index.js в этой папке хранилище активируется автоматически.

Итак, мы разобрались с основными моментами, давайте приступим к самой разработке.

В папке server есть файл index.js - немного изменим его и вынесем конфигурацию сервера в отдельный файл: app.js.

Добавим конфигурацию сервера в index.js:

index.js

Далее укажем Node.js слушать сконфигурированный сервер:

Далее создадим файл socket.client.js и добавим его в папку plugins , мы указали расширение файла ‘client’, потому что он нам нужен только на стороне клиента (тут есть полная информация о настройке плагинов).

socket.client.js

Теперь зарегистрируем его в файле nuxt.config.js:

С этого момента к нему можно обратиться в любом компоненте используя название файла this.$socket.emit() .

В файле app.js создадим две модели для работы с данными:

message.js:

users.js :

С сервером на данном этапе закончили, сейчас займемся клиентской частью В папке store создадим файл index.js и добавим хранилище:

index.js

Далее в папке pages в файл index.js добавим разметку (использую UI библиотеку Vuetify.js из-за Material Design, который мне очень нравится).

index.js :

При вызове метода submit () происходит валидация формы, и в случае успеха - мы отправляем событие на сервер this.$socket.emit() .

На сервер передаем строку с названием события, и функцию обратного вызова, после выполнения которой - мы получаем ID и присваиваем его объекту пользователя, далее записываем в хранилище и направляем на страницу чата.

Давайте опишем обработку событий на сервере:

1. Событие “connection” вызывается, когда пользователь получает соединение с сервером.
2. Далее мы подписываемся на событие, полученное от клиента, с помощью socket.on() .
3. Данная функция принимает строку “Название события” и функцию обратного вызова.
4. Добавляем нового пользователя в список пользователей и присваиваем ID, соответствующий ID сокет подключения.
5. Отдаем ID на сторону клиента.

Теперь создадим разметку файла default.vue в папке layouts он устанавливается по умолчанию для всех компонентов в папке pages eсли не указан layout is not indicated (тут подробная информация).

default.vue :

Тег отвечает за отображение страниц на разных роутах

( тут более детальная информация про отображение в Nuxt.js).

Объект sockets отвечает за обработку событий, которые вызываются со стороны сервера.

Обработаем это события на сервере:

app.js

Теперь создаем файл auth.js в папке middleware и добавим функцию промежуточной обработки в компонент, чтобы на страницу чата мог попасть только авторизованный пользователь.

auth.js :

Так же при инициализации компонента отправляем событие “joinRoom” на сервер и передаем данные пользователя как payload в функцию обратной связи.

Давайте обработаем это событие на сервере:

app.js

• Добавляем пользователя в комнату, которую он указал при авторизации;
• Вызываем событие “updateUsers” у всех пользователей данной комнаты;
• Вызываем событие “newMessage” только у пользователя, вызвавшего событи “joinRoom” ;
• Вызываем событие “newMessage” для всех, кроме текущего пользователя (оповещаем о подключении нового пользователя).

Далее добавим разметку чата:

chat.vue :

Message.vue :

Со стилями всё так же, как и с предыдущим компонентом

ChatForm.vue :

Теперь обработаем это событие на сервере:

app.js

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

app.js

На данном этапе это последняя часть приложения. Вы можете запустить локальный сервер с помощью команды:

Сегодня сокеты очень популярны в веб-разработке. Они обеспечивают связь в реальном времени между браузером клиента и сервером. Есть много вариантов использования. Например, сокеты могут быть использованы для уведомлений или чатов. В этой статье я покажу вам, как использовать сокеты в приложении Laravel для чатов. Я буду использовать Pusher для трансляции своих событий, но вы можете использовать для этого Redis или Socket.io. В первой части этой статьи мы сделаем серверную часть приложения, а во второй части мы сосредоточимся на внешнем интерфейсе.

Часть 1: Бэкэнд

Pusher

Поскольку мы собрались транслировать наши события через Pusher, то мы должны установить его через Composer.

После того, как создали Pusher аккаунт, надо создать приложение в Pusher. После этого надо добавить в ваш файл .env идентификатор приложения, ключ, секрет и кластер. Используйте для этого PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET и PUSHER_APP_CLUSTER. И измените BROADCAST_DRIVER на pusher.

Необходимые данные будут показаны на панели инструментов после выбора приложения

Время начать делать чат

Создание контроллера

Начнем с создания контроллера, который будет обрабатывать входящие запросы:

Нам также нужно создать маршрут в файле routes/api.php.

Событие

Класс MessageSend будет транслироваться в канал chatbox, являющийся публичным. Это определяется в методе broadcastOn.

Вот как выглядит реализация:

Примечание: Класс MessageSend реализует интерфейс ShouldBroadcast.

BroadcastServiceProvider

Прежде чем мы сможем начать трансляцию, надо зарегистрировать App\Providers\BroadcastServiceProvider. Это можно сделать, раскомментировав этого провайдера в массиве провайдеров в файле config/app.php.

Поскольку мы внесли изменения в конфиг, то нам нужно выполнить следующую команду, чтобы обновить файл кэша конфигурации:

Часть 2: Интерфейс

Получение трансляций

Для получения трансляций мы будем использовать библиотеку Javascript, которая называется Laravel Echo. Эта библиотека позволяет очень легко слушать трансляции и подписываться на каналы. Мы также установим pusher-js, так как мы используем Pusher для трансляции.

После того, как мы установили Laravel Echo и Pusher, мы должны создать экземпляр Laravel Echo в приложении. В конце файла resources/js/bootstrap.js находится код, который создает экземпляр Laravel Echo. Раскомментируйте эту часть кода.

Теперь, когда мы создали ChatboxComponent, давайте изменим welcome.blade.php, чтобы он использовал этот компонент.

Эти две строки кода автоматически зарегистрируют ваши компоненты Vue. Не забудьте запустить

Поболтаем

Теперь можно начать общение в чате. Чтобы протестировать приложение, откройте две вкладки в вашем браузере, одну из них в режиме инкогнито и просто начните печатать!

Отладка

Если у вас возникнут какие-либо проблемы, то в Pusher есть отличная консоль отладки, которая будет логировать любые действия, происходящие в ваших сокетах. Просто перейдите на панель инструментов Pusher и выберите вкладку Debug console. Вы можете проверить, подключается ли клиент к Pusher и транслируются ли события.

BroadcastException

Поздравляю! Чат готов. Я надеюсь, что эта статья помогла вам реализовать сокеты в Laravel.

Сетевое программирование на C ++: реализация простого чата в режиме сервер / клиент

Прекратите говорить чушь, просто перейдите к коду

[Текстовые описания записаны в примечаниях]

Реализация сервера

Клиентская реализация

Результаты приведены ниже

Основная часть кода остается неизменной, просто добавьте цикл while в часть передачи данных.

сервер

Клиент

Изображение эффекта

Но здесь есть проблема, потому что в цикле while получение и отправка всегда выполняются по порядку и не могут выполняться одновременно, поэтому они могут говорить только по очереди, и один человек произносит одно предложение. Начнем с клиента. Причина в том, что send () и recv () являются функциями перегрузки!

Читайте также:

  
• Тент на лодку казанка м своими руками
  
• Пересвет приборной панели газель некст своими руками
  
• Как сделать чтобы было нормально
  
• Как сделать шаблон для заточки резцов
  
• Как сделать черный чай