Erhalten Sie Browserbenachrichtigungen von jedem außer dem aktuellen Authentifikator. Benutzer

Question

Ich baue gerade eine Chat-App in React JS und bin seit zwei Tagen verrückt nach diesem Problem. Ich möchte dafür sorgen, dass bei jeder neuen Nachricht eine Browserbenachrichtigung erscheint.

Das Problem ist, dass ich nur Benachrichtigungen erhalte, wenn ich eine Nachricht sende, nicht wenn jemand anderes eine Nachricht sendet. Die tatsächliche Situation sollte das Gegenteil sein.

Ich verwende das NPM-Paket „react-push-notification“, um dies zu erreichen.

Chat.js:

import { useEffect, useState } from "react";
import { addDoc, collection, serverTimestamp, onSnapshot, query, where, orderBy } from "firebase/firestore";
import { auth, db } from "../firebase-config";
import "../styles/Chat.css";
import IDLogo from "../images/IDLogo.png";
import notificationSound from "../sounds/message_sound.mp3";
import addNotification from "react-push-notification";
import DefaultProfilePicture from "../images/default_pfp.jpeg";

export const Chat = props => {
  const { room } = props;
  const [newMessage, setNewMessage] = useState();
  const [messages, setMessages] = useState([]);

  const messagesRef = collection(db, "messages");

  useEffect(() => {
    const queryMessages = query(messagesRef, where("room", "==", room), orderBy("createdAt"));
    const unsubscribe = onSnapshot(queryMessages, snapshot => {
      let messages = [];
      snapshot.forEach(doc => {
        messages.push({ ...doc.data(), id: doc.id });
      });
      setMessages(messages);
    });

    return () => unsubscribe();
  }, []);

  useEffect(() => {
    const messagesContainer = messagesRef.current;
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }, [messagesRef]);

  const handleSubmit = async e => {
    e.preventDefault();
    if (newMessage === "") return;

    const currentUser = auth.currentUser;

    await addDoc(messagesRef, {
      text: newMessage,
      createdAt: serverTimestamp(),
      user: currentUser.displayName,
      profilePicture: currentUser.photoURL,
      room,
    });

    if (newMessage && newMessage.user !== auth.currentUser.displayName) {
      addNotification({
        title: "New Message",
        message: newMessage.text,
        duration: 5000,
        native: true,
        icon: IDLogo,
      });
    }

    setNewMessage("");
  };

  useEffect(() => {
    const audio = new Audio(notificationSound);
    const lastMessage = messages[messages.length - 1];

    if (lastMessage && lastMessage.user !== auth.currentUser.displayName) {
      audio.play();
    }
  }, [messages]);

  return (
    <div className='chat'>
      <div className='header'>
        <h1>
          Welcome to: <span className='Chat__room--title'>{room.toUpperCase()}</span>
        </h1>
      </div>

      <div ref={messagesRef} className='messages'>
        {messages.map(message => (
          <p className='Chat__message'>
            {message.profilePicture ? (
              <img className='profile__picture' referrerpolicy='no-referrer' src={message.profilePicture} alt={message.user} />
            ) : (
              <img className='profile__picture' src={DefaultProfilePicture} alt={message.user}></img>
            )}
            {message.user} : {message.text}
          </p>
        ))}
      </div>
      <div className='send__message__container'>
        <form onSubmit={handleSubmit} className='new__message__form'>
          <input
            spellCheck='false'
            onChange={e => setNewMessage(e.target.value)}
            className='new__message__input'
            placeholder='Type a message here...'
            value={newMessage}
          />
          <button type='submit' className='signOut--sendMessage__button'>
            Send
          </button>
        </form>
      </div>
    </div>
  );
};

Answer 1

只需将添加通知功能移出处理提交功能即可：

if (newMessage && newMessage.user !== auth.currentUser.displayName) {
  addNotification({
    title: "New Message",
    message: newMessage.text,
    duration: 5000,
    native: true,
    icon: IDLogo,
  });
}

将其带到下一个useEffect：

useEffect(() => {
const audio = new Audio(notificationSound);
const lastMessage = messages[messages.length - 1];

if (lastMessage && lastMessage.user !== auth.currentUser.displayName) {
  audio.play();
  addNotification({
   title: "New Message",
   message: newMessage.text,
   duration: 5000,
   native: true,
   icon: IDLogo,
  });
}}, [messages]);