Как технически реализован быстрый чат VK?

Question

[Crash]

Все мы знаем, что в ВК есть быстрый чат:

Т.е. ты сидишь в контактике, просматриваешь страницы через браузер на десктопе и одновременно общаешься в этом чатике, который не исчезает от страницы к странице.

Мне нужно реализовать интерактивный компонент (календарь), работающий по той же схеме и способный интегрироваться на другие сайты.

Что конкретно мне нужно выяснить:
1. Как реализовано плавающее окно?
2. Как сохраняется состояние компонента от страницы к странице?

P.S.: настолько привык к модалкам бустрапа, что сразу не понял. что плавающие окна - это та же верстка))

Comments

[Степан Крапивин]

Очень вероятно, что реализовано через вебсокеты. Но это не точно ;-)

[Crash]

Степан, мне нужно точно, ибо придется делать)

[Степан Крапивин]

Crash, ну вариантов немного. И более вероятный это вебсокеты. Другие варианты longpolling или по таймеру дёргается сервер и запрашивает обновления. Последний вариант самый хреновый.

[Aslan]

Crash, зачем тебе знать как сделано у вк? Веб сокеты тебе более чем подходят для реал тайма

[Crash]

Aslan, окей, вебсокеты, уже что-то. Я обновил вопрос, если не трудно, гляньте пожалуйста

[Леонид Князев]

1. Как реализовано плавающее окно?

Вёрсткой.

2. Как сохраняется состояние компонента от страницы к странице?

Сайт Вконтакте - это SPA (Single-page application). Т.е. при переходах между страницами не происходит перезагрузки самой страницы.

[Дмитрий Кузнецов]

Леонид Князев, вроде какие-то страницы перезагружали страницу. Но это не точно.

[ThunderCat]

Дмитрий Кузнецов, это очень легко проверить - запустите аудио, дале нажмите F5, - музыка скопытилась. Если при переходе по внутренним ссылкам нарушается работа например аудиоплеера - значит нарушена СПА целостность, но я на такое не натыкался, все что касается ссылок выполняется в режиме спа.

[Дмитрий Кузнецов]

ThunderCat, видимо ранее это замечал. Сейчас не особо в вк захожу)

Answer 1

[Дмитрий Кузнецов]

Я не в курсе как это у них реализовано, но думаю что примерно так:
1. Сам сайт - это SPA.
2. Плавающее окно сделано через простой html, css (не считая самого функционала)
3. При изменения страницы - состояние окна не меняется, т.е. отображается на том же месте, где и было ранее.

PS: Да, знаю, ответ расплывчатый, если его можно вообще считать ответом. Но возможно, вы сможете додумать что-то лучше и реализовать это.

Answer 2

[Troodi Larson]

Сделано это с помощью JS и сокетов. Это отвечает за отправку и получение сообщений.
Плавающее окно это просто css+html.
Сохранение происходите скорее всего в сессии, в ней хранятся последние действия.

Answer 3

[Пума Тайланд]

Блин это же фронтенд , что вам мешает открыть код и посмотреть?