Как правильно сделать чат?

Question

[ArtemEfremov]

Здравствуйте. Вот как будет правильней сделать чат именно в верстке сайта. Серверная часть есть: пока только обработка, и отправка сообщений.

Вопрос к экспертам, или к тем, кто вообще понимает что-либо в этом.

Как же действительно сделать правильный чат? Какие-то вообще открытые примеры с кодом имеются, которые можно взять к примеру за основу — чтобы не «наговнокодить» так сказать.

Вот делал я некий чат. Начинает сильно лагать, когда много сообщений. Именно затормаживает ввод текста. Я понимаю, что тут дело именно в верстке. Обновление сообщений: интервал в 1 секунду, или в 0.5 секунд.

Как вообще правильней реализовать получение сообщений, или показ истории сообщений. Как будет вообще правильней, подгружать по чуть-чуть, или всю историю разом загружать (как-то сделав так, чтобы ввод текста не подтормаживал). Хочется послушать мнение от каждого человека, который смыслит в этом. С чего начать? Как правильней всё это сделать? Как сделать вообще, чтобы это не только под мобильную версию шло, а также под полную версию (для компьютера)

Как взаимодействовать с сообщениями (удаление, редактирование)? Как правильней написать часть кода на JS.

Не прошу кидать тут кучу кода, просто хочется узнать от людей, понимающих в этом, как действительно сделать всё правильно, и не сделать потом хуже себе же со своим чатом. Спасибо!

Comments

[Алексей Ярков]

Семь раз прозвучало "правильно" или "правильнее". Не рано вы за чат взялись? Может с чего попроще начать? Теорию там подтянуть, уверенность слегка прокачать.
Очень странное ощущение скомканности в вопросе.

[ArtemEfremov]

Алексей Ярков, да, соглашусь с Вами. Определенной задачи в вопросе нет, все хочется в общем, да в общем. Просто.. тут может дело и не в знаниях, а как лучше сделать, и по какому принципу. Чат захотелось делать потому, что какое-то представление имеется, но оно не совсем четкое.

[dev null]

Ну верстка никак не влияет на заторможенность сайта. Читайте про event loop, рендеринг и виртуализацию

Answer 1

[werevolff]

Воспользуйтесь для чата любым реактивным фрэймворком. Angular.js, React.js, Vue.js или его фрэймворк второго уровня Nuxt.js.

1. Сообщения должны отдаваться постранично.
2. Паджинация осуществляется путём скроллинга.
3. Новые сообщения должны прилетать через WebSocket. Например, готовый вэбсокет - https://github.com/centrifugal/centrifugo
4. Через фрэймворк поддерживается постоянная длина массива с сообщениями. Например, 100 сообщений. Допустим, на вэбсокет приходит очередное сообщение. Оно добавляется в конец массива, а первый элемент удаляется. Если пользователь скроллит сообщения до первого показанного, скрипт отправляет на сайт запрос: отдай мне страницу с 50 сообщениями старше вот этого последнего. Сервер отдаёт страницу, она вставляется в начало массива, после чего, из него удаляются последние 50 элементов. Аналогично должен работать скроллинг к более новым сообщениям. Поскольку фрэймворки реактивные, ничего в HTML вставлять не надо: само отрендерится.

Answer 2

[Robur]

1. Возьмите react/vue
2. прикрутите виртуальный скроллинг (это когда у вас 100 сообщений, но рисуются только 3 (или сколько влезет в окошко) которые видимые). Если будет 10000 сообщений - скорость будет такая же, так как рисуются все равно так же мало.