This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Система диалогов в Unity : by.Brackeys
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Источник: github.com
Как реализована система диалогов VK?
По какому принципу ВК идет получение сообщения? Допустим отправить легко — написать сообщение, через ajax добавить в БД, а как в этот момент сделать, чтобы другому пользователю пришло это сообщение, не обновляя страницу? Есть ли возможность сделать такое не с помощью интервала, а именно тогда, когда сообщение добавляется в БД? Если не сложно, прикрепите пример, пожалуйста 🙂
Отслеживать
задан 3 июн 2018 в 8:05
53 1 1 золотой знак 2 2 серебряных знака 10 10 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
По-хорошему, в современности, такое надо бы реализовывать с помощью WebSockets. Но во Вконтакте сделано иначе, еще со старых времен, когда вебсокеты были не такими удобными.
У них сделано так, что яваскрипт делает запрос на сервер, а сервер «зависает», в цикле проверяя наличие новых сообщений. Если сообщение появляется, сервер «развисает» и возвращает ответ. Благодаря этому нет временной задержки между отправкой сообщения и его получением (кроме, естественно, неизбежных сетевых задержек).
Если же новых сообщений не поступало в течение какого-то времени (20 секунд кажется), то скрипт тоже делает возврат, после чего яваскрипт тут же делает новый запрос, и все повторяется.
Источник: ru.stackoverflow.com
Делаем диалоги как вконтакте (Урок 01)
Новая система диалогов в ВК! 11 03 2014
Добрый день! сегодня мы с вами разработаем тело диалогов. а это где будут отображатся все юзеры (кто онлайн).
И так создадим папку dialogvk и в этой папке создадим файлы: style.css, index.html, и папка images.
Зайдём в index.html и поместим вот такой код:
Диалоги (в)контакте от «Вадима Кондакова»
Сохраняем, и после
Диалоги (в)контакте от «Вадима Кондакова»
Сохраним, и между тегами:
/* Определяем тип браузера */ var ie = 0; var op = 0; var ff = 0; var browser = navigator.userAgent; if (browser.indexOf(«Opera») != -1) op = 1; else < if (browser.indexOf(«MSIE») != -1) ie = 1; else < if (browser.indexOf(«Firefox») != -1) ff = 1; >> var block = document.getElementById(«block»); delta_x = 0; delta_y = 0; /* Ставим обработчики событий на нажатие и отпускание клавиши мыши */ block.onmousedown = saveXY; if (op || ff) < block.addEventListener(«onmousedown», saveXY, false); >document.onmouseup = clearXY; /* При нажатии кнопки мыши попадаем в эту функцию */ function saveXY(obj_event) < /* Получаем текущие координаты курсора */ if (obj_event) < x = obj_event.pageX; y = obj_event.pageY; >else < x = window.event.clientX; y = window.event.clientY; if (ie) < y -= 2; x -= 2; >> /* Узнаём текущие координаты блока */ x_block = block.offsetLeft; y_block = block.offsetTop; /* Узнаём смещение */ delta_x = x_block — x; delta_y = y_block — y; /* При движении курсора устанавливаем вызов функции moveWindow */ document.onmousemove = moveBlock; if (op || ff) document.addEventListener(«onmousemove», moveBlock, false); > function clearXY() < document.onmousemove = null; // При отпускании мыши убираем обработку события движения мыши >function moveBlock(obj_event) < /* Получаем новые координаты курсора мыши */ if (obj_event) < x = obj_event.pageX; y = obj_event.pageY; >else < x = window.event.clientX; y = window.event.clientY; if (ie) < y -= 2; x -= 2; >> /* Вычисляем новые координаты блока */ new_x = delta_x + x; new_y = delta_y + y; block.style.top = new_y + «px»; block.style.left = new_x + «px»; >
теперь откроем файл style.css и вставим вот это:
html < height:100%; >body
сохраним. и откроем наш index.html и посмотрим перед собой тёмно-синий фон).
и так теперь в style.css вставим:
.block < cursor: move; position: fixed; z-index: 9999999; >.im_title_online < font-size: 1.09em; cursor: pointer; font-weight: bold; text-shadow: 0px 1px 0px #262626; color: white; >.im_close < display: block; background: black; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 0 2px #111; -webkit-box-shadow: 0 0 2px #111; box-shadow: 0 0 2px #111; padding: 3px; margin: 0 0 0 4px; visibility: hidden; opacity: 0.6; filter: alpha(opacity=60); visibility: visible; cursor: pointer; >.im_header < background: white; background:rgba(0, 0, 0, 0.75); width:220px; height: 388px; padding: 5px 10px 5px 10px; border-radius: 3px 3px 3px 3px; >.im_content < background: white; box-shadow: inset 0 0 3px #777; height: 307px; border-radius: 3px 3px 3px 3px; padding: 5px 8px 5px 8px; cursor: default; overflow:auto >.ims_content img < border-radius: 2px; float:left; margin-right:3px; width:30px >.ims_content a < color: #2B587A; text-decoration: none; padding: 0 0 0 8px; cursor: pointer; line-height: 2.72em; white-space: nowrap; display: block; width: 130px; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding: 5px 2px 5px 2px; >.ims_content a:hover
сохраняем и в index.html поместим:
после:
сохраняем. и смотрим результат и у нас получилось вот такое чудо:
И теперь добавим в style.css:
input[type=checkbox] < margin: 5px; >input, textarea < background: white; border: 1px solid #AAA; box-shadow: 0px 1px 0px white; -webkit-box-shadow: 0px 1px 0px white; -moz-box-shadow: 0px 1px 0px white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: inherit; font-size: 11px; line-height: 26px; color: #555555; font-size: 11px; padding: 0px 10px; height: 28px; position: relative; display: block; outline: none; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; >input.hidden, textarea.hidden < display: none; >input:focus, textarea:focus < border-color: rgba(34, 121, 204, 0.8) !important; outline: 0; outline: thin dotted 9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(34, 121, 204, 0.5); >input[type=checkbox] < border: none; padding: 0px; >textarea
Сохраним и смотрим результат. ну на этом у меня всё. а на следущем уроке мы научим открывать окна диалогов и закрывать форму диалога.
Исходник работы можно скачать на Яндекс.Диске)
Если есть вопросы задавайте отвечу
PS: В исходнике данного урока имеются все картинки.
Сказать спасибо вы можете через:
Yandex.Money: 410011064487253
WebMoney WMR: R287241570118
Похожие новости
Некоторые, подключают CSS с использованием асинхронной загрузки javascript, чтобы скрыть те стили, которые не используются на текущей странице.
Что нам для этого нужно, для начала качаем сам архив DataLife Engine, скачать его можно здесь или купить лицензию здесь, качаем и устанавливаем нужную вам
Для некоторых проектов необходимо защитить скачивание файлов гостям. Например, чтобы только конкретные люди, зашедшие на сайт, могли скачать файлы. Сегодня я
Источник: php-ru.info