Используйте сокет для создания крутого музыкального чата [с исходным кодом]

почему

Часто вижу, как другие используют и контактируют на работеwebsocket, Но я не могу использовать его для своей работы, поэтому я решил сделать личный проект, чтобы узнатьwebsocket, случайно увиделwebsocketСоздал проект музыкального чата ошибка, поэтому я разработал такой зал музыкального чата с нуля, я хочу записать формирование общего личного проекта и, кстати, поделиться им с вами.

• Адрес предварительного просмотра проектаЛобби музыкального чата

Разница между веб-сокетом и http

В нашем повседневном развитии наибольший контактhttpсоглашение,httpПротокол — это протокол, используемый на прикладном уровне, который основан наtcpсоглашение,httpПротокол для установления связи также должен иметь трехстороннее рукопожатие для отправки информации. В этом сценарии сервер пассивен, он не может работать и общаться с клиентом, а может только ждать, пока клиент инициирует инициативу.Это может подчеркнуть недостатки такого рода связи в некоторых сценариях, поэтомуwebsocketОно возникло.

WebSocketОн должен решить проблему, которую клиент инициирует несколькоhttpЗапросы к обозревателю ресурсов сервера должны пройти долгий круг обучающих задач, он реализует мультиплексирование, а это полнодуплексная связь. существуетwebSockeПо протоколу t клиент и браузер могут отправлять информацию одновременно. учредилWebSocketПосле этого сервер не должен отправлять в браузереrequestТолько после запроса информация может быть отправлена ​​в браузер. В это время у сервера есть инициатива отправлять информацию на сервер, когда он этого хочет. И информация не обязательно должна быть в части информации с головой иhttpДля длинной связи этот метод может не только снизить нагрузку на сервер. И некоторая избыточная информация также сокращается в информации.

Технический отбор

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

Моя личная привычка всегда заключалась в том, чтобы писать фронтенд и бэкенд отдельно, поэтому первая идея — разделить проект на два проекта: фронтенд и бэкенд, фронтенд выбирает стек технологий на данный момент используется компаниейvue, а серверная часть выбирает узел, с которым каждый внешний интерфейс может быстро начать работу. В то же время из-заwebsocket, я выбрал более полную комплектациюsocket-io. Между ними нет большой разницы. Грубо говоряsocket-ioправдаwebsocketинкапсуляция, но это не совсем правильно,Socket.ioбудетWebsocketи轮询（Polling）Механизмы и другие методы связи в реальном времени инкапсулированы в общий интерфейс, и их повседневное использование аналогично.

• внешний интерфейс

  1. Используйте интерфейсные фреймворкиvueЗаймитесь базовой фронтенд-разработкой
  2. использоватьsocket-io-clientальтернативаwebsocketдуплексная связь
  3. использовать комплектvue-socket.io-extended,правильноsocket-ioсуществуетvueПакет интеграции , который удобнее использовать в разработке

• задняя часть

  1. использоватьnodeРамкаnestjsBack-end разработка (поскольку она использовалась доexpress,koa,eggИ т. д. для разработки личных проектов, проектов компанииhapi, личное ощущение, разные фреймворки вызывают разные чувства,express,koaЭтот тип фреймворка официально не помогает ограничивать вашу разработку, единой спецификации нет, потому что у разных людей разные увлечения разработкой, а определение официального сайтаПрогрессивная платформа Node.js для создания эффективных, надежных и масштабируемых серверных приложений., дабы попробовать, так я тоже пришел попробоватьnestjsза эту разработку)
  2. База данных, чаще всего используемая в личных целяхmysql
  3. используемая формаnestjsдополнительныйtypeorm. (личное ощущениеtypeormНе использовал его раньшеsequelizeОн прост в использовании), конечно, как фронтенд, вы можете мало знать о бэкенде, и все зависит от личных предпочтений.
  4. Как музыкальный чат, конечно же, он неотделим от фонотеки.歌曲来源是通过爬虫获取xx音乐网站实现的

Общая идея проекта

создать音乐聊天室, вот видите, нужны две вещи,音乐,聊天功能, чтобы реализовать эти две функции, мы разделяем его на порядок, сначала реализуем чат, а затем реализуем музыку на основе чата.

