ArtemEfremov
@ArtemEfremov

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

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

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

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

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

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

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

Не прошу кидать тут кучу кода, просто хочется узнать от людей, понимающих в этом, как действительно сделать всё правильно, и не сделать потом хуже себе же со своим чатом. Спасибо!
  • Вопрос задан
  • 312 просмотров
Решения вопроса 2
werevolff
@werevolff
Воспользуйтесь для чата любым реактивным фрэймворком. Angular.js, React.js, Vue.js или его фрэймворк второго уровня Nuxt.js.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы