Знакомство с WebSocket
HTML-код
- Опубликовано: 26 сен 2024
- WebSocket - это относительно новая и очень интересная технология, позволяющая реализовать двусторонний обмен данными между клиентом и сервером, в режиме реального времени.
В этом уроке мы познакомимся с WebSocket на примере простого чата.
Исходный код на GitHub: github.com/cod...
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
![DDG & G Herbo - Nosey [Official Video]](http://i.ytimg.com/vi/I9Ra0Zc2NlQ/mqdefault.jpg)
Спасибо! Один из лучших уроков по теме! Очень эффектное оформление клиента и в тоже время очень простое.
Классный урок, спасибо) Ломал себе голову в одном месте, сообщения не отправлялись, но в комментах объяснили в чём дело
Спасибо за начальные знания, далее будем изучать сами. Отличное видео!
Видео требует некоторого бэкграунда, но в целом очень полезно. Если с кодом хоть немного работали то всё очень ясно.
Спасибо!
Слишком просто для темы, которой я боялся )
Благодарю за то, что ёмко и без воды
Голос хороший и все понятно, буду смотреть и другие ролики;)
Благодарю за информативное видео. Всё четко, ясно и по делу
Огромное спасибо за видео!
круто. коротко, ясно и работает :)
Спасибо, хорошее видео!
Было бы интересно послушать про JSON-RPC, как альтернативу REST API.
Причем сегодня)))
@@paulbolhar921 и сегодня))))
и сегодня)
Спасибо чувак ты лучший!
Нашёл пример кода не запускается (влом разбираться, опыта разработки JavaScript, Node.js и прочей не канонической мути нет, а сервер на WebSocket-ах сам себя не запустит).
спустя 1.24 мин нахожу комманду npm install --save ws и вкинул библиотеку WebSocket-ов и Node.js запахал.
Хацкер в деле)
СУПЕР РОЛИК !!!
какой приятный английский
Спасибо, очень доступно.
Классный урок! Спасибо!
@CodeDojo почему мне возвращает [Object Blob] ??? Как починить?
client.send(message.toString());
@@devope Спасибо
что делать если команда http-server не работает
npm install -g http-server
Все сделал как на видео, но когда ввожу в строку браузера - localhost:8080, открывается Index of/. В чем может быть проблема?
Спасибо, отличное видео 👍
Круто! Класс!
Кайф, спасибо!
как сделать чтобы веб сокет общался отдельно с каждым клиентом в пределах id клиента? т е чтобы отдельный клиент открыв два экземпляра страницы в разных браузерах мог через каждую из этих страниц в отдельности управлять событиями на обеих страницах?
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
npm install --global http-server
Вкладывать обработчик message в обработчик connect не только не нужно, но и вредно, так как при автоматическом переподключении вы задвоите обработчик message
Не выдержал в конце, таки написал adsdfsd)))
Классный урок
Плохой гайд. Автор упустил важные моменты: где взять глобальную команду http-server? Ответ: данный модуль можно установить глобально командой npm install --global http-server . Откуда берется веб страница и стиль для нее? Ответ: Автор просто решил скипнуть этот момент, страница и стили лежат в папке public на гитхабе по сссылке из видео. Если тупо следовать видео, то ничего не заработает. При этом при первом запуске http-server может возникнуть ошибка прав доступа к выполнению сценариев. Чтобы установить нужную политику введите Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
святой человек, спасибо тебе!
+++ видео ни о чем 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩
@@zhuvachkabubulgum7487 да ладно
Автор и вовсе закрыл свои гениальные исходники
Кто может разъяснить несколько моментов: зачем используется http-server, если, как говорят источники, WebSocket работает поверх TCP. Какое отношение app.js имеет к http-server? И как общение происходит на порту 8080, если был указан 3000. Спасибо заранее)
3000 это порт вебсокета на сервере. 8080 это http порт. При открытом соединении 3000 порт перехватывает http запрос и обрабатывает его
Есть большая проблема: почему когда я отправляю на сервер сообщение "Hello", назад я получаю [objectBlob]?
client.send(message.toString()); при отправке сообщения с сервера. Может кому еще пригодиться кто делать будет.
@@АндрейКонстантинов-ж6ш Спасибо огромное! Очень помогло! Прям выручили)
@@danixpuh7073 Пожалуйста! Считаю что таким нужно делится всегда! Очень часто по началу сталкивался с вопросами и ответа приходилось искать очень долго. А так, мне не сложно, сам разобрался и написал. Добро всегда добром вернётся! Успехов!
@@АндрейКонстантинов-ж6ш почему вы удалили сообщение, где помогли?
@@finishsuffering самое первое сообщение в ветке
Спасибо ^_^
Веб сокеты - относительно новая технология)))
Насколько я помню еще на первом курсе чат на них писал. Но всеравно это не первое появление.
Сравнивая с HTTP, WS относительно новая технология.
Можно просто написать: npm i --save ws . Где-то читал, что npm i ws будет делать то же, что и npm i --save ws, но первый вариант куда короче
save уже не нужен, npm сохраняет зависимости по дефолту
А к этому серверу можно подключится например через другой ПК, который находиться в одной локальной сети с хостом-ПК (на нем запущен сервер) путем ввода в браузере серого IP адреса хоста и потом через : номер порта - 8080 ?
Да, но надо сначала открыть порт 8080 на локальную сеть
супер
Отлично поданный урок. Все четко и ясно. Скажите, приемлемо ли использовать вебсокеты в чатах, предположим, в 100к и более онлайн пользователей? или тут лучше что-то другое рассмотреть? Спасибо!
сначала написало в терминале что http-server нет такой команды. потом установил через нпм install http-server все прикрасно вроде все работает но после того я зашел в браузер на localhost:8080 и мне открыло index of/ и там мои файлы. Братик что за ошибка
У меня точно также.
Кто нибудь нашел ошибку?
Не работает вообще, указывает в файле server.js на первую строку на document, принимает как за ошибку, почему так?
Спасибо за видео, когда попробовал первый раз на десятке все работало, а сейчас когда захожу на localhost:8080 выдает ERR-INVALID_REDIRECT, не подскажите как решить?
Полезныый урок но для тех кто впервые знает про сокеты. Все каналы показывают одно и тоже простое отправка смски . Никто не снимает уроки как создать приватные комнаты для чата и так далее, это же можно делать сокетами.
причем тут приватные комнаты чата к пояснениям сетевого протокола
свойство clients , где о нём можно прочитать? Как и где можно узнать какие свойства есть у ws ?
Слушает порт 3000 а переходит по 8080, почему?
Как на линуксе вебсокеты установить? npm install --save ws не работает
Sperva nujno ustanovit sam npm. Ustanovi nodejs s oficialnogo sayta v komplekte idet i npm
почему мы подключаем модуль через директиву require, а не import? Чтобы это сделать нам нужно было бы дополнительно подключить babel?
Да, кроме модулей в Node.js можно использовать все остальные нововведения без Babel. Не вижу большого смысла включать его в проект только ради import/export.
Видео хорошее, но у меня вопросы (они больше относятся к бэкэнду). В каком виде у тебя отправляются/приходят сообщения - JSON, XML? Также для истории сообщений нужна БД. В своем примере, я использую Redis, но он занимает RAM и допустим мое приложение в деплое, то мой сервер упадет если будет много клиентов. Собственно как с Redis'а переместить историю в БД, и чтоб он фетчил данные или использовать другую БД?
Блин как мне интересен этот вопрос тоже... Нашел решения?
Там просто создается по сокету элемент li на html страничке, его значение хранится в переменной value, и при вызове кидает на html новые value и обнуляется).
Никакой бд там нет. И не всегда нужна бд. На подобную деятельность будет рациональнее структуру данных запилить, аля стека. Либо читать с txt. Ну и да, дальше если начинать извращаться то JSON, CSV и т.п.
Кажется я не понимаю что такое сервер. Я сижу в ковыряю React (запущенный сервер) так же использую бэкенд на express (запущенный сервер). Обратиться к бд использую OpenServer (запущенный сервер) :)) вот я вижу WebSocket и требуется создать сервер. Я вижу что посылаются запросы и приходит ответ, но понять как это устроено и что за магия твориться мне не понятно. Точнее я не задумывался глубоко. У меня в мыслях просто разделение фронтенд и бэкенд и возникает вопрос если у меня запущен localhost:4000 на express, то WebSocket можно ли завязать на этот скажем так сервер? Ткните носом где я не понимаю
ничего не работает, всё делаю как у видео, но после запуска сервера и клиента ничего не происходит..
делаем через cordova клиент и кайфуем
одно непонятно а причем тут форма -- а если я просто хочу отправить какой нить инпут без формы или вааще чо то отправить по событию
Это просто один из способов. Можно и без формы. Добавь событие клик на кнопку и слушай его. Хотя мой ответ не актуален наверное)))
Гайз, у меня возникла небольшая проблема, в видео решения я не нашёл. При обновлении страницы чат перестает функционировать, никто не поможет?
а зачем было через http-сервер запускать ? чтоб не обрабатывать гет и пост запросы ? через порт 3000 не запустился файл .
Спасибо за знание но server.js пустой
же на гите
Лайк поставил. Ввожу node server всё норм ,но http-server - вот http-server' is not recognized as an internal or external command,
operable program or batch file
http-server это отдельный модуль, который нужно предварительно установить. Решить проблему можно с помощью команды `npx http-server`. npx - это утилита, которая сама установит и запустит npm модуль.
Уважаемые, кто подскажет, как развернуть на реальном сервере? Не понимаю, как открыть порт на Nginx.
Что насчёт авторизации, аутентификации? Например я хочу через вебсокеты подключиться к внешней системе, которая выдала мне логин и пароль. Я же не могу пароль просто прописать в js на сайте. Как его можно спрятать?
У вас же пользователь не отсылает КАЖДЫЙ раз пароль при запросе страниц? Авторизация идет по кукису например. Тут подход тот же - у клиента есть id сессии, полученный при логине например, и оно же хранится на сервере.
Вся проблема в том, что сервис не мой IBM , а страница моя. И куки тоже мои. IBM выдал креденшинл, который надо прописать в js чтоб общаться через mqtt over websosket. Вот куда их запихнуть, ума не приложу. Так чтоб при просмотре исходного кода страницы не было видно.
Гугл как-то ж делает без сессии
Если ваш ключ секретный, то запихнуть только на ваш сервер. Что-то вроде: страница -> [ws server -> ws client on server] -> ws server ibm
- в скобках - то, что на ваашем сервере, там же и приватній ключ хранить
Это конечно круто все, но вам настолько лень запушить файл server.js, а не оставлять его пустым?)
Найс канал. Есть ли смысл писать чат на чистых вебсокетах или лучше использовать фреймворк, например Express?
Я бы написал на чем-то вроде socket.io - быстрее и надежнее
express + socket.io; koa + socket.io, в любом случае нужен еще http сервер; Лучше не использовать браузерные WebSockets, так как в них нет много нужно функционала, который реализован в socket.io (например)
Ребят, вопрос довольно глупый, но хоть убей не понимаю, где он подключает html и css?
Здесь показаны только js файлы, тоесть файлы скриптов. В частности он подключает app.js через тег в html файле, а не в скрипты подключает html, просто этого нет на видео)
Обрати внимание на момент где автор выбирает getElementbyId...вот за этим и творится магия) он их не показал. Они просто в проекте лежат вместе с данным жсниками
Здравствуйте. А можно как-то запустить websocket server из браузера?
Подскажите, пожалуйста, какой шрифт используется в демке? Он бы мне очень пригодился.
+Денис Каримов Это Consolas
+
Скачал с github файл сервер почему то пустой и там половина года нету
На гитхабе server.js пуст.
Там и app не написан вообще. Гитхаб ради галочки выложен был похоже.
@@YukimuraChristian Написано ведь, исходники)
Добрый человек повыше в чате выложил исходники на свой Гит Хаб
А что... Коротко и только по теме.
Урок не полный.
Имя "http-server" не распознано как имя командлета, функции, файла сценария или выполняемой программы.
Команда в терминале "npm i http-server -g"
@@ILikeCherryJam ошибка npm Error
чувак ну ты просто надиктовал какую то херь - где тут знакомство бл?..
Финальная версия проекта github.com/devope-learn/websocket-intro/tree/fixes
самая полезная ссылка!
😀
С П А С И Б О ! ! !
Автор канала, у тебя на сайте не работает функционал оформления подписки((((( плак плак
Будьте добры пояснить в чём именно проблема.
@@codedojo думал оформить подписку но при клике ничего не происходило. В консоль вроде что то вылетало, но сейчас не вспомню что...
@@codedojo аналогичная ситуация с регистрацией через соц сеть
нихрена не работает
А тебе не кажется, что дело в тебе?
Полезный урок...и качественный