1. Чтобы реализовать функцию чата, основной процесс внешнего и внутреннего интерфейса заключается в том, что внешний интерфейс инициирует запрос на соединение, а серверная часть обрабатывает соединение, записывает пользователя соединения и сохраняет основную личную информацию для распространения среди других пользователей. которые входят в чат.
2. Проверка разрешений проекта по-прежнему используетсяjsonwebtokenНо эта идея немного отличается от нашей повседневной проверки
3. Когда мы успешно подключимся, мы начнем воспроизводить музыку, и если песни, которые все слышат, синхронизированы, это означает, что для управления воспроизведением песен необходим бэк-энд, а не интерфейс, так как управлять музыкой из фонового воспроизведения тоже проблема
4. При этом, какие функции нам нужно реализовать, такие как текстовые сообщения в чате, отправка смайликов, отправка картинок, копирование и вставка картинок, заказ песен, вырезание песен, топ песен и т. д., давайте реализуем их по очереди

реализовать функцию

1. Проверка прав доступа к интерфейсу и серверу

Когда мы ежедневно используем внешние и внутренние взаимодействия, мы будем указывать их в заголовке запроса.token, и эту операцию мы обычно проходимaxiosЗапросите перехват для глобальных операций, тогда мыsocketКак действовать, во-первых, мы по-прежнему неразлучныtokenНаша проверка в конечном итоге будет использовать его для проверки, поэтому без входа в систему мы не можем обойтись. После входа в систему мы получаемtokenвнесен вsocketВ запросе, во фронтенд-проекте, мы обычно поддерживаем только одинsocketДля примера посмотрим, какие вещи нужны при инициализации.

официальный сайт сокетаПараметры инициализации в основном такие, какой тут прок от комплекта? На самом деле, когда мы используем этот комплект, в первую очередь$socketПрикреплено кVueНа прототипе , во-вторых, можно определить a иmethods,dataниже того же уровняsockets, мы можем иmethodsНравится, определите все нижеsocket-ioСобытия с сервера, если коснулисьwensocket, мы знаем, что сервер и клиент общаются через события, и две стороны будут запускать разные события, чтобы сообщить другой стороне, что делать. конкретный метод. Прежде всего, мы знаем, чтоtokenне может быть вaxiosУнифицированное глобальное дополнение, то с ним нужно разбираться самим.

Во-первых, когда мы используемsocketкогда мы отказываемся от традиционногоhttpметод для запуска новой концепции.Здесь он будет создан во время инициализации.Когда мы инициализируем, пользователь не вошел в систему, как может бытьtokenНу, так очевидно,tokenВремя инъекции должно быть до подключения и после входа в систему, поэтому мы можем пропустить здесь инициализацию и перейти к этапу подключения.

Частые просьбы к серверу о проверке будут потреблять ненужную производительность, интерфейс сначала оценивает, нетtokenЗаставлять пользователей входить в систему, прежде чем они смогут подключиться. Как подключиться?

Вставляем токен перед подключениемthis.$socket.client.io.opts.query, также можно вынести в заголовок запроса, в зависимости от личных потребностей, оба эти пункта прекрасны, мы просто хотим нести токен в процессе запроса соединения, тогда мы можем контролировать входящие параметры, кроме конечноtokenВы также можете указать больше параметров, чтобы увидеть, если это необходимо, и тогда сервер можетrequestизqueryЗалезайtokenпроверено. Таким образом, мы можем свободно контролировать время и параметры подключения, а контрольная сумма сервера в норме.httpРазницы нет, достаточно отклонить соединение, если проверка не проходит.

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

2. Обмен сообщениями в чате

Самая основная функция комнаты для чата — это общение. Как мы общаемся? Как мы уже говорили ранее,socketНа самом деле общение происходит в ответ на различные события. Простое понимание состоит в том, что мы определяем некоторые методы, которые будут срабатывать в процессе отправки событий с обеих сторон. Как отправлять события, клиент и сервер немного отличаются

• клиентthis.$socket.client.emit('CustomEvent', data)Вот как клиент отправляет событие с именемCustomEventи несdataданные, то после отправки этого запроса сервер выполнит заданныйCustomEventметод для получения данных в то же время. Например, как показано на рисунке ниже, получено сообщение

