Websocket (вебсокеты): связка PHP + JavaScript. 30-ти минутка совместной разработки.

Sdílet
Vložit
  • čas přidán 30. 10. 2020
  • Websocket и это относительно новая и очень интересная технология, позволяющая реализовать двусторонний обмен данными между клиентом и сервером в режиме реального времени. Без websocket`оф если клиенту нужны свежие данные, то ему необходимо сначала сделать запрос на сервер. Если клиенту нужны данные каждый несколько секунд, то это порождает лавину запросов, представьте, что 1000 человек каждую секунду генерируют по запросу.
    2:54 Подготовка
    5:55 Backend часть
    11:55 Frontend часть
    27:55 Итоговый результат
    Буду рад поддержке: лайк, комментарий (адекватная критика тоже приветствуется), денюжка - все мотивирует в плюс.
    www.donationalerts.com/r/andr... - кошелек.

Komentáře • 113

  • @yaolegoleynik
    @yaolegoleynik Před 2 lety +3

    Невероятно простое и понятное видео, спасибо большое!

  • @mumusus
    @mumusus Před 11 dny

    Спасибо, всё просто и доходчиво

  • @user-yd9nq1ub1x
    @user-yd9nq1ub1x Před 3 lety +5

    Огромная благодарность за это! Приятно смотреть и слушать. Все четко, с толком, понятно и доступно))) Подписываюсь))

  • @statdotastaff6193
    @statdotastaff6193 Před 2 lety +5

    Топ контент, спасибо!
    Андрей подскажи как с защитой, можно ли "грабить" данные которые отдаются по сокетам и как от этого защититься?

  • @user-jm8lz8qh4m
    @user-jm8lz8qh4m Před rokem

    Благодарю за видео! Как раз по вашему примеру на рабочем проекте и внедрял вебсокеты!) И все благополучно "завелось"!

  • @giuseppe2712
    @giuseppe2712 Před 2 lety

    Хорошее видео. Спасибо!🔥
    Добавил в сохраненные себе

  • @artemidiumter6543
    @artemidiumter6543 Před 2 lety +1

    Спасибо за урок) пошёл делать крестики-нолики

  • @danila7333
    @danila7333 Před rokem

    СПАСИБО! Здоровья тебе!

  • @MRX-fy4vt
    @MRX-fy4vt Před rokem +3

    Спасибо, хороший контент!
    Сделайте пожалуйста видео о настройке вебсокета на Swoole PHP

  • @chingiskuular1013
    @chingiskuular1013 Před 2 lety +1

    Приятный комментатор! Речь ровная и спокойная.

  • @youtubeyh
    @youtubeyh Před 2 lety

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

  • @dmitry_kalugin
    @dmitry_kalugin Před rokem

    для управления положением окон удобны комбинации Win+Arrow и Shift+Win+[Left/Right Arrow]

  • @11-april
    @11-april Před rokem

    Спасибо автору. Рекомендую обернуть обработчик нажатия клавиши в ещё callbac onopen объекта WebSocket, чтобы наверняка дождаться подключения пользователя.

  • @EvilGazz
    @EvilGazz Před 2 lety

    Спасибо! Полезно!

  • @user-lh9wz4hi5z
    @user-lh9wz4hi5z Před 3 lety

    спасибо за освещение workerman. а то наслышан только про ratchet

  • @romeocapuletti2425
    @romeocapuletti2425 Před rokem

    Pavel Durov, that is awesome! THX))

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před rokem

      Pavel Durov is much smarter and rich, Iam just Andrei Shestakov.

  • @user-oj5gu3zd6u
    @user-oj5gu3zd6u Před 2 lety

    Вы молодец! Подписался

  • @blook1413
    @blook1413 Před 2 lety

    спасибо, ждем подробности о продаже апликух)

  • @akik6713
    @akik6713 Před 2 lety

    Спасибо, лучший

  • @ngkq5403
    @ngkq5403 Před 3 lety +3

    Здравствуйте как запустить скрипта Workerman на виртуальном хостинге?

  • @vadimdorokhov8375
    @vadimdorokhov8375 Před 3 lety

    Круто, спасибо)

  • @TheDamage1982
    @TheDamage1982 Před 3 lety

    Добрый день! Так нужно чтобы на клиенте был уже установлен node и глобально http-server?

  • @egorsmorgunov8024
    @egorsmorgunov8024 Před 3 lety +4

    гениально и просто. Вам надо в преподаватели идти.

  • @grigoriymalyshev4782
    @grigoriymalyshev4782 Před 2 lety

    Спасибо за отличное объяснение! Непонятным осталось одно: что делает count? Дока по workerman нашлась только на китайском.

  • @baurbaur332
    @baurbaur332 Před 2 lety

    Вау прекол, пасибо чел.

  • @salikhov_id
    @salikhov_id Před 2 lety

    спасибо большое!

  • @PoulFly
    @PoulFly Před rokem

    Спасибо за видео, вопросик а если будет онлайн 1000 человек то такой подход норм? Сервак не ляжет? И тут реализация для одного типа соединения, а как на счет если у нас будет, чат, какие-то уведомления, дополнительно синхронизация действий на редактирование статей и тд, то в таком случае workerman разрулит?

  • @user-xk9ub3eo3m
    @user-xk9ub3eo3m Před 2 lety

    Спасибо!

  • @fullfree1812
    @fullfree1812 Před rokem

    Респект!

  • @user-qg4qz8qo2c
    @user-qg4qz8qo2c Před 2 lety +2

    Класс! Очень интересная технология!

  • @redhook777
    @redhook777 Před 3 lety

    Спасибо)

  • @user-to4ke3df3v
    @user-to4ke3df3v Před 3 lety

    Круто!

  • @khartower
    @khartower Před 2 lety

    вопрос, данные сокеты работают по https (wss)? Если да то как, эту тему редко кто освещает

  • @pro100chok
    @pro100chok Před 2 lety

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

    • @stolz999
      @stolz999 Před 2 lety

      Простой чатик на двоих может и не хуже. Непонятно как поддерживать живым процесс сервера

  • @wyeth228
    @wyeth228 Před 3 lety

    Что делать если команы start, status и другие не работают. У меня тот же код, использую php 8

  • @grokgustavo
    @grokgustavo Před 3 lety

    Спасибо, каков ваш опыт на php и на каком стэке в основном работаете? Ради интереса спрашиваю.

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      В коммерческой разработке лет 8.
      Стек на работе: PHP: Symfony, JS: vueJS + legacy jquery, БД: postgres.

  • @user-sf2ym1ht2g
    @user-sf2ym1ht2g Před rokem

    Интересно. Расскажи о продаже флешь игор.

  • @romanmed9035
    @romanmed9035 Před 3 lety +1

    а чтобы не все все видели, а конкретный клиент с центром и другой клиент с центром и между собой они никак?

  • @StudioBaraban
    @StudioBaraban Před rokem +1

    Добрый день, Андрей! Спасибо за видео! Можно ли купить у тебя личную консультацию и сколько стоит? У меня не получается подключиться к Binance Api через Websockets на php!

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před rokem

      Доброго дня. С Binance Api не знаком, к сожалению. В настоящий момент весьма загружен, чтобы дельно помочь, извиняюсь. Но если сузите и конкретизируете вопрос, то может что смогу заметить. На каком этапе проблематика?

    • @StudioBaraban
      @StudioBaraban Před rokem

      Я запустил у себя на сервере workerman. А дальше не понимаю - как его сделать клиентом. Чтобы Php слушал чужой сервер (binance)

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před rokem

      @@StudioBaraban здесь, конечно, нужно копать. Мне кажется Вам не нужен workerman или я не понял задумку. Workerman нужен для поднятия на PHP своего сервера, поддерживающего протокол websocket`a. Во всяком случае в видео я показываю именно его в использовании как серверной части. Может там как-то можно и php клиента инициировать, не пробовал.
      1. У Biannce API есть endpoint по протоколу websocket`ов: binance-docs.github.io/apidocs/websocket_api/en/#change-log
      2. Нужно подключиться к их endpoint`у и слушать сообщения. Для этого много готовых пакетов на github, по ключевой фразе: php websocket. Например, вот статья с примером какой-то библиотеки: www.piesocket.com/blog/php-websocket

  • @gudvin2001
    @gudvin2001 Před 2 lety

    и как этот одтдельно запущенный процесс, который будет выступать вебсокет сервером администрировать на реальном сайте?

  • @doyouknow_that
    @doyouknow_that Před rokem

    Привет на OpenServer не вышло( пишет в js файле неверное соединение к сокету. Естсетвенно вокерман добавил в проект

  • @cleverscript
    @cleverscript Před 11 měsíci

    Супер, получилось повторить на OpenSrver. Но возникает вопрос, а как поддерживать этот процесс на сервере постоянно? Например после перезагрузки сервера? Нужно команду php server/server.php стартануть заново, но как? На Unit systemd сервисе или как это решается?

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 11 měsíci

      Да, systemd, либо рестарта системы поддерживаются на уровне кубернетиса.

  • @Pavelbrov
    @Pavelbrov Před 2 lety +1

    Спасибо, очень доходчиво, ещё было бы круто, если бы добавили про каналы (channel) и подписки(subscribe)

  • @mushnikov35
    @mushnikov35 Před 3 lety

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

  • @krepkovmeste
    @krepkovmeste Před 3 lety

    Подскажи пожалуйста, а как можно решить простую задачу, чтобы когда данные какие-то приходят и добавляются в базу, можно было клиентам сразу их выдать, но без постоянных запросов, по типу ajax запросов с помощью setInterval через n количество секунд. Есть старенький event source, но не понимаю он может реагировать на события или нет. В Интернете совсем нет никаких примеров, а сам сколько бы не тыкался, всё равно не получается, именно отреагировать на отправку данных при определёном событии

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +2

      Ваш вопрос лежит больше в плоскости инфраструктуры, нежели программирования, но решение в целом есть, но это не супер просто.
      1. Для связки клиент-сервер можно использовать протокол WebSocket`a или EventSource - это два разных подхода, они оба подойдут для цели уведомить клиента (браузер) с сервера.
      2. А вот базы данных, как правило, напрямую не умеют сами уведомлять внешние процессы об изменениях (о появлении новых записей), поэтому обычно схема такая:
      - в инфраструктуру добавляется брокер сообщений, например RabbitMQ
      - на каждое соединение от клиента - поднимается программно отдельная очередь.
      - предположу, что добавление записей в базу происходит тоже через слой приложения. Поэтому при добавлении новой записи в базу, также создается и сообщение, отправляемое во все (fanout exchange) открытые очереди.
      - серверные скрипты, к которым в фоне подключены клиенты подписаны каждый соответственно на свою очередь и по событию добавления записи могут уведомлять клиента.
      В общем - ответ лежит в области применения брокеров сообщений и очередей. Если с этой темой пока не знакомы, то стоит как-нибудь на досуге туда копнуть.

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před rokem

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

  • @pantydev
    @pantydev Před 3 lety

    Протестировал ваш пример на OpenServer локально, всё работает, спасибо!
    Теперь хотелось бы узнать как сделать подключение внешне? Имею внешний IP, указал его в подключении к серверу на стороне клиента, порт 2346 открыл. Соединение происходит только через мобильный интернет, данные на сервер идут, сообщение о подключении есть, однако передача сообщений с сервера на клиент в таком случае отстутствует почему-то.

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

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

    • @pantydev
      @pantydev Před 3 lety

      @@user-wz6yb6cp7o итак, Не могу утверждать наверняка - нужна перепроверка. Мы тестировали с другом, и то что я описывал выше относилось к его проверкам. Когда я самостоятельно решил проверить через свой моб. инет, выяснилось что проблема заключалась в максимально банальном.
      Банально - в браузере моб. телефона оставался старый кэш, и после его очистки все отлично работало. Панели разработчика там нет, поэтому функции disable cache тоже нет соответственно. Пришлось в ручную удалять.
      Осталось проверить удаленно у друга, так ли это.

    • @pantydev
      @pantydev Před 3 lety

      @@user-wz6yb6cp7o извините за такую тупость. Иногда бывает часами сижу над проблемами которые фиксятся очень быстро x)

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      @@pantydev, не переживайте на данный счёт. Это у всех разработчиков бывает в той или иной мере.

  • @kind1y
    @kind1y Před 2 lety

    Топчик! А какие проблемы могут возникнуть с утечками памяти и не только, если подымать свой сервер? Отдельный бы урок пожалуйста)

    • @trismegistos1s
      @trismegistos1s Před rokem

      привет. ты не нашел ответ на свой вопрос?

    • @kind1y
      @kind1y Před rokem

      @@trismegistos1s неа :(

    • @trismegistos1s
      @trismegistos1s Před rokem

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

  • @millenial1584
    @millenial1584 Před 3 lety

    Здравствуйте! Можете подсказать, как исправить такую ошибку?
    PHP Fatal error: Uncaught Error: Call to undefined function posix_getpid() in /home/a0396279/domains/koprik.uz/public_html/vendor/workerman/workerman/Worker.php:2128

    • @SergeyShuchkin
      @SergeyShuchkin Před 3 lety

      на windows ?
      if (!function_exists('posix_getpid')) {
      function posix_getpid() {
      return getmypid();
      }
      }

  • @olkhagaming4053
    @olkhagaming4053 Před 2 lety +1

    Сразу несколько вопросов.
    1. Для достаточно простого приложения цепляется фреймворк в сотни файлов. Так ли это необходимо?
    2. Возможна ли реализация используя функциональное программирование?
    3. Как осуществлять аутентификацию пользователей использующих сокеты?

  • @IbragimIbragim-lw1fs
    @IbragimIbragim-lw1fs Před 3 lety +5

    а как такой скрипт запустить на сервере, или как это работает на хостинге?

  • @vitalik5743
    @vitalik5743 Před rokem

    А что с качеством?

  • @user-rm6nb2sx6c
    @user-rm6nb2sx6c Před 3 lety +4

    25:59 тут не баг. чтобы такого не было, надо убрать лишние процессы: $wsWorker->count = 1;

    • @popov.artem1205
      @popov.artem1205 Před 2 lety

      Да, без $wsWorker->count = 1 не работает. Спасибо огромное за подсказку!

  • @borismakhmudov896
    @borismakhmudov896 Před 3 lety

    Андрей, можете пожалуйста объяснить как отправлять конкретному пользователю (личное сообщения)

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +5

      Приветствую.
      Чтобы отправлять запросы определенному клиенту - нужно сопоставить соединению клиента некий уникальный идентификатор. Можно сделать так:
      1. 7:55 - когда клиент подключился, в этом методе на сервере генерируем уникальный идентификатор. Если по простому это может быть uuid, в php есть библиотеки для его генерации. Или для легкости эксперимента - просто число.
      2. Сразу клиенту передаем через метод $connection->send сообщение с этим идеентификатором. Сообщения нужно делать разными и заворачивать в формат JSON. Плюс на сервере создаем некий справочник соответствий (ассоциативный массив): "идентификатор клиента" => $connection (объект соединения)
      3. 24:19 - клиент может получить JSON, преобразовать его в объект, вытащить идентификатор и запомнить его.
      Все.
      Если клиент отправляет на сервер любой запрос, то прикладывает к нему свой идентификатор.
      Если сервер хочет отправить сообщение определенному клиенту, то по справочнику находит нужное соединение и шлет сообщение именно ему.
      Если по правильному, то вместо идентификатора должен генерироваться некий шифрованный токен, который на каждом ообращении от клиента будет проверяться сервером, но это уже другая история.
      Если конкретно для примера личных сообщений, то еще раз кратко:
      1. Клиент подключился - назначаем ему какой-то идентификатор.
      2. Когда клиент хочет отправить личное сообщение - передаем на сервер идентификатор отправителя и получателя.
      3. На сервер по сформированному справочнику находим соединение получателя и шлем конкретно ему.

    • @borismakhmudov896
      @borismakhmudov896 Před 3 lety

      @@user-wz6yb6cp7o Что лучше Ratchet или Workerman?

    • @borismakhmudov896
      @borismakhmudov896 Před 3 lety

      @@user-wz6yb6cp7o можете записать вторую часть на счет данной темы, не со всем понятно

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +1

      @@borismakhmudov896 В боевой среде использовать эти библиотеки не приходил, только на уровне экспериментов. Но я бы более рекомендовал Workerman, так как у него нет никаких зависимостей внутри от сторонних библиотек в отличии от Ratchet. Плюс по показателям на github сообщество вокруг Workerman более живое в моменте.
      По вопросу - продолжения темы WebSocket и примера личных сообщений - возможно, но обещать пока не могу.

    • @borismakhmudov896
      @borismakhmudov896 Před 3 lety +5

      @@user-wz6yb6cp7o в ютубе нету ни одного видео по этой теме, как отправка конкретному пользователю.
      У многим похожи пример и всё, дальше никто не заходил, так что тема не раскрыта.

  • @Hrachik333
    @Hrachik333 Před 3 lety

    А ведь можно вместо nodejs сервер использовать к примеру apache2?

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      Здравствуйте.
      NodeJS сервер и Apache в целом очень разные по идее концепции, они не являются альтернативой друг другу.
      В видео я, вероятно, говорил про NodeJS в контексте того, чтобы транспилировать JS код в совместимый с браузерами.

  • @user-lm7pb3os8y
    @user-lm7pb3os8y Před rokem

    13:01 вся соль, которой мы хотим добиться

  • @Fhkbsthn
    @Fhkbsthn Před 3 lety

    Не могли бы вы на github выложить код?

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +2

      Да, конечно: github.com/aashestakov/workerman-sample2

  • @sergpozi
    @sergpozi Před 3 lety

    Добрый вечер! Как такой скрипт запустить на хостинге?

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      Добрый. Не уверен, что верно понял контекст вопроса, но все же.
      1. Смотря какой хостинг, если урезанный shared хостинг, то могут быть ограничения на исполнение долгоживущего worker`a.
      2. Если мы говорим про полноценный VPS под Unix системой, то долгоживующие воркеры PHP обычно запускаются при старт системы, а поддерживаются, как вариант, утилитой supervisord, чтобы перезапускать вокрера при падении.
      Тогда мы получим стабильный процесс, ожидающий соединения по протоколу websocket.

    • @sergpozi
      @sergpozi Před 3 lety

      @@user-wz6yb6cp7o Понял, спасибо) А продолжения по Websocket случайно не будет? Чтобы можно было например создать несколько "комнат" и в каждой комнате своя жизнь, что-то на подобии многопользовательской игры.

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +2

      @@sergpozi точно будет про PHP в плане best practice (хороших практик). Webscocket тема интересная - возможно вернусь к ней в январе, но обещать точно пока не могу.

    • @youtubeyh
      @youtubeyh Před 2 lety

      @@user-wz6yb6cp7o Уже январь, возвращайтесь. =)

  • @ndorerahojules5926
    @ndorerahojules5926 Před rokem

    Привет...мне нужна ваша помощь по вебсокету...ошибка возникла

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před rokem +1

      Приветствую. Извиняюсь, скажу откровенно, что пока очень загружен, времени провести частный разбор ситуаций не смогу найти.

    • @ndorerahojules5926
      @ndorerahojules5926 Před rokem

      @@user-wz6yb6cp7o хорошо.. но мой вопрос может быть простой...как запустить рачет на удалённом сервере???

  • @Igramant
    @Igramant Před 3 lety

    Бля, что ж такое, у меня пишет WebSocket connection to ws://0.0.0.0:2346 failed.... Unexpected response code: 200, В чем может быть проблема? У меня стоит Open server, и еще проблемы были с Node JS, через windows консоль все делал, может из за этого?

    • @sergeys1976
      @sergeys1976 Před 2 lety

      Вы случайно не решили эту проблему? А то я уже неделю пытаюсь ее решить и ни как.

  • @NikK0lay
    @NikK0lay Před 8 měsíci

    На PHP? Зачем? Можно же на node?

  • @iMarkusUS
    @iMarkusUS Před rokem

    Почему так : почему бы не выложить пакет кода

  • @devracoon
    @devracoon Před 3 lety

    Все таки пхп создан, чтобы умирать)
    P.S:
    Речь про демонизацию процессов на ПХП (WS сервер)

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety +2

      Тема холиварная =) Есть ряд технических факторов, когда процесс на PHP очень даже подходящее решение в срезе переменных трудозатрат: времени/цены/сложности.
      Скажем так, табу здесь нет и лучшим решением является рассмотрение конкретных кейсов, когда PHP демон применим, а когда лучше выбирать альтернативу. В абстрактной форме ультимативные утверждения обычно нежизнеспособны. Это относится, как к программированию, так и жизненным подходам, пожалуй.
      Но это так, философские рассуждения в никуда =)

  • @crogot
    @crogot Před 2 lety

    Обработка движения одна лишняя, нужно оставить только по сообщению, иначе при нажатии клавиши движение обрабатывается 2 раза, по событию клавиши и потом ещё раз по сообщению от сокета, либо проверять и не обрабатывать сообщения от себя самого (делать проверку по дополнительном полю - инициатор движения)

  • @ilnard
    @ilnard Před rokem

    Клон Павла Дурова?

  • @deutschc9058
    @deutschc9058 Před 3 lety

    это бек или фронт?

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      В видео есть обе части.
      1. Backend часть - это php библиотека Workerman, которая в нашем случае просто слушает сообщения и ретранслирует их клиентам.
      2. Фронт часть на JS - это клиент, коим является браузер.

    • @deutschc9058
      @deutschc9058 Před 3 lety

      @@user-wz6yb6cp7o спасибо.

  • @deutschc9058
    @deutschc9058 Před 3 lety +1

    очень мелко код, но все-равно сапсибо

  • @user-wk6jm7nk5z
    @user-wk6jm7nk5z Před 3 lety

    чел все классно - ты экран для себя пишешь - слабо шрифт раз в 10 увеличить

    • @user-wz6yb6cp7o
      @user-wz6yb6cp7o  Před 3 lety

      Да, недочет. В следующих записях исправил проблему мелкого шрифта.

  • @user-jp8qy8fb6e
    @user-jp8qy8fb6e Před 9 měsíci

    На хрена создавать не полные видео? Подобных видео куча, очередной фуфломет который отнимает время, без настройки сервера работать не будет данное чудо. Покажите полное развертывание.

  • @prorevalution9522
    @prorevalution9522 Před rokem

    халтура