Fatal编程技术网

Javascript 向用户发送通知

javascript php

Javascript 向用户发送通知,javascript,php,Javascript,Php,我正在尝试创建一个功能，一旦按下按钮，它会向所有登录该站点的用户发送一个chrome通知，除了按下按钮的用户，这些用户存储在数据库的用户表中。现在，为了简单起见，我做了一个确认按钮被点击的警报，所以通知还没有写出来。我的代码如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div c

我正在尝试创建一个功能，一旦按下按钮，它会向所有登录该站点的用户发送一个chrome通知，除了按下按钮的用户，这些用户存储在数据库的用户表中。现在，为了简单起见，我做了一个确认按钮被点击的警报，所以通知还没有写出来。我的代码如下

  <!DOCTYPE html>
    <html>
    <head>
        <title></title>

</head>
<body>
    <div class="button">
        <form method="post">
            <input name="send" type="hidden" value="id"> <input name="send"
            type="submit" value="knop">
        </form>
    </div>

//if the 'send' button is clicked, it echoes a script saying the button is clicked. 
if (isset($_POST['send'])) 
    { 
      echo "<script>alert(\"the button is clicked\")</script>"; 
//  if the username is logged in AND the message is sent it should send the code script alert to all existing users in the 'user' table in the database.   

        if (isset($_SESSION['username']) AND ('$_POST[id]', '$_POST[name]', '$_POST[message]') 
    { 
echo "<script>alert(\"yes\")</script>";
}
 }
    </body>
    </html>


//如果单击了“发送”按钮，它会回显一个脚本，表示该按钮已单击。
如果（isset（$_POST['send']））
{ 
回显“警报（\”按钮被单击“\”）；
//如果用户名已登录且消息已发送，则应将代码脚本警报发送给数据库“用户”表中的所有现有用户。
如果（isset（$会话['username']）和（$发布[id]，$发布[name]，$发布[message]）
{ 
回显“警报（\“是”）；
}
}
最后一个if语句是错误的，我知道。这是因为我不知道逻辑是什么，所以我可以设置条件，即用户已登录，并且消息由登录用户以外的其他人发送。（因此，发布评论实际上会向登录该站点的所有其他用户发送通知）

我希望我足够清楚，您可以帮助我。

这只在
本地运行。切勿使用
数据库进行测试

这是
Notification
的示例代码。您只需复制并粘贴到编辑器中，并将其保存为
.php
扩展名。文件必须放置在
www/
中并运行它。变量
var articles
用于保存推送通知的数据。和
设置超时（函数（）{
对于两种不同的通知，此函数称为
定时


    <?php
$var;
?>
<!DOCTYPE html>
<html>
<head>
<title>Display browser Notification from Web Application Demo</title>
<script type="text/javascript">

var articles = [
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"],
["Send notification to users","http://stackoverflow.com/questions/39915185/send-notification-to-users"]
];


setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 200000);



document.addEventListener('DOMContentLoaded', function () 
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});

//===================================
setInterval(function(e){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();

}, 5000);
//===================================
});

function notifyBrowser(title,desc,url) 
{
if (!Notification) {
console.log('Desktop notifications not available in your browser..'); 
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'https://cdn0.iconfinder.com/data/icons/basic-ui-elements-colored/700/09_bell-3-512.png',
body: desc,
});

// Remove the notification from Notification Center when clicked.
notification.onclick = function () {
window.open(url);      
};

// Callback function when the notification is closed.
notification.onclose = function () {
console.log('Notification closed');
};

}
}


</script>



<style type="text/css">
.hover{background-color: #cc0000}
 #container{ margin:0px auto; width: 800px} 
.button {
 font-weight: bold;
    padding: 7px 9px;
    background-color: #5fcf80;
    color: #fff !important;
    font-size: 12px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 1px 0px rgba(0,0,0,0.15);
    border-width: 1px 1px 3px !important;
    border-style: solid;
    border-color: #3ac162;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
.authorBlock{border-top:1px solid #cc0000;}
</style>
</head>
<body>
<div id="container">
<h1>Display browser Notification from Web Application Demo</h1>  

<h4>Click notification button</h4>
<a href="#"  id="notificationButton" class="button">Notification</a>
</div>


</body>
</html>




显示来自Web应用程序演示的浏览器通知
var条款=[
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"],
[“向用户发送通知”http://stackoverflow.com/questions/39915185/send-notification-to-users"]
];
setTimeout（函数（）{
var x=数学地板（（数学随机（）*10）+1）；
var title=条款[x][0]；
var desc='最受欢迎的文章'；
var-url=文章[x][1]；
通知浏览器（标题、描述、url）；
}, 200000);
document.addEventListener（'DOMContentLoaded'，函数（）
{
if（Notification.permission！=“已授予”）
{
Notification.requestPermission（）；
}
document.querySelector（“通知按钮”）.addEventListener（“单击”，函数（e）
{
var x=数学地板（（数学随机（）*10）+1）；
var title=条款[x][0]；
var desc='最受欢迎的文章'；
var-url=文章[x][1]；
通知浏览器（标题、描述、url）；
e、 预防默认值（）；
});
//===================================
setInterval（函数（e）{
var x=数学地板（（数学随机（）*10）+1）；
var title=条款[x][0]；
var desc='最受欢迎的文章'；
var-url=文章[x][1]；
通知浏览器（标题、描述、url）；
e、 预防默认值（）；
}, 5000);
//===================================
});
功能通知浏览器（标题、说明、url）
{
如果（！通知）{
console.log（'您的浏览器中没有桌面通知..'）；
返回；
}
if（Notification.permission！=“已授予”）
{
Notification.requestPermission（）；
}
否则{
var通知=新通知（标题{
图标：'https://cdn0.iconfinder.com/data/icons/basic-ui-elements-colored/700/09_bell-3-512.png',
正文：desc，
});
//单击时从通知中心删除通知。
notification.onclick=函数（）{
窗口打开（url）；
};
//通知关闭时的回调函数。
notification.onclose=函数（）{
console.log（“通知已关闭”）；
};
}
}
.hover{背景色：#cc0000}
#容器{边距：0px自动；宽度：800px}
.按钮{
字体大小：粗体；
填充：7px 9px；
背景色：#5fcf80；
颜色：#fff！重要；
字体大小：12px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
光标：指针；
文字装饰：无；
文本阴影：0 1px 0px rgba（0,0,0,0.15）；
边框宽度：1px 1px 3px！重要；
边框样式：实心；
边框颜色：#3ac162；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
显示：-moz内联堆栈；
显示：内联块；
垂直对齐：中间对齐；
缩放：1；
边界半径：3px；
框大小：边框框；
盒影：0-1px0 rgba（255255,0.1）插图；
}
.authorBlock{边框顶部：1px实心#cc0000；}
显示来自Web应用程序演示的浏览器通知
单击通知按钮

如果是活动通知，您需要使用WebSocket。谢谢，我不知道。请您详细说明一下，好吗？您说的是“所有用户都注册并存储在用户表中”和“所有其他登录到该站点的用户”-你指的是哪一个？抱歉，误读了你的评论。我指的是只登录用户。我编辑了我的问题，这样可以消除混淆，因为问题基本上是关于服务器推送的，提供客户端替代
警报
实际上没有任何帮助。好的，谢谢，他可能试图转换为服务器推送。我只是给出一个想法。bcz他不知道逻辑@QuentinThe OP