• Серверная часть в принципе такая же но другая.Почему вы так говорите?Потому что на клиентской стороне мы один к одному,и наша цель только серверная сторона,поэтому мы можем отправлять события только на серверную сторону , но на стороне сервера по-другому.Если к нему подключается несколько клиентов, то он много к одному.Он хочет работать для нескольких человек.Поэтому сценарии событий, с которыми он сталкивается, делятся на три категории.

  0. Отправлять уведомления о событиях в качестве подключенного в данный момент клиента
  1. Отправляйте сообщения, как и все остальные, кроме текущего подключенного пользователя
  2. Отправить сообщение всем пользователям, включая подключенных в настоящее время клиентов

  Хорошо понятно, что мы не можем оповещать всех обо всех сообщениях.Нам нужно раздавать сообщения разным людям.С такой концепцией можно быстро разобраться

3. Основной интерактивный процесс

Вообще говоря, наш ежедневный контент чата будет существоватьDBИсходный код проекта уже привязан к базе данных, здесь я используюmysql, это почти одно и то же, не нужно особо заострять внимание, давайте примерно проанализируем, что нужно сделать пользователю после отправки сообщения.

0. Когда пользователь А подключается и входит в комнату, сначала нам нужно предоставить пользователю начальную информацию о комнате.Какую информацию содержит базовый чат?

   1. Исторические сообщения пользователей чата
   2. Информация о комнате, объявления о комнате, другие настройки комнаты
   3. Список всех текущих онлайн-пользователей, включая некоторую основную информацию о пользователях, такую ​​как пол, подпись и т. д.
   4. Информация о песне, текущая воспроизводимая песня, сколько секунд она проигрывалась и когда она начала играть? [Поговорим об этом позже]

1. После того, как пользователь входит в комнату и отправляет сообщение, сервер получает сообщение и сначала должен сохранить сообщение вdbДля того, чтобы сохранить историю, а затем уведомить всех об этом сообщении, а затем все клиенты получат уведомление о том, что приходит новое сообщение, и они будут уведомлены о новом сообщении.pushВведите текущий список сообщений, поэтому тому, кто отправляет сообщение, нужно только добавить его в массив.

2. Это основной поток чата

Конечно, простой чат — это не только текстовые сообщения.У нас также есть выражения, картинки или мы добавляем небольшие выражения к нашим словам в WeChat.Как этого добиться, мы будем разбирать их по очереди.

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

1. Мы обнаружили, что после щелчка на выражении оно стало таким форматом.На самом деле, если вы наблюдали предыдущийQQВы обнаружите, что многие из них на самом деле/大笑В подобном формате он фактически преобразует путь изображения в такое значение прокси-ключа и передает его при отправке.v-htmlили какой-либо другой способ перекомпилировать его вimgЭтикетки достаточно, чтобы был достигнут эффект от такого небольшого выражения и текста вместе, и рассылается следующим образом

2. Вторым нам нужно отправить пакет смайликов, далее точно также, пакет смайликов это тоже картинка для нас, адрес изображения, разница в том, что нам не нужно, чтобы он оставался в поле ввода сообщения для смайлика Пакет, который проще, Просто нажмите на пакет смайликов и отправьте ссылку на картинку.Чтобы отличить сообщение, вам нужно только добавить тип к сообщению, напримерtext文字类型,img图片类型,notice消息通知类型, чтобы он был кратким и всеобъемлющим, и чтобы можно было легко различать разные стили, отображая разные типы, как показано на следующем рисунке.

3. Третье, что если пользователь хочет отправить свое сообщение с изображением, мы знаем, что изображение должно быть вставлено или отправлено в виде файла, а суть в том, чтобы отправить файл, как это сделать?inputОдним из событий является событие вставки@paste, в этомe.target.fileЗатем вы можете получить вставленную информацию об изображении, а затем загрузить файл на удаленный конец через интерфейс загрузки файла, получить возвращенный адрес изображения через интерфейс и отправить адрес изображения на сервер для завершения отправки индивидуальной информации об изображении. , то видео, конечно же, так понятно?

4. Музыкальная функция

