Знакомство с WebSocket
WebSocket - это относительно новая и очень интересная технология, позволяющая реализовать двусторонний обмен данными между клиентом и сервером, в режиме реального времени.
В этом уроке мы познакомимся с WebSocket на примере простого чата.
Исходный код на GitHub: github.com/codedojo/websocket...
Пікірлер: 118
Спасибо! Один из лучших уроков по теме! Очень эффектное оформление клиента и в тоже время очень простое.
Спасибо за начальные знания, далее будем изучать сами. Отличное видео!
Слишком просто для темы, которой я боялся ) Благодарю за то, что ёмко и без воды
Благодарю за информативное видео. Всё четко, ясно и по делу
Голос хороший и все понятно, буду смотреть и другие ролики;)
Огромное спасибо за видео!
Спасибо, очень доступно.
Классный урок, спасибо) Ломал себе голову в одном месте, сообщения не отправлялись, но в комментах объяснили в чём дело
Классный урок! Спасибо!
Спасибо, отличное видео 👍
Видео требует некоторого бэкграунда, но в целом очень полезно. Если с кодом хоть немного работали то всё очень ясно. Спасибо!
круто. коротко, ясно и работает :)
СУПЕР РОЛИК !!!
Классный урок
Круто! Класс!
Спасибо, хорошее видео! Было бы интересно послушать про JSON-RPC, как альтернативу REST API.
@paulbolhar921
5 жыл бұрын
Причем сегодня)))
@finishsuffering
2 жыл бұрын
@@paulbolhar921 и сегодня))))
@finishsuffering
Жыл бұрын
и сегодня)
Кайф, спасибо!
Спасибо чувак ты лучший! Нашёл пример кода не запускается (влом разбираться, опыта разработки JavaScript, Node.js и прочей не канонической мути нет, а сервер на WebSocket-ах сам себя не запустит). спустя 1.24 мин нахожу комманду npm install --save ws и вкинул библиотеку WebSocket-ов и Node.js запахал. Хацкер в деле)
какой приятный английский
супер
Спасибо ^_^
Все сделал как на видео, но когда ввожу в строку браузера - localhost:8080, открывается Index of/. В чем может быть проблема?
Гайз, у меня возникла небольшая проблема, в видео решения я не нашёл. При обновлении страницы чат перестает функционировать, никто не поможет?
Спасибо за видео, когда попробовал первый раз на десятке все работало, а сейчас когда захожу на localhost:8080 выдает ERR-INVALID_REDIRECT, не подскажите как решить?
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
Видео хорошее, но у меня вопросы (они больше относятся к бэкэнду). В каком виде у тебя отправляются/приходят сообщения - JSON, XML? Также для истории сообщений нужна БД. В своем примере, я использую Redis, но он занимает RAM и допустим мое приложение в деплое, то мой сервер упадет если будет много клиентов. Собственно как с Redis'а переместить историю в БД, и чтоб он фетчил данные или использовать другую БД?
@user-km5bs4tg2o
5 жыл бұрын
Блин как мне интересен этот вопрос тоже... Нашел решения?
@YukimuraChristian
5 жыл бұрын
Там просто создается по сокету элемент li на html страничке, его значение хранится в переменной value, и при вызове кидает на html новые value и обнуляется). Никакой бд там нет. И не всегда нужна бд. На подобную деятельность будет рациональнее структуру данных запилить, аля стека. Либо читать с txt. Ну и да, дальше если начинать извращаться то JSON, CSV и т.п.
Не выдержал в конце, таки написал adsdfsd)))
делаем через cordova клиент и кайфуем
как сделать чтобы веб сокет общался отдельно с каждым клиентом в пределах id клиента? т е чтобы отдельный клиент открыв два экземпляра страницы в разных браузерах мог через каждую из этих страниц в отдельности управлять событиями на обеих страницах?
Можно просто написать: npm i --save ws . Где-то читал, что npm i ws будет делать то же, что и npm i --save ws, но первый вариант куда короче
@hakooplayplay3212
3 жыл бұрын
save уже не нужен, npm сохраняет зависимости по дефолту
А к этому серверу можно подключится например через другой ПК, который находиться в одной локальной сети с хостом-ПК (на нем запущен сервер) путем ввода в браузере серого IP адреса хоста и потом через : номер порта - 8080 ?
@eldarkhaitov6728
4 жыл бұрын
Да, но надо сначала открыть порт 8080 на локальную сеть
свойство clients , где о нём можно прочитать? Как и где можно узнать какие свойства есть у ws ?
Отлично поданный урок. Все четко и ясно. Скажите, приемлемо ли использовать вебсокеты в чатах, предположим, в 100к и более онлайн пользователей? или тут лучше что-то другое рассмотреть? Спасибо!
Полезный урок...и качественный
Веб сокеты - относительно новая технология))) Насколько я помню еще на первом курсе чат на них писал. Но всеравно это не первое появление.
@codedojo
5 жыл бұрын
Сравнивая с HTTP, WS относительно новая технология.
@CodeDojo почему мне возвращает [Object Blob] ??? Как починить?
@devope
2 жыл бұрын
client.send(message.toString());
@user-sj7pm8cr4h
Жыл бұрын
@@devope Спасибо
Кто может разъяснить несколько моментов: зачем используется http-server, если, как говорят источники, WebSocket работает поверх TCP. Какое отношение app.js имеет к http-server? И как общение происходит на порту 8080, если был указан 3000. Спасибо заранее)
@batradzbazzaev
2 жыл бұрын
3000 это порт вебсокета на сервере. 8080 это http порт. При открытом соединении 3000 порт перехватывает http запрос и обрабатывает его
почему мы подключаем модуль через директиву require, а не import? Чтобы это сделать нам нужно было бы дополнительно подключить babel?
@codedojo
5 жыл бұрын
Да, кроме модулей в Node.js можно использовать все остальные нововведения без Babel. Не вижу большого смысла включать его в проект только ради import/export.
Вкладывать обработчик message в обработчик connect не только не нужно, но и вредно, так как при автоматическом переподключении вы задвоите обработчик message
а зачем было через http-сервер запускать ? чтоб не обрабатывать гет и пост запросы ? через порт 3000 не запустился файл .
Что насчёт авторизации, аутентификации? Например я хочу через вебсокеты подключиться к внешней системе, которая выдала мне логин и пароль. Я же не могу пароль просто прописать в js на сайте. Как его можно спрятать?
@LiguidCool
6 жыл бұрын
У вас же пользователь не отсылает КАЖДЫЙ раз пароль при запросе страниц? Авторизация идет по кукису например. Тут подход тот же - у клиента есть id сессии, полученный при логине например, и оно же хранится на сервере.
@Yura3zzz
6 жыл бұрын
Вся проблема в том, что сервис не мой IBM , а страница моя. И куки тоже мои. IBM выдал креденшинл, который надо прописать в js чтоб общаться через mqtt over websosket. Вот куда их запихнуть, ума не приложу. Так чтоб при просмотре исходного кода страницы не было видно. Гугл как-то ж делает без сессии
@ccc3948
6 жыл бұрын
Если ваш ключ секретный, то запихнуть только на ваш сервер. Что-то вроде: страница -> [ws server -> ws client on server] -> ws server ibm - в скобках - то, что на ваашем сервере, там же и приватній ключ хранить
Уважаемые, кто подскажет, как развернуть на реальном сервере? Не понимаю, как открыть порт на Nginx.
одно непонятно а причем тут форма -- а если я просто хочу отправить какой нить инпут без формы или вааще чо то отправить по событию
что делать если команда http-server не работает
@devope
2 жыл бұрын
npm install -g http-server
сначала написало в терминале что http-server нет такой команды. потом установил через нпм install http-server все прикрасно вроде все работает но после того я зашел в браузер на localhost:8080 и мне открыло index of/ и там мои файлы. Братик что за ошибка
@yuragorb4220
4 жыл бұрын
У меня точно также.
@Blenberg
2 жыл бұрын
Кто нибудь нашел ошибку?
Найс канал. Есть ли смысл писать чат на чистых вебсокетах или лучше использовать фреймворк, например Express?
@ccc3948
6 жыл бұрын
Я бы написал на чем-то вроде socket.io - быстрее и надежнее
@Graf777gos
6 жыл бұрын
express + socket.io; koa + socket.io, в любом случае нужен еще http сервер; Лучше не использовать браузерные WebSockets, так как в них нет много нужно функционала, который реализован в socket.io (например)
Как на линуксе вебсокеты установить? npm install --save ws не работает
@shohijahonaxmetov
2 жыл бұрын
Sperva nujno ustanovit sam npm. Ustanovi nodejs s oficialnogo sayta v komplekte idet i npm
Подскажите, пожалуйста, какой шрифт используется в демке? Он бы мне очень пригодился.
@codedojo
6 жыл бұрын
+Денис Каримов Это Consolas
Кажется я не понимаю что такое сервер. Я сижу в ковыряю React (запущенный сервер) так же использую бэкенд на express (запущенный сервер). Обратиться к бд использую OpenServer (запущенный сервер) :)) вот я вижу WebSocket и требуется создать сервер. Я вижу что посылаются запросы и приходит ответ, но понять как это устроено и что за магия твориться мне не понятно. Точнее я не задумывался глубоко. У меня в мыслях просто разделение фронтенд и бэкенд и возникает вопрос если у меня запущен localhost:4000 на express, то WebSocket можно ли завязать на этот скажем так сервер? Ткните носом где я не понимаю
Не работает вообще, указывает в файле server.js на первую строку на document, принимает как за ошибку, почему так?
ничего не работает, всё делаю как у видео, но после запуска сервера и клиента ничего не происходит..
Полезныый урок но для тех кто впервые знает про сокеты. Все каналы показывают одно и тоже простое отправка смски . Никто не снимает уроки как создать приватные комнаты для чата и так далее, это же можно делать сокетами.
@user-tp7ie7ei5t
5 жыл бұрын
причем тут приватные комнаты чата к пояснениям сетевого протокола
Ребят, вопрос довольно глупый, но хоть убей не понимаю, где он подключает html и css?
@user-li1ij1hv1c
6 жыл бұрын
Здесь показаны только js файлы, тоесть файлы скриптов. В частности он подключает app.js через тег в html файле, а не в скрипты подключает html, просто этого нет на видео)
@alexanderblagirev4937
4 жыл бұрын
Обрати внимание на момент где автор выбирает getElementbyId...вот за этим и творится магия) он их не показал. Они просто в проекте лежат вместе с данным жсниками
Лайк поставил. Ввожу node server всё норм ,но http-server - вот http-server' is not recognized as an internal or external command, operable program or batch file
@codedojo
3 жыл бұрын
http-server это отдельный модуль, который нужно предварительно установить. Решить проблему можно с помощью команды `npx http-server`. npx - это утилита, которая сама установит и запустит npm модуль.
+
Есть большая проблема: почему когда я отправляю на сервер сообщение "Hello", назад я получаю [objectBlob]?
@user-kr9xx5cr9b
2 жыл бұрын
client.send(message.toString()); при отправке сообщения с сервера. Может кому еще пригодиться кто делать будет.
@danixpuh7073
2 жыл бұрын
@@user-kr9xx5cr9b Спасибо огромное! Очень помогло! Прям выручили)
@user-kr9xx5cr9b
2 жыл бұрын
@@danixpuh7073 Пожалуйста! Считаю что таким нужно делится всегда! Очень часто по началу сталкивался с вопросами и ответа приходилось искать очень долго. А так, мне не сложно, сам разобрался и написал. Добро всегда добром вернётся! Успехов!
@finishsuffering
2 жыл бұрын
@@user-kr9xx5cr9b почему вы удалили сообщение, где помогли?
@user-kr9xx5cr9b
2 жыл бұрын
@@finishsuffering самое первое сообщение в ветке
Здравствуйте. А можно как-то запустить websocket server из браузера?
Слушает порт 3000 а переходит по 8080, почему?
Скачал с github файл сервер почему то пустой и там половина года нету
Спасибо за знание но server.js пустой же на гите
Это конечно круто все, но вам настолько лень запушить файл server.js, а не оставлять его пустым?)
Автор канала, у тебя на сайте не работает функционал оформления подписки((((( плак плак
@codedojo
5 жыл бұрын
Будьте добры пояснить в чём именно проблема.
@elliotraven4509
5 жыл бұрын
@@codedojo думал оформить подписку но при клике ничего не происходило. В консоль вроде что то вылетало, но сейчас не вспомню что...
@user-jl8mb3fp9p
5 жыл бұрын
@@codedojo аналогичная ситуация с регистрацией через соц сеть
Плохой гайд. Автор упустил важные моменты: где взять глобальную команду http-server? Ответ: данный модуль можно установить глобально командой npm install --global http-server . Откуда берется веб страница и стиль для нее? Ответ: Автор просто решил скипнуть этот момент, страница и стили лежат в папке public на гитхабе по сссылке из видео. Если тупо следовать видео, то ничего не заработает. При этом при первом запуске http-server может возникнуть ошибка прав доступа к выполнению сценариев. Чтобы установить нужную политику введите Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@elkub
3 жыл бұрын
святой человек, спасибо тебе!
@zhuvachkabubulgum7487
3 жыл бұрын
+++ видео ни о чем 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩
@sashashad
Жыл бұрын
@@zhuvachkabubulgum7487 да ладно
@iMarkusUS
Жыл бұрын
Автор и вовсе закрыл свои гениальные исходники
А что... Коротко и только по теме.
На гитхабе server.js пуст.
@YukimuraChristian
5 жыл бұрын
Там и app не написан вообще. Гитхаб ради галочки выложен был похоже.
@volodymyrlehenkyi7207
4 жыл бұрын
@@YukimuraChristian Написано ведь, исходники)
@SK-KS
2 жыл бұрын
Добрый человек повыше в чате выложил исходники на свой Гит Хаб
нихрена не работает
@user-ze7wo4et9v
4 жыл бұрын
А тебе не кажется, что дело в тебе?
Урок не полный. Имя "http-server" не распознано как имя командлета, функции, файла сценария или выполняемой программы.
@ILikeCherryJam
5 жыл бұрын
Команда в терминале "npm i http-server -g"
@ixtirochiavlodlar
4 жыл бұрын
@@ILikeCherryJam ошибка npm Error
чувак ну ты просто надиктовал какую то херь - где тут знакомство бл?..
С П А С И Б О ! ! !
Финальная версия проекта github.com/devope-learn/websocket-intro/tree/fixes
@sashashad
Жыл бұрын
самая полезная ссылка! 😀