ฝัง
- เผยแพร่เมื่อ 23 ส.ค. 2024
- WebSocket - это относительно новая и очень интересная технология, позволяющая реализовать двусторонний обмен данными между клиентом и сервером, в режиме реального времени.
В этом уроке мы познакомимся с WebSocket на примере простого чата.
Исходный код на GitHub: github.com/cod...
![ถามตรงๆ กับ อาจตุพร ทำไม ประเทศไทย ใครเป็นนายก ก็โดนด่า พอออกเเล้วคนคิดถึง!!?? l [Nickynachat]](http://i.ytimg.com/vi/3YFLMXxBGAs/mqdefault.jpg)
Спасибо! Один из лучших уроков по теме! Очень эффектное оформление клиента и в тоже время очень простое.
Классный урок, спасибо) Ломал себе голову в одном месте, сообщения не отправлялись, но в комментах объяснили в чём дело
Спасибо за начальные знания, далее будем изучать сами. Отличное видео!
Слишком просто для темы, которой я боялся )
Благодарю за то, что ёмко и без воды
Видео требует некоторого бэкграунда, но в целом очень полезно. Если с кодом хоть немного работали то всё очень ясно.
Спасибо!
Благодарю за информативное видео. Всё четко, ясно и по делу
Голос хороший и все понятно, буду смотреть и другие ролики;)
Спасибо, хорошее видео!
Было бы интересно послушать про JSON-RPC, как альтернативу REST API.
Причем сегодня)))
@@paulbolhar921 и сегодня))))
и сегодня)
Огромное спасибо за видео!
круто. коротко, ясно и работает :)
СУПЕР РОЛИК !!!
Спасибо, очень доступно.
какой приятный английский
Спасибо чувак ты лучший!
Нашёл пример кода не запускается (влом разбираться, опыта разработки JavaScript, Node.js и прочей не канонической мути нет, а сервер на WebSocket-ах сам себя не запустит).
спустя 1.24 мин нахожу комманду npm install --save ws и вкинул библиотеку WebSocket-ов и Node.js запахал.
Хацкер в деле)
Классный урок! Спасибо!
Круто! Класс!
Спасибо, отличное видео 👍
Все сделал как на видео, но когда ввожу в строку браузера - localhost:8080, открывается Index of/. В чем может быть проблема?
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
Кайф, спасибо!
как сделать чтобы веб сокет общался отдельно с каждым клиентом в пределах id клиента? т е чтобы отдельный клиент открыв два экземпляра страницы в разных браузерах мог через каждую из этих страниц в отдельности управлять событиями на обеих страницах?
Отлично поданный урок. Все четко и ясно. Скажите, приемлемо ли использовать вебсокеты в чатах, предположим, в 100к и более онлайн пользователей? или тут лучше что-то другое рассмотреть? Спасибо!
Классный урок
Не выдержал в конце, таки написал adsdfsd)))
супер
@CodeDojo почему мне возвращает [Object Blob] ??? Как починить?
client.send(message.toString());
@@devope Спасибо
Вкладывать обработчик message в обработчик connect не только не нужно, но и вредно, так как при автоматическом переподключении вы задвоите обработчик message
Спасибо ^_^
Кто может разъяснить несколько моментов: зачем используется http-server, если, как говорят источники, WebSocket работает поверх TCP. Какое отношение app.js имеет к http-server? И как общение происходит на порту 8080, если был указан 3000. Спасибо заранее)
3000 это порт вебсокета на сервере. 8080 это http порт. При открытом соединении 3000 порт перехватывает http запрос и обрабатывает его
Можно просто написать: npm i --save ws . Где-то читал, что npm i ws будет делать то же, что и npm i --save ws, но первый вариант куда короче
save уже не нужен, npm сохраняет зависимости по дефолту
Спасибо за видео, когда попробовал первый раз на десятке все работало, а сейчас когда захожу на localhost:8080 выдает ERR-INVALID_REDIRECT, не подскажите как решить?
одно непонятно а причем тут форма -- а если я просто хочу отправить какой нить инпут без формы или вааще чо то отправить по событию
Веб сокеты - относительно новая технология)))
Насколько я помню еще на первом курсе чат на них писал. Но всеравно это не первое появление.
Сравнивая с HTTP, WS относительно новая технология.
Полезный урок...и качественный
А к этому серверу можно подключится например через другой ПК, который находиться в одной локальной сети с хостом-ПК (на нем запущен сервер) путем ввода в браузере серого IP адреса хоста и потом через : номер порта - 8080 ?
Да, но надо сначала открыть порт 8080 на локальную сеть
Видео хорошее, но у меня вопросы (они больше относятся к бэкэнду). В каком виде у тебя отправляются/приходят сообщения - JSON, XML? Также для истории сообщений нужна БД. В своем примере, я использую Redis, но он занимает RAM и допустим мое приложение в деплое, то мой сервер упадет если будет много клиентов. Собственно как с Redis'а переместить историю в БД, и чтоб он фетчил данные или использовать другую БД?
Блин как мне интересен этот вопрос тоже... Нашел решения?
Там просто создается по сокету элемент li на html страничке, его значение хранится в переменной value, и при вызове кидает на html новые value и обнуляется).
Никакой бд там нет. И не всегда нужна бд. На подобную деятельность будет рациональнее структуру данных запилить, аля стека. Либо читать с txt. Ну и да, дальше если начинать извращаться то JSON, CSV и т.п.
свойство clients , где о нём можно прочитать? Как и где можно узнать какие свойства есть у ws ?
Кажется я не понимаю что такое сервер. Я сижу в ковыряю React (запущенный сервер) так же использую бэкенд на express (запущенный сервер). Обратиться к бд использую OpenServer (запущенный сервер) :)) вот я вижу WebSocket и требуется создать сервер. Я вижу что посылаются запросы и приходит ответ, но понять как это устроено и что за магия твориться мне не понятно. Точнее я не задумывался глубоко. У меня в мыслях просто разделение фронтенд и бэкенд и возникает вопрос если у меня запущен localhost:4000 на express, то WebSocket можно ли завязать на этот скажем так сервер? Ткните носом где я не понимаю
сначала написало в терминале что http-server нет такой команды. потом установил через нпм install http-server все прикрасно вроде все работает но после того я зашел в браузер на localhost:8080 и мне открыло index of/ и там мои файлы. Братик что за ошибка
У меня точно также.
Кто нибудь нашел ошибку?
Полезныый урок но для тех кто впервые знает про сокеты. Все каналы показывают одно и тоже простое отправка смски . Никто не снимает уроки как создать приватные комнаты для чата и так далее, это же можно делать сокетами.
причем тут приватные комнаты чата к пояснениям сетевого протокола
почему мы подключаем модуль через директиву require, а не import? Чтобы это сделать нам нужно было бы дополнительно подключить babel?
Да, кроме модулей в Node.js можно использовать все остальные нововведения без Babel. Не вижу большого смысла включать его в проект только ради import/export.
Есть большая проблема: почему когда я отправляю на сервер сообщение "Hello", назад я получаю [objectBlob]?
client.send(message.toString()); при отправке сообщения с сервера. Может кому еще пригодиться кто делать будет.
@@user-kr9xx5cr9b Спасибо огромное! Очень помогло! Прям выручили)
@@danixpuh7073 Пожалуйста! Считаю что таким нужно делится всегда! Очень часто по началу сталкивался с вопросами и ответа приходилось искать очень долго. А так, мне не сложно, сам разобрался и написал. Добро всегда добром вернётся! Успехов!
@@user-kr9xx5cr9b почему вы удалили сообщение, где помогли?
@@finishsuffering самое первое сообщение в ветке
делаем через cordova клиент и кайфуем
Не работает вообще, указывает в файле server.js на первую строку на document, принимает как за ошибку, почему так?
Плохой гайд. Автор упустил важные моменты: где взять глобальную команду http-server? Ответ: данный модуль можно установить глобально командой npm install --global http-server . Откуда берется веб страница и стиль для нее? Ответ: Автор просто решил скипнуть этот момент, страница и стили лежат в папке public на гитхабе по сссылке из видео. Если тупо следовать видео, то ничего не заработает. При этом при первом запуске http-server может возникнуть ошибка прав доступа к выполнению сценариев. Чтобы установить нужную политику введите Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
святой человек, спасибо тебе!
+++ видео ни о чем 💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩💩
@@zhuvachkabubulgum7487 да ладно
Автор и вовсе закрыл свои гениальные исходники
что делать если команда http-server не работает
npm install -g http-server
Гайз, у меня возникла небольшая проблема, в видео решения я не нашёл. При обновлении страницы чат перестает функционировать, никто не поможет?
ничего не работает, всё делаю как у видео, но после запуска сервера и клиента ничего не происходит..
Найс канал. Есть ли смысл писать чат на чистых вебсокетах или лучше использовать фреймворк, например Express?
Я бы написал на чем-то вроде socket.io - быстрее и надежнее
express + socket.io; koa + socket.io, в любом случае нужен еще http сервер; Лучше не использовать браузерные WebSockets, так как в них нет много нужно функционала, который реализован в socket.io (например)
Что насчёт авторизации, аутентификации? Например я хочу через вебсокеты подключиться к внешней системе, которая выдала мне логин и пароль. Я же не могу пароль просто прописать в js на сайте. Как его можно спрятать?
У вас же пользователь не отсылает КАЖДЫЙ раз пароль при запросе страниц? Авторизация идет по кукису например. Тут подход тот же - у клиента есть id сессии, полученный при логине например, и оно же хранится на сервере.
Вся проблема в том, что сервис не мой IBM , а страница моя. И куки тоже мои. IBM выдал креденшинл, который надо прописать в js чтоб общаться через mqtt over websosket. Вот куда их запихнуть, ума не приложу. Так чтоб при просмотре исходного кода страницы не было видно.
Гугл как-то ж делает без сессии
Если ваш ключ секретный, то запихнуть только на ваш сервер. Что-то вроде: страница -> [ws server -> ws client on server] -> ws server ibm
- в скобках - то, что на ваашем сервере, там же и приватній ключ хранить
а зачем было через http-сервер запускать ? чтоб не обрабатывать гет и пост запросы ? через порт 3000 не запустился файл .
Как на линуксе вебсокеты установить? npm install --save ws не работает
Sperva nujno ustanovit sam npm. Ustanovi nodejs s oficialnogo sayta v komplekte idet i npm
Слушает порт 3000 а переходит по 8080, почему?
Спасибо за знание но 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 модуль.
Это конечно круто все, но вам настолько лень запушить файл server.js, а не оставлять его пустым?)
Уважаемые, кто подскажет, как развернуть на реальном сервере? Не понимаю, как открыть порт на Nginx.
Подскажите, пожалуйста, какой шрифт используется в демке? Он бы мне очень пригодился.
+Денис Каримов Это Consolas
Ребят, вопрос довольно глупый, но хоть убей не понимаю, где он подключает html и css?
Здесь показаны только js файлы, тоесть файлы скриптов. В частности он подключает app.js через тег в html файле, а не в скрипты подключает html, просто этого нет на видео)
Обрати внимание на момент где автор выбирает getElementbyId...вот за этим и творится магия) он их не показал. Они просто в проекте лежат вместе с данным жсниками
Здравствуйте. А можно как-то запустить websocket server из браузера?
+
Скачал с github файл сервер почему то пустой и там половина года нету
Автор канала, у тебя на сайте не работает функционал оформления подписки((((( плак плак
Будьте добры пояснить в чём именно проблема.
@@codedojo думал оформить подписку но при клике ничего не происходило. В консоль вроде что то вылетало, но сейчас не вспомню что...
@@codedojo аналогичная ситуация с регистрацией через соц сеть
А что... Коротко и только по теме.
На гитхабе server.js пуст.
Там и app не написан вообще. Гитхаб ради галочки выложен был похоже.
@@YukimuraChristian Написано ведь, исходники)
Добрый человек повыше в чате выложил исходники на свой Гит Хаб
нихрена не работает
А тебе не кажется, что дело в тебе?
Урок не полный.
Имя "http-server" не распознано как имя командлета, функции, файла сценария или выполняемой программы.
Команда в терминале "npm i http-server -g"
@@ILikeCherryJam ошибка npm Error
чувак ну ты просто надиктовал какую то херь - где тут знакомство бл?..
Финальная версия проекта github.com/devope-learn/websocket-intro/tree/fixes
самая полезная ссылка!
😀
С П А С И Б О ! ! !