发送推送通知 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 的相关文章

  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • NoSuchMethodError:尝试调用非函数,例如 null:'dart.global.firebase.auth'

    Flutter 新手 我怀疑在尝试设置 Firebase Auth 时错过了一些非常简单的事情 一直在网上寻找解决方案 大多数人要求您仔细检查 firebase auth js 是否正确包含在 index html 文件中 这样就完成了 下
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 是否有“npmpublish-f”的解决方法

    现在npm publish f已弃用 是否有解决方法或软件包可以覆盖发布后的目标版本 我知道关于semver http semver org 我还想要npm publish f 您可以取消发布特定版本 然后重新发布它 npm unpubli
  • Nodejs 在循环中等待

    我想循环等待 实现此目的的最佳方法是什么 这是我的实际代码 var groups 461 6726 3284 4 121 11 399 1735 17 19 1614 groups forEach function value myfunc
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • aws - 将字符串作为文件上传到 S3 存储桶

    我尝试使用适用于 NodeJS 的 AWS 开发工具包将字符串作为文件保存到 AWS S3 存储桶 PUT 请求成功 但文件未在 S3 存储桶中创建 以下是我的代码片段 const s3 new S3 apiVersion 2006 03
  • 无法运行 npm install

    In here http devdocs magento com guides v2 0 frontend dev guide css topics css debug html它说要跑npm install 但是当我运行时出现此错误sud
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • 使用异步方法等待 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