（通用 Socket.io、push-notification）教你实现 web 网站实时推送系统消息到“电脑任务通知栏”

最新推荐文章于 2024-09-03 09:42:12 发布
最新推荐文章于 2024-09-03 09:42:12 发布
阅读量1k 收藏 1
点赞数 3
文章标签： websocket nodejs vue ssl nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaoba11/article/details/106581112
版权

消息通知是 web 网站的一个基本常规功能。web 网站消息管理模块一般都是用户主动请求消息通知，即使采用 socket 技术，也仅仅只是在用户浏览当前系统网站时，才能发现系统推送的消息通知，这样很容易造成消息通知不到位，发现不及时。本场 Chat 利用 HTML5 中的 JavaScript Web Notification API 新增功能，它允许 Chrome、Safari、Firefox 和 Edge 等现代浏览器将消息通知推送到用户的桌面，结合 Socket.io 技术，实现网站消息实时推送至“电脑任务通知栏”。预览地址：https://www.ctrlcv.vip （测试方式：开启两个浏览器，chrome 和 edge，分别登录账号： admin 密码 ：123456 和 账号：qwer 密码：qwer 。在 admin 的用户管理中给 qwer 用户推送自定义消息。注意，首次推送，浏览器右上角会出现类似 “显示通知” 的请求，选择允许即可。）

效果图：
在这里插入图片描述
在这里插入图片描述

所用技术栈包括：Node.js + Express + Socket.io + Vue.js + Element-UI + Notification API 等

你会得到什么？

  1. Node.js + Express + Socket.io 实现的消息推送后台服务的中转站源码，利用这套 “中转站” ，可结合任何前后端技术，实现系统消息的实时推送。
  2. Vue.js + Element-UI + Notification API 实现客户端实时接收消息和通过浏览器将消息通知到用户桌面并显示在电脑任务通知栏中的核心代码。
  3. 了解消息实时推送的整体流程，包括数据库表结构基本设计。
  4. 了解这套系统部署到服务器生成环境下遇到的坑，及对应解决方案。
  5. 了解 Nginx、 Node.js、IIS 部署 https 的解决方案。

详情请戳！！！

文章已更新

因为跟GitChat有约定，不可将文章放在第三方平台，所以我将源码和文章都放在我的公众号里 “面向 CtrlCV 编程”，回复“message” 即可获得

