Знакомство с WebSocket

WebSocket - это относительно новая и очень интересная технология, позволяющая реализовать двусторонний обмен данными между клиентом и сервером, в режиме реального времени.
В этом уроке мы познакомимся с WebSocket на примере простого чата.
Исходный код на GitHub: github.com/codedojo/websocket...

Пікірлер: 118

  • @personamems
    @personamems4 жыл бұрын

    Спасибо! Один из лучших уроков по теме! Очень эффектное оформление клиента и в тоже время очень простое.

  • @jolly_dev
    @jolly_dev5 жыл бұрын

    Спасибо за начальные знания, далее будем изучать сами. Отличное видео!

  • @ful_kush
    @ful_kush2 жыл бұрын

    Слишком просто для темы, которой я боялся ) Благодарю за то, что ёмко и без воды

  • @user-oh5vo5rj6y
    @user-oh5vo5rj6y3 жыл бұрын

    Благодарю за информативное видео. Всё четко, ясно и по делу

  • @vasiliykrush2150
    @vasiliykrush21504 жыл бұрын

    Голос хороший и все понятно, буду смотреть и другие ролики;)

  • @mikhail-zotchik
    @mikhail-zotchik3 жыл бұрын

    Огромное спасибо за видео!

  • @cassinid8843
    @cassinid88435 жыл бұрын

    Спасибо, очень доступно.

  • @user-mw6lr7hl9i
    @user-mw6lr7hl9i5 ай бұрын

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

  • @andyanderson222
    @andyanderson2222 жыл бұрын

    Классный урок! Спасибо!

  • @user-hp5hw8su8q
    @user-hp5hw8su8q4 жыл бұрын

    Спасибо, отличное видео 👍

  • @sashashad
    @sashashad Жыл бұрын

    Видео требует некоторого бэкграунда, но в целом очень полезно. Если с кодом хоть немного работали то всё очень ясно. Спасибо!

  • @boss-rus
    @boss-rus11 ай бұрын

    круто. коротко, ясно и работает :)

  • @apexlegendsnemez
    @apexlegendsnemez Жыл бұрын

    СУПЕР РОЛИК !!!

  • @ixtirochiavlodlar
    @ixtirochiavlodlar5 жыл бұрын

    Классный урок

  • @rugeneus
    @rugeneus3 жыл бұрын

    Круто! Класс!

  • @19n1ght
    @19n1ght6 жыл бұрын

    Спасибо, хорошее видео! Было бы интересно послушать про JSON-RPC, как альтернативу REST API.

  • @paulbolhar921

    @paulbolhar921

    5 жыл бұрын

    Причем сегодня)))

  • @finishsuffering

    @finishsuffering

    2 жыл бұрын

    @@paulbolhar921 и сегодня))))

  • @finishsuffering

    @finishsuffering

    Жыл бұрын

    и сегодня)

  • @user-mo6fr4ex8q
    @user-mo6fr4ex8q3 жыл бұрын

    Кайф, спасибо!

  • @volodymyrdonets4166
    @volodymyrdonets41665 жыл бұрын

    Спасибо чувак ты лучший! Нашёл пример кода не запускается (влом разбираться, опыта разработки JavaScript, Node.js и прочей не канонической мути нет, а сервер на WebSocket-ах сам себя не запустит). спустя 1.24 мин нахожу комманду npm install --save ws и вкинул библиотеку WebSocket-ов и Node.js запахал. Хацкер в деле)

  • @user-pr4er2ly7f
    @user-pr4er2ly7f4 жыл бұрын

    какой приятный английский

  • @lessons3141
    @lessons3141 Жыл бұрын

    супер

  • @TeaWillHelp
    @TeaWillHelp Жыл бұрын

    Спасибо ^_^

  • @yuragorb4220
    @yuragorb42204 жыл бұрын

    Все сделал как на видео, но когда ввожу в строку браузера - localhost:8080, открывается Index of/. В чем может быть проблема?

  • @user-kv4lt7dn4d
    @user-kv4lt7dn4d6 жыл бұрын

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

  • @ryzhovdtv
    @ryzhovdtv5 жыл бұрын

    Спасибо за видео, когда попробовал первый раз на десятке все работало, а сейчас когда захожу на localhost:8080 выдает ERR-INVALID_REDIRECT, не подскажите как решить?

  • @elvinmammadov8584
    @elvinmammadov85842 жыл бұрын

    i run command http-server , but error occurred : http-server : The term 'http-server' is not recognized as the name of a cmdlet, function, script file, or operable program

  • @gigabek
    @gigabek6 жыл бұрын

    Видео хорошее, но у меня вопросы (они больше относятся к бэкэнду). В каком виде у тебя отправляются/приходят сообщения - JSON, XML? Также для истории сообщений нужна БД. В своем примере, я использую Redis, но он занимает RAM и допустим мое приложение в деплое, то мой сервер упадет если будет много клиентов. Собственно как с Redis'а переместить историю в БД, и чтоб он фетчил данные или использовать другую БД?

  • @user-km5bs4tg2o

    @user-km5bs4tg2o

    5 жыл бұрын

    Блин как мне интересен этот вопрос тоже... Нашел решения?

  • @YukimuraChristian

    @YukimuraChristian

    5 жыл бұрын

    Там просто создается по сокету элемент li на html страничке, его значение хранится в переменной value, и при вызове кидает на html новые value и обнуляется). Никакой бд там нет. И не всегда нужна бд. На подобную деятельность будет рациональнее структуру данных запилить, аля стека. Либо читать с txt. Ну и да, дальше если начинать извращаться то JSON, CSV и т.п.

  • @inji4579
    @inji45792 жыл бұрын

    Не выдержал в конце, таки написал adsdfsd)))

  • @kilirlink.....8012
    @kilirlink.....80125 жыл бұрын

    делаем через cordova клиент и кайфуем

  • @sergejsviridov141
    @sergejsviridov1412 жыл бұрын

    как сделать чтобы веб сокет общался отдельно с каждым клиентом в пределах id клиента? т е чтобы отдельный клиент открыв два экземпляра страницы в разных браузерах мог через каждую из этих страниц в отдельности управлять событиями на обеих страницах?

  • @faramozayw1654
    @faramozayw16545 жыл бұрын

    Можно просто написать: npm i --save ws . Где-то читал, что npm i ws будет делать то же, что и npm i --save ws, но первый вариант куда короче

  • @hakooplayplay3212

    @hakooplayplay3212

    3 жыл бұрын

    save уже не нужен, npm сохраняет зависимости по дефолту

  • @maniakm897
    @maniakm8975 жыл бұрын

    А к этому серверу можно подключится например через другой ПК, который находиться в одной локальной сети с хостом-ПК (на нем запущен сервер) путем ввода в браузере серого IP адреса хоста и потом через : номер порта - 8080 ?

  • @eldarkhaitov6728

    @eldarkhaitov6728

    4 жыл бұрын

    Да, но надо сначала открыть порт 8080 на локальную сеть

  • @GrafAlexder13
    @GrafAlexder134 жыл бұрын

    свойство clients , где о нём можно прочитать? Как и где можно узнать какие свойства есть у ws ?

  • @imbaquad
    @imbaquad4 жыл бұрын

    Отлично поданный урок. Все четко и ясно. Скажите, приемлемо ли использовать вебсокеты в чатах, предположим, в 100к и более онлайн пользователей? или тут лучше что-то другое рассмотреть? Спасибо!

  • @alexUnion
    @alexUnion5 жыл бұрын

    Полезный урок...и качественный

  • @vesh95
    @vesh955 жыл бұрын

    Веб сокеты - относительно новая технология))) Насколько я помню еще на первом курсе чат на них писал. Но всеравно это не первое появление.

  • @codedojo

    @codedojo

    5 жыл бұрын

    Сравнивая с HTTP, WS относительно новая технология.

  • @aktotuttttt
    @aktotuttttt2 жыл бұрын

    @CodeDojo почему мне возвращает [Object Blob] ??? Как починить?

  • @devope

    @devope

    2 жыл бұрын

    client.send(message.toString());

  • @user-sj7pm8cr4h

    @user-sj7pm8cr4h

    Жыл бұрын

    @@devope Спасибо

  • @fnShun
    @fnShun4 жыл бұрын

    Кто может разъяснить несколько моментов: зачем используется http-server, если, как говорят источники, WebSocket работает поверх TCP. Какое отношение app.js имеет к http-server? И как общение происходит на порту 8080, если был указан 3000. Спасибо заранее)

  • @batradzbazzaev

    @batradzbazzaev

    2 жыл бұрын

    3000 это порт вебсокета на сервере. 8080 это http порт. При открытом соединении 3000 порт перехватывает http запрос и обрабатывает его

  • @grot9017
    @grot90175 жыл бұрын

    почему мы подключаем модуль через директиву require, а не import? Чтобы это сделать нам нужно было бы дополнительно подключить babel?

  • @codedojo

    @codedojo

    5 жыл бұрын

    Да, кроме модулей в Node.js можно использовать все остальные нововведения без Babel. Не вижу большого смысла включать его в проект только ради import/export.

  • @maxgambler4983
    @maxgambler49832 жыл бұрын

    Вкладывать обработчик message в обработчик connect не только не нужно, но и вредно, так как при автоматическом переподключении вы задвоите обработчик message

  • @torodinson5260
    @torodinson52604 жыл бұрын

    а зачем было через http-сервер запускать ? чтоб не обрабатывать гет и пост запросы ? через порт 3000 не запустился файл .

  • @Yura3zzz
    @Yura3zzz6 жыл бұрын

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

  • @LiguidCool

    @LiguidCool

    6 жыл бұрын

    У вас же пользователь не отсылает КАЖДЫЙ раз пароль при запросе страниц? Авторизация идет по кукису например. Тут подход тот же - у клиента есть id сессии, полученный при логине например, и оно же хранится на сервере.

  • @Yura3zzz

    @Yura3zzz

    6 жыл бұрын

    Вся проблема в том, что сервис не мой IBM , а страница моя. И куки тоже мои. IBM выдал креденшинл, который надо прописать в js чтоб общаться через mqtt over websosket. Вот куда их запихнуть, ума не приложу. Так чтоб при просмотре исходного кода страницы не было видно. Гугл как-то ж делает без сессии

  • @ccc3948

    @ccc3948

    6 жыл бұрын

    Если ваш ключ секретный, то запихнуть только на ваш сервер. Что-то вроде: страница -> [ws server -> ws client on server] -> ws server ibm - в скобках - то, что на ваашем сервере, там же и приватній ключ хранить

  • @user-uy5ws9fc4n
    @user-uy5ws9fc4n4 жыл бұрын

    Уважаемые, кто подскажет, как развернуть на реальном сервере? Не понимаю, как открыть порт на Nginx.

  • @user-nn6mb9tv1b
    @user-nn6mb9tv1b3 жыл бұрын

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

  • @rolton6307
    @rolton63072 жыл бұрын

    что делать если команда http-server не работает

  • @devope

    @devope

    2 жыл бұрын

    npm install -g http-server

  • @glockwilder5973
    @glockwilder59734 жыл бұрын

    сначала написало в терминале что http-server нет такой команды. потом установил через нпм install http-server все прикрасно вроде все работает но после того я зашел в браузер на localhost:8080 и мне открыло index of/ и там мои файлы. Братик что за ошибка

  • @yuragorb4220

    @yuragorb4220

    4 жыл бұрын

    У меня точно также.

  • @Blenberg

    @Blenberg

    2 жыл бұрын

    Кто нибудь нашел ошибку?

  • @kostobot
    @kostobot6 жыл бұрын

    Найс канал. Есть ли смысл писать чат на чистых вебсокетах или лучше использовать фреймворк, например Express?

  • @ccc3948

    @ccc3948

    6 жыл бұрын

    Я бы написал на чем-то вроде socket.io - быстрее и надежнее

  • @Graf777gos

    @Graf777gos

    6 жыл бұрын

    express + socket.io; koa + socket.io, в любом случае нужен еще http сервер; Лучше не использовать браузерные WebSockets, так как в них нет много нужно функционала, который реализован в socket.io (например)

  • @hmmm1482
    @hmmm14823 жыл бұрын

    Как на линуксе вебсокеты установить? npm install --save ws не работает

  • @shohijahonaxmetov

    @shohijahonaxmetov

    2 жыл бұрын

    Sperva nujno ustanovit sam npm. Ustanovi nodejs s oficialnogo sayta v komplekte idet i npm

  • @cyberblogru
    @cyberblogru6 жыл бұрын

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

  • @codedojo

    @codedojo

    6 жыл бұрын

    +Денис Каримов Это Consolas

  • @singlebw4065
    @singlebw40653 жыл бұрын

    Кажется я не понимаю что такое сервер. Я сижу в ковыряю React (запущенный сервер) так же использую бэкенд на express (запущенный сервер). Обратиться к бд использую OpenServer (запущенный сервер) :)) вот я вижу WebSocket и требуется создать сервер. Я вижу что посылаются запросы и приходит ответ, но понять как это устроено и что за магия твориться мне не понятно. Точнее я не задумывался глубоко. У меня в мыслях просто разделение фронтенд и бэкенд и возникает вопрос если у меня запущен localhost:4000 на express, то WebSocket можно ли завязать на этот скажем так сервер? Ткните носом где я не понимаю

  • @danixfax9800
    @danixfax98003 жыл бұрын

    Не работает вообще, указывает в файле server.js на первую строку на document, принимает как за ошибку, почему так?

  • @mistersandman6556
    @mistersandman65565 жыл бұрын

    ничего не работает, всё делаю как у видео, но после запуска сервера и клиента ничего не происходит..

  • @miralirafiyev4646
    @miralirafiyev46466 жыл бұрын

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

  • @user-tp7ie7ei5t

    @user-tp7ie7ei5t

    5 жыл бұрын

    причем тут приватные комнаты чата к пояснениям сетевого протокола

  • @user-kv4lt7dn4d
    @user-kv4lt7dn4d6 жыл бұрын

    Ребят, вопрос довольно глупый, но хоть убей не понимаю, где он подключает html и css?

  • @user-li1ij1hv1c

    @user-li1ij1hv1c

    6 жыл бұрын

    Здесь показаны только js файлы, тоесть файлы скриптов. В частности он подключает app.js через тег в html файле, а не в скрипты подключает html, просто этого нет на видео)

  • @alexanderblagirev4937

    @alexanderblagirev4937

    4 жыл бұрын

    Обрати внимание на момент где автор выбирает getElementbyId...вот за этим и творится магия) он их не показал. Они просто в проекте лежат вместе с данным жсниками

  • @hiphopik9185
    @hiphopik91853 жыл бұрын

    Лайк поставил. Ввожу node server всё норм ,но http-server - вот http-server' is not recognized as an internal or external command, operable program or batch file

  • @codedojo

    @codedojo

    3 жыл бұрын

    http-server это отдельный модуль, который нужно предварительно установить. Решить проблему можно с помощью команды `npx http-server`. npx - это утилита, которая сама установит и запустит npm модуль.

  • @turtrueweb
    @turtrueweb3 жыл бұрын

    +

  • @danixpuh7073
    @danixpuh70732 жыл бұрын

    Есть большая проблема: почему когда я отправляю на сервер сообщение "Hello", назад я получаю [objectBlob]?

  • @user-kr9xx5cr9b

    @user-kr9xx5cr9b

    2 жыл бұрын

    client.send(message.toString()); при отправке сообщения с сервера. Может кому еще пригодиться кто делать будет.

  • @danixpuh7073

    @danixpuh7073

    2 жыл бұрын

    @@user-kr9xx5cr9b Спасибо огромное! Очень помогло! Прям выручили)

  • @user-kr9xx5cr9b

    @user-kr9xx5cr9b

    2 жыл бұрын

    @@danixpuh7073 Пожалуйста! Считаю что таким нужно делится всегда! Очень часто по началу сталкивался с вопросами и ответа приходилось искать очень долго. А так, мне не сложно, сам разобрался и написал. Добро всегда добром вернётся! Успехов!

  • @finishsuffering

    @finishsuffering

    2 жыл бұрын

    @@user-kr9xx5cr9b почему вы удалили сообщение, где помогли?

  • @user-kr9xx5cr9b

    @user-kr9xx5cr9b

    2 жыл бұрын

    @@finishsuffering самое первое сообщение в ветке

  • @temka_sd
    @temka_sd5 жыл бұрын

    Здравствуйте. А можно как-то запустить websocket server из браузера?

  • @akkaynt8910
    @akkaynt8910 Жыл бұрын

    Слушает порт 3000 а переходит по 8080, почему?

  • @nordeveloper
    @nordeveloper5 жыл бұрын

    Скачал с github файл сервер почему то пустой и там половина года нету

  • @shahzodtadjiyev4128
    @shahzodtadjiyev41282 жыл бұрын

    Спасибо за знание но server.js пустой же на гите

  • @yennms5547
    @yennms55472 жыл бұрын

    Это конечно круто все, но вам настолько лень запушить файл server.js, а не оставлять его пустым?)

  • @elliotraven4509
    @elliotraven45095 жыл бұрын

    Автор канала, у тебя на сайте не работает функционал оформления подписки((((( плак плак

  • @codedojo

    @codedojo

    5 жыл бұрын

    Будьте добры пояснить в чём именно проблема.

  • @elliotraven4509

    @elliotraven4509

    5 жыл бұрын

    @@codedojo думал оформить подписку но при клике ничего не происходило. В консоль вроде что то вылетало, но сейчас не вспомню что...

  • @user-jl8mb3fp9p

    @user-jl8mb3fp9p

    5 жыл бұрын

    @@codedojo аналогичная ситуация с регистрацией через соц сеть

  • @Quassar18
    @Quassar183 жыл бұрын

    Плохой гайд. Автор упустил важные моменты: где взять глобальную команду http-server? Ответ: данный модуль можно установить глобально командой npm install --global http-server . Откуда берется веб страница и стиль для нее? Ответ: Автор просто решил скипнуть этот момент, страница и стили лежат в папке public на гитхабе по сссылке из видео. Если тупо следовать видео, то ничего не заработает. При этом при первом запуске http-server может возникнуть ошибка прав доступа к выполнению сценариев. Чтобы установить нужную политику введите Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

  • @elkub

    @elkub

    3 жыл бұрын

    святой человек, спасибо тебе!

  • @zhuvachkabubulgum7487

    @zhuvachkabubulgum7487

    3 жыл бұрын

    +++ видео ни о чем 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩

  • @sashashad

    @sashashad

    Жыл бұрын

    @@zhuvachkabubulgum7487 да ладно

  • @iMarkusUS

    @iMarkusUS

    Жыл бұрын

    Автор и вовсе закрыл свои гениальные исходники

  • @alexeysukhinin8036
    @alexeysukhinin80364 жыл бұрын

    А что... Коротко и только по теме.

  • @sresetnjak
    @sresetnjak5 жыл бұрын

    На гитхабе server.js пуст.

  • @YukimuraChristian

    @YukimuraChristian

    5 жыл бұрын

    Там и app не написан вообще. Гитхаб ради галочки выложен был похоже.

  • @volodymyrlehenkyi7207

    @volodymyrlehenkyi7207

    4 жыл бұрын

    @@YukimuraChristian Написано ведь, исходники)

  • @SK-KS

    @SK-KS

    2 жыл бұрын

    Добрый человек повыше в чате выложил исходники на свой Гит Хаб

  • @user-gk3ke7dx2x
    @user-gk3ke7dx2x5 жыл бұрын

    нихрена не работает

  • @user-ze7wo4et9v

    @user-ze7wo4et9v

    4 жыл бұрын

    А тебе не кажется, что дело в тебе?

  • @Animalfox
    @Animalfox5 жыл бұрын

    Урок не полный. Имя "http-server" не распознано как имя командлета, функции, файла сценария или выполняемой программы.

  • @ILikeCherryJam

    @ILikeCherryJam

    5 жыл бұрын

    Команда в терминале "npm i http-server -g"

  • @ixtirochiavlodlar

    @ixtirochiavlodlar

    4 жыл бұрын

    @@ILikeCherryJam ошибка npm Error

  • @vladvladov4095
    @vladvladov40953 жыл бұрын

    чувак ну ты просто надиктовал какую то херь - где тут знакомство бл?..

  • @BoffkaBoffka
    @BoffkaBoffka3 жыл бұрын

    С П А С И Б О ! ! !

  • @devope
    @devope2 жыл бұрын

    Финальная версия проекта github.com/devope-learn/websocket-intro/tree/fixes

  • @sashashad

    @sashashad

    Жыл бұрын

    самая полезная ссылка! 😀

Келесі