В качестве музыкального чата, помимо общения в чате, вторым моментом, конечно же, является музыкальная функция.h5С точки зрения,h5только одинvideoилиaudio, мы все знаем этот момент, разумеется, нам просто нужноsrcОчень просто импортировать адрес ресурса и воспроизвести его, но, конечно, мы не просто слушаем песню, мы хотим реализовать функцию одного человека, когда все вместе заказывают песню, а затем вместе проигрывают ее по порядку. все песня одного времени, для этой функции клиенту нужно всего две вещи,

• Передовые идеи

  1. Знайте, какая песня сейчас играет и каков адрес ресурса песни.
  2. На какой секунде воспроизводится песня в данный момент, пользователь начнет воспроизведение с текущего времени, когда все вместе, и будет воспроизводиться синхронно.
  3. Общий процесс таков: введите информацию о комнате или комнате, текущую песню, время начала песни, загрузите песню, перейдите к текущему времени воспроизведения, чтобы начать воспроизведение.
  4. Следует отметить, что в настоящее время из-за ограничений браузера музыка не может воспроизводиться автоматически.autopalayЭто также не вступит в силу, для игры необходимо взаимодействие с пользователем, поэтому перед входом в комнату появляется всплывающее окно для подтверждения пользователем, и функция воспроизведения будет реализована при входе в комнату.

• Бэкэнд идеи

  1. Во-первых, серверу нужны ресурсы песни. Нам нужно использовать краулер. На этапе инициализации мы получим несколько песен в качестве музыки, которая будет воспроизводиться случайным образом, когда никто не заказывает песню. В этой части есть подробные комментарии в этап инициализации исходного кода, в зависимости от личных предпочтений Будьте готовы инициализировать, сколько музыки для загрузки.
  2. Время воспроизведения песни контролируется сервером, когда песня автоматически переключается, поэтому серверу нужно знать, когда следует переключать песню, и в то же время гарантировать, что песня всегда доступна, тогда нам нужно чтобы начать играть музыку при запуске проекта.Как?Операция заключается в том, чтобы случайно получить песню из базы данных, затем начать запись, записать текущую песню, затем время текущей песни, адрес ресурса текущей песни, и т.д., пользователь входит в комнату и толкает ее к пользователю, но пользователь входит в комнату.Откуда мы знаем, сколько секунд в данный момент, поэтому нам нужно записать временную метку, когда мы получим песню из базы данныхtimespace, после того, как пользователь входит в комнату, время входа за вычетом записанной метки времени является временем воспроизведения песни, и с этого времени песня может воспроизводиться.
  3. Итак, когда пора обрезать песню? Конечно, автоматическую обрезку песни нужно переключать после того, как песня проиграна. Когда песня заканчивает играть? Это время песни. Когда я получаю информацию о песне, я также знаю время песни. Просто установите таймер и выполните метод вырезания песен после стольких секунд времени песни. В то же время, при переключении Путем обновления временную метку, мы реализовали функцию автоматического вырезания песни.
  4. Конечно, нам также нужна операция заказа песен пользователем. Как это реализовать? Поиск песен также должен использовать поисковый робот для поиска песен. После поиска песни функция заказа песен пользователя отправит текущий идентификатор песни и сервер к серверу, и сервер будет записывать, кто какую песню заказал, конечно, нам также нужно, чтобы первый пришел первый обслужен, поэтому нам нужно поддерживать队列, песни пользователей, заказавших песни, будут добавлены по порядку. В это время автоматическая нарезка песен не будет поступать в базу данных для чтения. Общий процесс, проверьте队列Песен, указанных пользователем, нет в базе随机Получите один, если он есть, получите первую песню в очереди, затем вырежьте песню, а затем удалите песню из очереди, и песня будет воспроизводиться автоматически.
  5. Итак, что мне делать, если песню, которую кто-то заказал, трудно слушать, или если пользователь хочет удалить заказанную песню, это очень просто, просто получите идентификатор песни и информацию о пользователе и удалите ее из очереди. Общая идея такова, конкретно Есть еще много деталей, и есть много моментов, которые можно оптимизировать.Жду ваших предложений.issuesуказал на это

V. Резюме

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

6. Личный блог

Здесь мой личный блог, друзья могут оставлять сообщения для обмена цепочкой друзей.Сообщения могут быть в формате домашней страницы.адрес блога