joba全栈
关注
app推送服务开通到使用
m0_63262511的博客
09-23 1052
S.content=这是通知的内容，你好，这是内容。只是你如果自定义成自己的域名后，会变成你的域名。怕 dcloud 域名长不好记，可以绑定你自己备案过的域名。通过https://${云函数Url化域名}/${path}直接访问函数，其中${path}是配置的函数触发路径或其子路径。选择什么云，和你在 dcloud 后台创建关联的云一样就可以了。简单吧，自定义的域名短呀短，好记呀好记。页面，点击页面底下的。
IOS 推送(本地推送、远程推送、三方推送[极光推送])
kenshin的专栏
12-16 3340
1.本地推送 关于本地推送的作用及意义：【后期完善】 实现步骤 大致4步：1创建通知、2注册通知、3实现函数、4删除通知 注意！ 下面的内容中没有提到：在使用通知的时候，为了避免重复注册：最好在生命周期的函数中进行 注册 和 删除通知 如下： //注册通知 - (void)viewWillAppear:(BOOL)animated {     、、、、、 }
web消息通知
06-27
WebNotification实现B端消息弹出提醒，运行案例请注意：1.文件请放在服务端；2.请采用谷歌浏览器通过http访问；3.不用谢我，因为你付分了，嘎嘎！
PHP Web实时消息后台服务器推送技术--GoEasy
xiaoxiaoxiqincai2的博客
09-19 713
PHP Web实时消息后台服务器推送技术 越来越多的项目需要用到实时消息的推送与接收，怎样用PHP实现最方便呢？我这里推荐大家使用 PHP Web实时消息后台服务器推送技术 ---GoEasy, 它是一款第三方推送服务平台，使用它的API可以轻松搞定实时推送！ 浏览器兼容性：GoEasy推送 支持websocket 和polling两种连接方式，从而可以支持IE6及其以上的所有版本，同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等。 支持不同的开发语言： GoEas
开源项目 WebPushNotifications 使用教程
最新发布
gitblog_00786的博客
09-03 268
开源项目 WebPushNotifications 使用教程 WebPushNotificationsExample website using Web Push Notifications with Realtime Pub/Sub Messaging service and Firebase Cloud Messaging项目地址:https://gitcode.com/gh_mirrors...
Socket.io+Notification实现浏览器消息推送
weixin_33816821的博客
02-21 243
前言 socket.io: 包含对websocket的封装，可实现服务端和客户端之前的通信。详情见官网(虽然是英文文档，但还是通俗易懂)。Notification: Html5新特性，用于浏览器的桌面通知，只有部分浏览器支持。通过nodejs+Socket.io+Notification实现服务端往浏览器客户端发送自定义消息。若有问题可加...
HTML5 Web Notifications（网页通知）
WWF_HelloWorld
09-12 2024
概述 优点： 缺点： references：MDN 使用 Web Notifications
Web Notification桌面推送消息
我乃小神神的博客
04-27 380
有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app，如果下载不了它，也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现，一些问题已经得到了解决。
ym——Andorid-15k+的面试题。
热门推荐
陈宇明
08-07 2万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
高仿微信5.2.1主界面及消息提醒
03-05
开发者需要实现本地推送通知，当有新消息时，即使应用在后台也能向用户展示提醒。 - iOS使用Apple Push Notification Service (APNS)，Android使用Firebase Cloud Messaging (FCM)来实现远程推送服务。 - 消息提醒...
javaScript开源大全
banran9851的博客
04-26 5985
javascript开源大全 转自：http://www.cnblogs.com/yiliweichinasoft/p/3819699.html javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服...
web系统消息实时推送
12-16
针对于web BS系统页面实时提醒操作，每次都得发送请求访问数据库，浪费资源，故提供后台服务向前端推送
实现Web页面新消息实时提醒
liang0000zai的专栏
11-24 2万+
1.ajax方式   转载地址：
转，Comet4J
u011119684的博客
11-27 272
---------------------  作者：Dai_Haijiao  来源：CSDN  原文：https://blog.csdn.net/Dai_Haijiao/article/details/80498979  版权声明：本文为博主原创文章，转载请附上博文链接！ ---------------------  一、简介：         Comet4J(Comet for Java)...
socket接收的消息怎么更新到页面_OPPO手机微信接收到新消息没有提示音怎么办？...
weixin_39912163的博客
12-05 163
我的 OPPO 手机微信每次接收到新信息时都没有提示音，所以经常错过了一些重要信息，这到底是怎么回事呢？经过一番折腾才知道原因，一是微信新消息提醒中没有打开声音功能，二是手机设置中的通知管理没有开放通知铃声功能给微信。下面 boke112 跟大家说一下如何解决微信接收到新消息有提示音的问题。打开微信新消息提醒中的声音功能步骤打开手机微信 >> 点击右下角的“我”>&gt...
Android NotificationCompat通知消息和socket通知
baishi_zjs的博客
08-27 508
NotificationCompat.Builder builder = new NotificationCompat.Builder(this); builder.setSmallIcon(R.mipmap.ic_launcher); //设置小图标builder1.setContentTitle( "你有一条消息" );builder.setContentText("有工资发了 赶紧的啊！
关于JavaWeb如何实现用户注册 后台即时提醒（类似站内信功能）
liian_q的专栏
02-04 1万+
实现思路 在用户注册的时候，把需要传递到后台的消息存到数据库专门存放这一类消息的表，在前台写ajax定时刷新获取表里数据，当用户点击消息则把该消息删除（即已读）。 具体实现代码
PushNotification消息推送逻辑
shancheli的博客
06-28 1132
/**  *  个推SDK 如果在线，那么消息不会走APNS渠道，而是通过SDK直接传到前端，这种方式就是透传。  */ /**  *  1.APP没有运行的时候，收到推送，不管是点击图标还是点击推送消息，程序启动都只会调用 didFinishLaunchingWithOptions 方法  *  2.APP在后台的时候，收到推送消息，点击图标 则调用 didFin
Android Push Notification实现信息推送使用
mickey_houzi的专栏
05-06 544
Android Push Notification实现信息推送使用 http://www.189works.com/article-54321-1.html
php socket laravel,Laravel整合PHPSocket.Io实现web消息推送
05-13
要在 Laravel 中整合 PHPSocket.io 实现 web 消息推送，你需要遵循以下步骤： 1. 安装 PHPSocket.io 你可以使用 Composer 包管理器安装 PHPSocket.io。在终端中，导航到 Laravel 项目目录并运行以下命令： ``` composer require elephant-io/elephant.io ``` 2. 配置 PHPSocket.io 在 Laravel 项目中，你需要在 `config/app.php` 文件中添加以下行： ```php 'aliases' => [ // ... 'ElephantIO' => 'ElephantIO\Engine\SocketIO\Version1X', ], ``` 3. 创建 PHPSocket.io 服务提供者 在 Laravel 项目中，你需要创建 PHPSocket.io 服务提供者。运行以下命令来创建： ``` php artisan make:provider SocketIoServiceProvider ``` 在 `SocketIoServiceProvider` 类中，你需要添加以下内容： ```php use ElephantIO\Client; use ElephantIO\Engine\SocketIO\Version1X; public function register() { $this->app->singleton(Client::class, function ($app) { $client = new Client(new Version1X('http://localhost:3000')); return $client; }); } ``` 此代码将在 Laravel 应用程序中注册 `Client` 类的单例实例。 4. 创建推送事件 在 Laravel 项目中，你需要创建推送事件。运行以下命令来创建： ``` php artisan make:event PushNotification ``` 在 `PushNotification` 类中，你需要添加以下内容： ```php public $message; public function __construct($message) { $this->message = $message; } public function broadcastOn() { return new PrivateChannel('push-notification'); } ``` 此代码将创建一个名为 `PushNotification` 的事件类，并在构造函数中接受要推送的消息。`broadcastOn` 方法指定了事件应该广播到的频道。 5. 创建事件监听器 在 Laravel 项目中，你需要创建事件监听器。运行以下命令来创建： ``` php artisan make:listener PushNotificationListener ``` 在 `PushNotificationListener` 类中，你需要添加以下内容： ```php use ElephantIO\Client; protected $socket; public function __construct(Client $socket) { $this->socket = $socket; } public function handle(PushNotification $event) { $this->socket->initialize(); $this->socket->emit('push-notification', ['message' => $event->message]); $this->socket->close(); } ``` 此代码将创建一个名为 `PushNotificationListener` 的事件监听器，并在构造函数中注入 `Client` 实例。`handle` 方法将使用 `Client` 类向 Socket.io 服务器发送消息。 6. 注册事件和监听器 在 Laravel 项目中，你需要在 `EventServiceProvider` 类中注册事件和监听器。在 `EventServiceProvider` 类中，你需要添加以下内容： ```php protected $listen = [ PushNotification::class => [ PushNotificationListener::class, ], ]; ``` 此代码将注册 `PushNotification` 事件和 `PushNotificationListener` 监听器。 7. 发送推送消息 在 Laravel 项目中，你可以使用以下代码发送推送消息： ```php event(new PushNotification('Hello world!')); ``` 这将触发 `PushNotification` 事件，并将消息发送到 Socket.io 服务器。然后，`PushNotificationListener` 监听器将从 Socket.io 服务器接收到消息并发送到连接到服务器的所有客户端。 以上是整合 PHPSocket.io 实现 web 消息推送的步骤。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

joba全栈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值