Тёмный

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

CodeDojo
Подписаться 49 тыс.
Просмотров 90 тыс.
50% 1

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

Опубликовано:

 

6 фев 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 118   
@personamems
@personamems 4 года назад
Спасибо! Один из лучших уроков по теме! Очень эффектное оформление клиента и в тоже время очень простое.
@jolly_dev
@jolly_dev 4 года назад
Спасибо за начальные знания, далее будем изучать сами. Отличное видео!
@user-oh5vo5rj6y
@user-oh5vo5rj6y 3 года назад
Благодарю за информативное видео. Всё четко, ясно и по делу
@uzum_pr
@uzum_pr 2 года назад
Слишком просто для темы, которой я боялся ) Благодарю за то, что ёмко и без воды
@vasiliykrush2150
@vasiliykrush2150 4 года назад
Голос хороший и все понятно, буду смотреть и другие ролики;)
@cassinid8843
@cassinid8843 5 лет назад
Спасибо, очень доступно.
@mikhail-zotchik
@mikhail-zotchik 3 года назад
Огромное спасибо за видео!
@sashashad
@sashashad Год назад
Видео требует некоторого бэкграунда, но в целом очень полезно. Если с кодом хоть немного работали то всё очень ясно. Спасибо!
@yuragorb4220
@yuragorb4220 3 года назад
Все сделал как на видео, но когда ввожу в строку браузера - localhost:8080, открывается Index of/. В чем может быть проблема?
@user-mw6lr7hl9i
@user-mw6lr7hl9i 3 месяца назад
Классный урок, спасибо) Ломал себе голову в одном месте, сообщения не отправлялись, но в комментах объяснили в чём дело
@andyanderson222
@andyanderson222 2 года назад
Классный урок! Спасибо!
@user-hp5hw8su8q
@user-hp5hw8su8q 4 года назад
Спасибо, отличное видео 👍
@ronintv4026
@ronintv4026 4 года назад
Спасибо за видео, когда попробовал первый раз на десятке все работало, а сейчас когда захожу на localhost:8080 выдает ERR-INVALID_REDIRECT, не подскажите как решить?
@user-kv4lt7dn4d
@user-kv4lt7dn4d 6 лет назад
Гайз, у меня возникла небольшая проблема, в видео решения я не нашёл. При обновлении страницы чат перестает функционировать, никто не поможет?
@boss-rus
@boss-rus 10 месяцев назад
круто. коротко, ясно и работает :)
@19n1ght
@19n1ght 6 лет назад
Спасибо, хорошее видео! Было бы интересно послушать про JSON-RPC, как альтернативу REST API.
@paulbolhar921
@paulbolhar921 5 лет назад
Причем сегодня)))
@finishsuffering
@finishsuffering 2 года назад
@@paulbolhar921 и сегодня))))
@finishsuffering
@finishsuffering Год назад
и сегодня)
@elvinmammadov8584
@elvinmammadov8584 2 года назад
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
@ixtirochiavlodlar
@ixtirochiavlodlar 5 лет назад
Классный урок
@rugeneus
@rugeneus 3 года назад
Круто! Класс!
@sergejsviridov141
@sergejsviridov141 2 года назад
как сделать чтобы веб сокет общался отдельно с каждым клиентом в пределах id клиента? т е чтобы отдельный клиент открыв два экземпляра страницы в разных браузерах мог через каждую из этих страниц в отдельности управлять событиями на обеих страницах?
@GrafAlexder13
@GrafAlexder13 4 года назад
свойство clients , где о нём можно прочитать? Как и где можно узнать какие свойства есть у ws ?
@apexlegendsnemez
@apexlegendsnemez 11 месяцев назад
СУПЕР РОЛИК !!!
@gigabek
@gigabek 6 лет назад
Видео хорошее, но у меня вопросы (они больше относятся к бэкэнду). В каком виде у тебя отправляются/приходят сообщения - JSON, XML? Также для истории сообщений нужна БД. В своем примере, я использую Redis, но он занимает RAM и допустим мое приложение в деплое, то мой сервер упадет если будет много клиентов. Собственно как с Redis'а переместить историю в БД, и чтоб он фетчил данные или использовать другую БД?
@user-km5bs4tg2o
@user-km5bs4tg2o 5 лет назад
Блин как мне интересен этот вопрос тоже... Нашел решения?
@YukimuraChristian
@YukimuraChristian 5 лет назад
Там просто создается по сокету элемент li на html страничке, его значение хранится в переменной value, и при вызове кидает на html новые value и обнуляется). Никакой бд там нет. И не всегда нужна бд. На подобную деятельность будет рациональнее структуру данных запилить, аля стека. Либо читать с txt. Ну и да, дальше если начинать извращаться то JSON, CSV и т.п.
@user-mo6fr4ex8q
@user-mo6fr4ex8q 3 года назад
Кайф, спасибо!
@maniakm897
@maniakm897 5 лет назад
А к этому серверу можно подключится например через другой ПК, который находиться в одной локальной сети с хостом-ПК (на нем запущен сервер) путем ввода в браузере серого IP адреса хоста и потом через : номер порта - 8080 ?
@eldarkhaitov6728
@eldarkhaitov6728 4 года назад
Да, но надо сначала открыть порт 8080 на локальную сеть
@imbaquad
@imbaquad 4 года назад
Отлично поданный урок. Все четко и ясно. Скажите, приемлемо ли использовать вебсокеты в чатах, предположим, в 100к и более онлайн пользователей? или тут лучше что-то другое рассмотреть? Спасибо!
@grot9017
@grot9017 5 лет назад
почему мы подключаем модуль через директиву require, а не import? Чтобы это сделать нам нужно было бы дополнительно подключить babel?
@codedojo
@codedojo 5 лет назад
Да, кроме модулей в Node.js можно использовать все остальные нововведения без Babel. Не вижу большого смысла включать его в проект только ради import/export.
@singlebw4065
@singlebw4065 3 года назад
Кажется я не понимаю что такое сервер. Я сижу в ковыряю React (запущенный сервер) так же использую бэкенд на express (запущенный сервер). Обратиться к бд использую OpenServer (запущенный сервер) :)) вот я вижу WebSocket и требуется создать сервер. Я вижу что посылаются запросы и приходит ответ, но понять как это устроено и что за магия твориться мне не понятно. Точнее я не задумывался глубоко. У меня в мыслях просто разделение фронтенд и бэкенд и возникает вопрос если у меня запущен localhost:4000 на express, то WebSocket можно ли завязать на этот скажем так сервер? Ткните носом где я не понимаю
@torodinson5260
@torodinson5260 4 года назад
а зачем было через http-сервер запускать ? чтоб не обрабатывать гет и пост запросы ? через порт 3000 не запустился файл .
@user-pr4er2ly7f
@user-pr4er2ly7f 4 года назад
какой приятный английский
@user-nn6mb9tv1b
@user-nn6mb9tv1b 3 года назад
одно непонятно а причем тут форма -- а если я просто хочу отправить какой нить инпут без формы или вааще чо то отправить по событию
@danixfax9800
@danixfax9800 3 года назад
Не работает вообще, указывает в файле server.js на первую строку на document, принимает как за ошибку, почему так?
@TeaWillHelp
@TeaWillHelp Год назад
Спасибо ^_^
@faramozayw1654
@faramozayw1654 5 лет назад
Можно просто написать: npm i --save ws . Где-то читал, что npm i ws будет делать то же, что и npm i --save ws, но первый вариант куда короче
@hakooplayplay3212
@hakooplayplay3212 3 года назад
save уже не нужен, npm сохраняет зависимости по дефолту
@volodymyrdonets4166
@volodymyrdonets4166 5 лет назад
Спасибо чувак ты лучший! Нашёл пример кода не запускается (влом разбираться, опыта разработки JavaScript, Node.js и прочей не канонической мути нет, а сервер на WebSocket-ах сам себя не запустит). спустя 1.24 мин нахожу комманду npm install --save ws и вкинул библиотеку WebSocket-ов и Node.js запахал. Хацкер в деле)
@Yura3zzz
@Yura3zzz 6 лет назад
Что насчёт авторизации, аутентификации? Например я хочу через вебсокеты подключиться к внешней системе, которая выдала мне логин и пароль. Я же не могу пароль просто прописать в 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 - в скобках - то, что на ваашем сервере, там же и приватній ключ хранить
@aktotuttttt
@aktotuttttt 2 года назад
@CodeDojo почему мне возвращает [Object Blob] ??? Как починить?
@devope
@devope Год назад
client.send(message.toString());
@user-sj7pm8cr4h
@user-sj7pm8cr4h Год назад
@@devope Спасибо
@fnShun
@fnShun 4 года назад
Кто может разъяснить несколько моментов: зачем используется http-server, если, как говорят источники, WebSocket работает поверх TCP. Какое отношение app.js имеет к http-server? И как общение происходит на порту 8080, если был указан 3000. Спасибо заранее)
@batradzbazzaev
@batradzbazzaev 2 года назад
3000 это порт вебсокета на сервере. 8080 это http порт. При открытом соединении 3000 порт перехватывает http запрос и обрабатывает его
@kilirlink.....8012
@kilirlink.....8012 5 лет назад
делаем через cordova клиент и кайфуем
@cyberblogru
@cyberblogru 6 лет назад
Подскажите, пожалуйста, какой шрифт используется в демке? Он бы мне очень пригодился.
@codedojo
@codedojo 6 лет назад
+Денис Каримов Это Consolas
@kostobot
@kostobot 6 лет назад
Найс канал. Есть ли смысл писать чат на чистых вебсокетах или лучше использовать фреймворк, например Express?
@ccc3948
@ccc3948 6 лет назад
Я бы написал на чем-то вроде socket.io - быстрее и надежнее
@Graf777gos
@Graf777gos 6 лет назад
express + socket.io; koa + socket.io, в любом случае нужен еще http сервер; Лучше не использовать браузерные WebSockets, так как в них нет много нужно функционала, который реализован в socket.io (например)
@glockwilder5973
@glockwilder5973 4 года назад
сначала написало в терминале что http-server нет такой команды. потом установил через нпм install http-server все прикрасно вроде все работает но после того я зашел в браузер на localhost:8080 и мне открыло index of/ и там мои файлы. Братик что за ошибка
@yuragorb4220
@yuragorb4220 3 года назад
У меня точно также.
@Blenberg
@Blenberg 2 года назад
Кто нибудь нашел ошибку?
@maxgambler4983
@maxgambler4983 2 года назад
Вкладывать обработчик message в обработчик connect не только не нужно, но и вредно, так как при автоматическом переподключении вы задвоите обработчик message
@user-uy5ws9fc4n
@user-uy5ws9fc4n 4 года назад
Уважаемые, кто подскажет, как развернуть на реальном сервере? Не понимаю, как открыть порт на Nginx.
@inji4579
@inji4579 2 года назад
Не выдержал в конце, таки написал adsdfsd)))
@lessons3141
@lessons3141 Год назад
супер
@hmmm1482
@hmmm1482 3 года назад
Как на линуксе вебсокеты установить? npm install --save ws не работает
@shohijahonaxmetov
@shohijahonaxmetov 2 года назад
Sperva nujno ustanovit sam npm. Ustanovi nodejs s oficialnogo sayta v komplekte idet i npm
@mistersandman6556
@mistersandman6556 5 лет назад
ничего не работает, всё делаю как у видео, но после запуска сервера и клиента ничего не происходит..
@user-kv4lt7dn4d
@user-kv4lt7dn4d 6 лет назад
Ребят, вопрос довольно глупый, но хоть убей не понимаю, где он подключает html и css?
@user-li1ij1hv1c
@user-li1ij1hv1c 6 лет назад
Здесь показаны только js файлы, тоесть файлы скриптов. В частности он подключает app.js через тег в html файле, а не в скрипты подключает html, просто этого нет на видео)
@alexanderblagirev4937
@alexanderblagirev4937 4 года назад
Обрати внимание на момент где автор выбирает getElementbyId...вот за этим и творится магия) он их не показал. Они просто в проекте лежат вместе с данным жсниками
@temka_sd
@temka_sd 5 лет назад
Здравствуйте. А можно как-то запустить websocket server из браузера?
@rolton6307
@rolton6307 2 года назад
что делать если команда http-server не работает
@devope
@devope Год назад
npm install -g http-server
@hiphopik9185
@hiphopik9185 3 года назад
Лайк поставил. Ввожу 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 модуль.
@shahzodtadjiyev4128
@shahzodtadjiyev4128 2 года назад
Спасибо за знание но server.js пустой же на гите
@danixpuh7073
@danixpuh7073 2 года назад
Есть большая проблема: почему когда я отправляю на сервер сообщение "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 самое первое сообщение в ветке
@vesh95
@vesh95 5 лет назад
Веб сокеты - относительно новая технология))) Насколько я помню еще на первом курсе чат на них писал. Но всеравно это не первое появление.
@codedojo
@codedojo 5 лет назад
Сравнивая с HTTP, WS относительно новая технология.
@miralirafiyev4646
@miralirafiyev4646 6 лет назад
Полезныый урок но для тех кто впервые знает про сокеты. Все каналы показывают одно и тоже простое отправка смски . Никто не снимает уроки как создать приватные комнаты для чата и так далее, это же можно делать сокетами.
@user-tp7ie7ei5t
@user-tp7ie7ei5t 5 лет назад
причем тут приватные комнаты чата к пояснениям сетевого протокола
@akkaynt8910
@akkaynt8910 11 месяцев назад
Слушает порт 3000 а переходит по 8080, почему?
@nordeveloper
@nordeveloper 5 лет назад
Скачал с github файл сервер почему то пустой и там половина года нету
@alexUnion
@alexUnion 5 лет назад
Полезный урок...и качественный
@yennms5547
@yennms5547 2 года назад
Это конечно круто все, но вам настолько лень запушить файл server.js, а не оставлять его пустым?)
@elliotraven4509
@elliotraven4509 5 лет назад
Автор канала, у тебя на сайте не работает функционал оформления подписки((((( плак плак
@codedojo
@codedojo 5 лет назад
Будьте добры пояснить в чём именно проблема.
@elliotraven4509
@elliotraven4509 5 лет назад
@@codedojo думал оформить подписку но при клике ничего не происходило. В консоль вроде что то вылетало, но сейчас не вспомню что...
@user-jl8mb3fp9p
@user-jl8mb3fp9p 5 лет назад
@@codedojo аналогичная ситуация с регистрацией через соц сеть
@turtrueweb
@turtrueweb 3 года назад
+
@Quassar18
@Quassar18 3 года назад
Плохой гайд. Автор упустил важные моменты: где взять глобальную команду 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 Год назад
Автор и вовсе закрыл свои гениальные исходники
@sresetnjak
@sresetnjak 5 лет назад
На гитхабе server.js пуст.
@YukimuraChristian
@YukimuraChristian 5 лет назад
Там и app не написан вообще. Гитхаб ради галочки выложен был похоже.
@volodymyrlehenkyi7207
@volodymyrlehenkyi7207 4 года назад
@@YukimuraChristian Написано ведь, исходники)
@SK-KS
@SK-KS Год назад
Добрый человек повыше в чате выложил исходники на свой Гит Хаб
@alexeysukhinin8036
@alexeysukhinin8036 4 года назад
А что... Коротко и только по теме.
@Animalfox
@Animalfox 5 лет назад
Урок не полный. Имя "http-server" не распознано как имя командлета, функции, файла сценария или выполняемой программы.
@ILikeCherryJam
@ILikeCherryJam 5 лет назад
Команда в терминале "npm i http-server -g"
@ixtirochiavlodlar
@ixtirochiavlodlar 4 года назад
@@ILikeCherryJam ошибка npm Error
@user-gk3ke7dx2x
@user-gk3ke7dx2x 5 лет назад
нихрена не работает
@user-ze7wo4et9v
@user-ze7wo4et9v 3 года назад
А тебе не кажется, что дело в тебе?
@vladvladov4095
@vladvladov4095 2 года назад
чувак ну ты просто надиктовал какую то херь - где тут знакомство бл?..
@devope
@devope Год назад
Финальная версия проекта github.com/devope-learn/websocket-intro/tree/fixes
@sashashad
@sashashad Год назад
самая полезная ссылка! 😀
@BoffkaBoffka
@BoffkaBoffka 3 года назад
С П А С И Б О ! ! !
Далее
Создание сервера на Node.js
14:50
Просмотров 106 тыс.
🎙Пою Вживую!
2:59:56
Просмотров 1,2 млн
Learn Socket.io In 30 Minutes
27:27
Просмотров 471 тыс.
Пишем простой чат на WebSocket
37:53