Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2023, 17:56
Новичок на форуме
Отправить личное сообщение для vladwebsearch Посмотреть профиль Найти все сообщения от vladwebsearch
 
Регистрация: 26.05.2023
Сообщений: 4

Отправка сообщений в социальных сетях. Ввод данных в строку сообщений в соц. сетях
У меня в связи с использованием социальных сетей и чатов возник следующий вопрос. Пусть, например, я переписываюсь с Александром. Я получил сообщение от него и пишу ответное сообщение. В процессе написания ответного сообщения у Александра в мессенджере возникает индикатор процесса ввода "Михаил пишет ...", причем возможны 2 варианта:

1. индикатор отображается спустя некоторое время после начала написания мною сообщения и продолжает отображаться до некоторого момента до нажатия на кнопку Отправить;

2. индикатор процесса отображается с момента начала написания сообщения и вплоть до нажатия на кнопку Отправить.

1) Как определить промежуток времени отображения индикатора процесса "Михаил пишет ..." - ведь когда я нажму на кнопку Отправить компьютеру заранее неизвестно и каким образом определяется интервал до? Как организовать с помощью вебсокетов яваскрипта отображение индикатора процесса, так чтобы точки в строке "Михаил пишет ..." добавлялись через определенные интервалы времени и чтобы весь интервал времени отображения индикатора находился между началом написания сообщения и нажатием на кнопку Отправить?

2) Как организовать с помощью вебсокетов яваскрипта отображение индикатора процесса, так чтобы точки в строке "Михаил пишет ..." добавлялись через определенные интервалы времени и сам индикатор отображался сразу после начала написания сообщения и вплоть до момента нажатия на кнопку отправить?

P. S. Подытоживая и говоря проще - как определить время отображения индикатора процесса ввода в строку сообщений в соц сетях и как это программно организовать с помощью кода (вебсокетов яваскрипта)?
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2023, 23:17
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Вероятно, с фронта просто нужно отправлять какой-то флажок, что мы сейчас вводим сообщение, причем отправлять раз в какой-то период, пока мы вводим

Соответственно, бэкенд по вебсокету принимает этот флаг и уведомляет также клиента на другой стороне, что идет печать

Но здесь важно подметить, что фронт не должен слать бэку сброс флага, если мы перестали печатать, так как есть много вариантов, что мы просто закрыли страницу и ничего отправляться не сможет

Клиент 1:
- Начинаем ввод сообщения
- Отправляем в вебсокету флаг
- Сохраняем где-то в переменную время, в которое было отправлено
- Если дальше печатаем, то делаем то же самое, только проверяем предыдущее время, что например, с текущим временем должна быть разница в 10 секунд (чтобы не перегружать сервер каждым вводом)

Сервер:
- В вебсокет приходит флаг, что клиент вводит сообщение
- Отправляем этот флаг "Клиенту 2"
- Запускаем setTimeout, что через 10 секунд мы должны автоматом отправить "Клиенту 2" флаг, что ввод сообщения "Клиентом 1" прекращен
- При этом, если "Клиент 1" отправил сообщение, то можно сбрасывать этот setTimeout
- Или если "Клиентом 1" новый флаг ввода сообщения пришел, то сбрасывать предыдущий setTimeout

Клиент 2:
- Подписан на веб-сокет
- Ожидает флаг, что "Клиент 1" вводит сообщение


<textarea id="message"></textarea>
<span id="result" hidden>Ваш собеседник печатает...</span>


const message = document.getElementById('message');
const result = document.getElementById('result');

const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);

  result.hidden = !data.isStartedTyping;
});


let lastStartedTypingSend = null;

const SEND_TYPINING_MIN_INTERVAL = 15000; // 15 секунд

message.addEventListener('input', (event) => {
   const now = Date.now();
   
   if (lastStartedTypingSend === null || lastStartedTypingSend + SEND_TYPINING_MIN_INTERVAL < now) {
      lastStartedTypingSend = now;
     
      const payload = {
         isStartedTyping: true,
      };

      socket.send(JSON.stringify(payload));
   }
});


Сервер можно на NodeJS сделать, есть множество готовых решений для WS. Например, можно использовать этот пакет

Это первая идея, которая сходу пришла в голову. Уверен, что есть множество разных реализаций этой механики
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск