Javascript 推送通知如何工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11592783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do push notifications work?
提问by tim peterson
I'm trying to implement push notifications on my PHP-based website. The goal is to make something similiar to what Stackoverflow and other sites have which notify a user in real-time when they get messages.
我正在尝试在基于 PHP 的网站上实施推送通知。目标是制作一些类似于 Stackoverflow 和其他网站在用户收到消息时实时通知用户的内容。
I'm using mysql as my database, Apache as my server, and am considering using Amazon-SNS as the framework for these notifications since that is what that service seems to be intended for.
我使用 mysql 作为我的数据库，Apache 作为我的服务器，并且正在考虑使用 Amazon-SNS 作为这些通知的框架，因为这似乎是该服务的用途。
I'm having a hard understanding from the literature how programmatically the sending.phpand receiving.phppages are set up. I'd assume the sending.phppage just involves a $_POST['message']to some page, but from there I'm really lost.
我从文献中很难理解如何以编程方式设置sending.php和receiving.php页面。我假设该sending.php页面只涉及$_POST['message']某个页面，但从那里我真的迷路了。
If something could help me understand what the receiving.phppage would look like for a push notification I would greatly appreciate it.
如果有什么可以帮助我了解receiving.php推送通知的页面是什么样的，我将不胜感激。
采纳答案by Viren Rajput
Working
在职的
HTML5rocks have provided a good explanation here, about how websockets work.
HTML5rocks 在这里提供了一个很好的解释，关于 websockets 是如何工作的。
Well you can make use of Websockets for the browsers that support it (since all modern browsers provide good support)
好吧，您可以将 Websockets 用于支持它的浏览器（因为所有现代浏览器都提供了良好的支持）
Getting Started
入门
You can get started with these few resources :
您可以从以下几个资源开始：
Nettuts+ provide a good tutorial for getting started with websockets.
Nettuts+ 提供了一个很好的websockets入门教程。
For Browsers Supporting Websockets
Fallback
倒退
You can use Modernizrto detect whether the Client's browser has support for websockets or not & as a fallback you can make use of flash instead of Websockets.
您可以使用Modernizr来检测客户端的浏览器是否支持 websockets & 作为后备，您可以使用 flash 而不是 Websockets。
For those projects, when running on browsers with no WebSockets or with it disabled, web-socket-jswill be used. It will be less efficient than native, but still much lower latency than long-polling.
对于这些项目，当在没有 WebSockets 或禁用它的浏览器上运行时，将使用web-socket-js。它会比原生效率低，但仍然比长轮询低得多的延迟。
Any browser with Flash can support WebSocket using the web-socket-jsshim/polyfill.
任何带有 Flash 的浏览器都可以使用web-socket-jsshim/polyfill支持 WebSocket 。
Reference:
参考：
回答by tim peterson
I just wanted to share the actual implementation I went with. I decided to go with a great SAAS, Pusher, since there are many challenging issues in implementing Push notifications, as I realized in reading the links in @Virendra's excellent answer, that Pusher solves for you.
我只是想分享我使用的实际实现。我决定使用一个很棒的 SAAS，Pusher，因为在实现推送通知时有许多具有挑战性的问题，正如我在阅读@Virendra 的优秀答案中的链接时意识到的那样，Pusher 为您解决了。
What I was most impressed with is how little code you have to write to make this work. See below. My server-side is in PHP (Pusher has libraries in many languages).
让我印象最深刻的是你只需编写很少的代码就可以完成这项工作。见下文。我的服务器端使用 PHP（Pusher 有多种语言的库）。
require('/application/thirdParty/pusher-html5-realtime-push-notifications/lib/squeeks-Pusher-PHP/lib/Pusher.php');
require('/application/thirdParty/pusher-html5-realtime-push-notifications/config.php');
$pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);
foreach($recipients as $row){
$channel='my-channel'.$row->recipient_id;
$pusher->trigger($channel, 'notifications',
array('message' => $row->message,
'notification_id' => $row->notification_id)
);
}
Here's the HTML/JS (don't be overwhelmed, most of this code is just to populate the little circle and the list with the incoming notification as Stackoverflow and others do it):
这是 HTML/JS（不要不知所措，大部分代码只是用传入的通知填充小圆圈和列表，如 Stackoverflow 和其他人所做的那样）：
<script src="/application/thirdParty/pusher.min.js"></script>
<script>
var myID=179; // would receive notification if myID matches $row->recipient_id above;
var myChannel = pusher.subscribe('my-channel'+myID);
myChannel.bind('notifications',
function(data) {
var message=String(data.message),
url='/notifications/'+data.notification_id,
icon='<i class=\'icon-heart\'></i>',
urlText=icon+message;
var notificationRow='<li><a href='+url+'>'+urlText+'</a></li>';
$('#notificationsDropdownList').prepend(notificationRow);
if(notificationCircleCount==0){
notificationCircleCount++;
$notificationCircle.show();
$notificationCircleCount.html(notificationCircleCount);
}
else{
notificationCircleCount++;
$notificationCircleCount.html(notificationCircleCount);
}
console.log('Pusher happened'+data.message);
} //function
); //myChannel
</script>
