发送推送通知 Firebase React-JS

2023-11-30

我正在开发一个使用 Firebase 云消息传递反应的项目。我正在将其发送到我的服务器,但它不起作用。当然我已经尝试过了,但我不知道又出了什么问题。

下面是代码。 这里它发送一个POST向 Firebase 请求,它应该向用户发送通知。

async function sendNotification(id, userMessage) {
    const headers = {
        'Authorization': `key=${code}`,
        'Content-Type': 'application/json'
    }
    const message = {
        'to': `${id}`,
        'content_available': true,
        'apns_priority': 5,
        'notification': {
        body: `${userMessage}`
    },
    const url = 'https://fcm.googleapis.com/fcm/send'
    //console.log(code)

    await axios.post(url, message, {
        headers: headers
    })
}
const sendMessageToServer = async (e) => {
    //e.preventDefault();
    toggle()
    const docRe = doc(database, "help", mailer);
    const data = {
        email: user.email,
        user: newMessage,
    }
    //console.log(data, 'not clear')
    setNewMessage('')
    //console.log(data, newMessage, 'cleared')
    setShow(false)
    if(newMessage === '') {

    }
    else {
        const docRef = doc(database, "users", mailer);
        await updateDoc(docRe, {
            msg: arrayUnion(data)
        })
        .then(() => {
            async function p() {
                const id = await getDoc(docRef)
                //console.log(id.data())
                sendNotification(id.data().notice, `Admin : ${data.user}`)
            }
            p()
        })
    }

有时它会发送到我的本地主机,因为我在那里进行了测试,但它在我的本地主机上不起作用Netlify应用程序。其次,我注意到它不断为每个用户生成相同的令牌,但这不是问题,但如果您能在这两方面提供帮助,我将不胜感激。

export default function Dashboard() {
    async function callToken() {
        await getToken(messaging, {vapidKey: process.env.NOTIFICATION})
        .then((code) => {
            //console.log(code)

            async function docRef() {
                const dc = doc(database, "users", auth.currentUser.email);
                await updateDoc(dc, {
                    notice: code
                });
            }
            docRef()
        })
    }

    async function requestPermission() {
        await Notification.requestPermission()
        .then((permission) => {
            if (permission === 'granted') {
                console.log('Notification permission granted.')
                callToken()
            }
        })
    }

    const goTo = useNavigate();
    useEffect(() => {
        onAuthStateChanged(auth, (data) => {

            if(!data) {
                goTo('/login')
            }
            else {
                currentBalance();

                requestPermission()
            }
        })
    })
}

请知道我导入了所有必需的模块。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

发送推送通知 Firebase React-JS 的相关文章

随机推荐

  • 使用异步方法等待 Task.Run 不会在正确的线程上引发异常

    当运行下面的测试方法时 我发现即使我等待一个抛出异常的任务 测试也会通过 此外 还会弹出一个单独的窗口 提示 QTAgent exe 已停止工作 这表明异常不会传播到运行测试的线程 而是杀死一个单独的线程 我想知道为什么会发生这种情况 另外
  • 在 Struts 2 中从 Java 获取 JSON 对象

    我正在尝试使用 Java 服务器获取响应文本getJSON jQuery 方法 虽然 当Java类是简单格式时我可以获得响应数据 String List and Map 使用其他Java对象时无法获取成功数据 以下是使用简单类型的 Java
  • PHP:file_get_contents 无法打开流:连接被拒绝

    我正在尝试访问第二台服务器file get contents和 simple load xml 我得到 无法打开流 连接被拒绝 结果会怎样呢 allow url fopen Yes allow url include Off 是我的 php
  • 在 Swift 中转换为不同的 C 结构不安全指针

    我想调用 Posix 套接字函数socket and bind来自斯威夫特 socket很容易 需要Int32s but bind造成了问题 因为我有一个sockaddr in指针 但它需要一个sockaddr指针 在 C 语言中 这将是一
  • 了解 NodeJS WebSocket 服务器的对象创建和垃圾收集

    我正在使用wsNodejs 中用于 Web 套接字服务器的模块 代码的简化版本是这样的 var WebSocketServer require ws Server var wss new WebSocketServer port 9001
  • 如何将字符串日期转换为长毫秒

    我在字符串中有一个日期 例如 12 December 2012 如何将其转换为毫秒 长 Using 简单日期格式 String string date 12 December 2012 SimpleDateFormat f new Simp
  • 为数据表中的计算列定义 DateDiff

    我有 日期时间已过期 列 我想创建另一个名为 已过期 的列 该列将根据过期日期显示 是 或 否 如果日期已过 则显示 是 我写了这个 DataColumn colExpirationDate new DataColumn DateTimeE
  • 重新计算动态布局属性

    这是一个可调整大小的窗口 设置动态布局属性 以便顶部组框调整宽度大小 下部组 框和树以及 3 个按钮在两个维度上调整大小 对于高级复选框 我添加了代码来隐藏额外的控件并调整关联框的高度 所以它看起来像这样 用于切换控制值的代码是 void
  • 删除或更新模拟器上的 Google Play 服务

    我编写了一个使用谷歌地图 API v2 的 Android 应用程序 我想在模拟器上测试它 但为了显示地图它有一点问题 我用谷歌搜索并找到了文章 我必须将其安装到软件包 vending apk android gms apk 中 我下载了软
  • Hammer.js 无法删除事件监听器

    我创建了一个锤子实例 如下所示 var el document getElementById el var hammertime Hammer el 然后我可以添加一个监听器 hammertime on touch function e c
  • jQuery :使用已弃用的 .toggle() 替代方法

    我有一些类名为 mute btn 的图像 当我单击它们时 我的图像源正在更改 mute btn toggle function var clicked false var src this attr src src src replace
  • Winform 应用程序名称在 Windows 10 任务管理器的“启动”选项卡上显示为 _alphanumeric

    在 Windows 10 上 我的表单应用程序显示为字母数字字符 1F036AE84FF792FB79A74F 启动选项卡 in 任务管理器 它是一个MSI安装文件 以下是运行 exe 的路径 C Users win10user AppDa
  • jQuery 如果 DIV 没有类“x”

    在 jQuery 中 我需要执行一个 if 语句来查看 this 是否不包含类 selected thumbs hover function this stop fadeTo normal 1 0 function this stop fa
  • PCM:无法访问合作伙伴

    按照快速入门指南操作时 合作伙伴连接管理器 PCM 出现问题 采取的步骤 启用智能设备管理API 配置 OAuth 权限屏幕 添加了 智能设备管理 API auth sdm service 的范围 为新的 Web 服务器创建 OAuth 令
  • JavaScript函数将unicode伪字母转换为常规字符?

    我正在尝试编写一个函数 该函数接受包含 unicode 伪字母表中的字符的任何字符串 并返回一个等效字符串 其中这些字符已替换为 ASCII 中的常规字符 const toRegularCharacters s gt toRegularCh
  • 读取内存中的exe文件并执行

    是否可以使用Windows将文件读入内存 将数据保存在字节数组中 从文件系统中删除原始文件并从内存中执行它 EDIT 我的目标是保护我的 java 代码免受逆向工程的影响 我用 C 编写了一个启动器 它获取加密的 jar 文件 解密并启动它
  • Tensorflow:如何编码和读取bmp图像?

    我正在尝试读取 bmp 图像 对这些图像进行一些增强 将它们保存到 tfrecords 文件中 然后打开 tfrecords 文件并使用这些图像进行图像分类 我知道有一个 tf image encode jpeg 和一个 tf image
  • Android 调用“requestWindowFeature( Window.FEATURE_PROGRESS );”时出错在活动中

    我正在尝试在 Android 活动中显示 WebView 的加载进度 当我尝试使用以下命令显示窗口的进度条时 requestWindowFeature Window FEATURE PROGRESS as per http develope
  • 如何为 HTML 页面创建渐变背景

    我正在学习 HTML 为 HTML 页面创建渐变背景的最佳方法是什么 到目前为止 这是我的背景 body style background color Powderblue 我知道这不是渐变 这不能在 html 中完成 但可以在 css 特
  • 发送推送通知 Firebase React-JS

    我正在开发一个使用 Firebase 云消息传递反应的项目 我正在将其发送到我的服务器 但它不起作用 当然我已经尝试过了 但我不知道又出了什么问题 下面是代码 这里它发送一个POST向 Firebase 请求 它应该向用户发送通知 asyn