Как отобразить аватар другого пользователя под моим сообщением в режиме реального времени с помощью socket.io?

#node.js #reactjs #express #sockets #socket.io

#node.js #реагирует на #экспресс #розетки #socket.io

Вопрос:

Всякий раз, когда пользователь открывает окно чата, он/она помечает все непрочитанные сообщения как прочитанные. Я отслеживаю последнее сообщение, прочитанное получателем, чтобы отобразить под ним аватар получателя. Я добиваюсь этого до сих пор, но не в реальном времени. Я никогда не работал с розетками или socket.io. Большая часть приведенного ниже кода была написана не мной.

 io.on("connection", (socket) =gt; {  socket.on("go-online", (id) =gt; {  if (!onlineUsers.includes(id)) {  onlineUsers.push(id);  }  // send the user who just went online to everyone else who is already online  socket.broadcast.emit("add-online-user", id);  });   socket.on("new-message", (data) =gt; {  socket.broadcast.emit("new-message", {  message: data.message,  sender: data.sender,  });  });    socket.on("logout", (id) =gt; {  if (onlineUsers.includes(id)) {  userIndex = onlineUsers.indexOf(id);  onlineUsers.splice(userIndex, 1);  socket.broadcast.emit("remove-offline-user", id);  }  }); });  

Создатель действия updateMessages обновляет статус чтения любых непрочитанных сообщений. Должен ли я передавать информацию о последнем прочитанном сообщении внутри него?

 const sendMessage = (data, body) =gt; {  socket.emit("new-message", {  message: data.message,  recipientId: body.recipientId,  sender: data.sender,  }); };    // message format to send: {recipientId, text, conversationId} // conversationId will be set to null if its a brand new conversation export const postMessage = (body) =gt; async (dispatch) =gt; {  try {  const data = await saveMessage(body);   if (!body.conversationId) {  dispatch(addConversation(body.recipientId, data.message));  } else {  dispatch(setNewMessage(data.message));  }   sendMessage(data, body);  } catch (error) {  console.error(error);  } };  export const updateMessages = (convoId, messagesIds) =gt; async (dispatch) =gt; {  try {  const { data } = await axios.patch('/api/messages', { convoId, messagesIds });  dispatch(updateMessageStatus(data, convoId, messagesIds));  } catch (error) {  console.error(error);  } }  

Комментарии:

1. Чтобы отобразить аватар получателя под сообщением , вам нужно передать путь или URL-адрес аватара вместе с сообщениями, остальное зависит от того, как вы его визуализируете.