如何使用node js将消息从Web服务器推送到浏览器

2023-12-12

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" >
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});

//Document Click
$(document).click(function()
{
$("#notificationContainer").hide();
});
//Popup Click
$("#notificationContainer").click(function()
{
return false
});

});
</script>
<style>
body{background-color:#dedede;font-family:arial}
#nav{list-style:none;margin: 0px;
padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}
#notification_li{position:relative}
#notificationContainer {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none;
}


#notificationsBody {
padding: 33px 0px 0px 0px !important;
min-height:300px;
}

#notification_count {
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 100px;
border-radius: 9px;
position: absolute;
margin-top: 0px;
font-size: 11px;
}
</style>
</head>

<body >
<div style="margin:0 auto;width:900px; margin-top: 30px;">
<ul id="nav">

<li id="notification_li">
<span id="notification_count">5</span>
<a href="#" id="notificationLink">Notifications</a>
<div id="notificationContainer">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
</div>

</div>
</li>
</ul>

</div>

</body>
</html>

我正在开发一个从服务器获取通知的页面。我只是创建一个按钮和一个小 div 来显示通知编号。我想让该 div 在服务器推送到该 div 时从服务器获取通知。 如何从服务器获取推送通知。我想要用于从服务器接收通知的客户端代码。我只是使用另一个系统,node js 是服务器。

谢谢。


您可以使用 Node.js 来实现它。以下是一个工作代码示例。节点js:index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get("/", function (req, res) {
    res.sendFile("index.html", {root: __dirname});
});
io.on("connection", function (socket) {
    socket.on("notify", function (notification_request) {
        io.emit('notify', JSON.stringify(notification_request));
    });
});
http.listen(3000, function () {
    console.log('listenting on 3000');
});

你之前的前端index.html</body>

<script>
    var socket = io();
    $('button').click(function () { //notify event triggered
        socket.emit('notify', {notification-1: "message1", notification-2: "message2", notification-3: "message3"});
        return false;
    });
    socket.on('notify', function (notification) {
        var notifications = JSON.parse(notification); //process notication array
        $('#notification-div').append(notifications); //display the notification here which is going to be reflected for all clients
    });
</script>

在终端或 CLI 上运行 index.js 文件来激活服务器。并且不要忘记安装以下节点模块

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

如何使用node js将消息从Web服务器推送到浏览器 的相关文章

随机推荐

  • Phonegap 中 Android 的应用程序图标 [重复]

    这个问题在这里已经有答案了 我有一个 HTML5 Javascript 应用程序 并且我使用 PhoneGap 的构建服务为我的 Android 生成 APK 文件 我在我的 Android 上成功安装了 APK 文件 一切都很好 只是手机
  • 所有分区的eekToEnd并在Kafka消费者的自动重新平衡中幸存

    当消费者组 A 的 Kafka 消费者连接到 Kafka 代理时 我想查找所有分区的末尾 即使偏移量存储在代理端 如果有更多额外的消费者连接同一消费者组 他们应该获取最新存储的偏移量 我正在做以下事情 consumer poll timeo
  • 检测到互联网连接时下载数据

    我想在互联网连接可用时下载一些数据 包括 json 和图像 二进制数据 我有一个完整的工作代码可以做到这一点 问题是我已经在自定义应用程序类中编写了该代码 它会下载它并保存在本地 但是当应用程序启动时 互联网连接可能在那时不可用 因此 我想
  • 如何更改 iframe 的方向

    就我而言 我已将另一个组织 是的 我被授权这样做 开发的 html 游戏嵌入到网站中 页面和 HTML 游戏文件位于同一域中 该游戏是为支持 iPad 而开发的 但仅限横向 然而 在 iframe 中 它总是显示 请使用横向方向 的消息 即
  • 从命令行守护程​​序使用 MLMediaLibrary 时出现 XPC 错误

    我正在编写一个命令行守护程 序来从 iPhoto 读取图像 我可以初始化并加载MLMediaLibrary从使用 Xcode 项目创建工具创建的成熟 Cocoa 应用程序中得到的结果很好 但是 当我尝试从命令行工具 也在 Xcode 中创建
  • PHP脚本中的内存泄漏

    我有一个 php 脚本 它运行 mysql 查询 然后循环结果 并在该循环中还运行多个查询 sqlstr SELECT FROM user pred WHERE uprType 2 AND uprTurn turn ORDER BY upr
  • 如何根据动态变量进行匹配?

    是否可以匹配动态变量而不仅仅是文字 在此代码中 第一个match应该和注释掉的一样match number 0 being 0 and number 1 being 1 const NUMBERS i8 2 0 1 fn test let
  • 使用 Python 代替 AppleScript

    我经常使用 Applescript 来完成基本任务 例如打开和关闭程序 有时会更深入一些 例如运行特定 Xcode 程序的单元测试 我正在学习Python 我喜欢它 我还没有找到太多有关 AppleScript 和 Python 的文档 我
  • Hadoop 中的 setJarByClass()

    在 Hadoop 算法的驱动程序方法中的某个时刻 我们将作业链接到设置为 Mapper 和Reducer 的类的引用 例如 job setMapperClass MyMapper class job setReducerClass MyRe
  • 如何将 Python2 中的 all: print "string" 替换为:Python3 中的 print("string")? [复制]

    这个问题在这里已经有答案了 正如标题所说 如何将 Python2 中的 all print string 替换为 Python3 中的 print string I really希望他们使这一功能向后兼容 官方推荐使用 2to3 py 脚本
  • 使用实体框架自引用树的最有效方法

    所以我有一个 SQL 表 基本上是 ID ParentID MenuName Lineage Depth 最后两列是自动计算的 以帮助搜索 因此我们现在可以忽略它们 我正在创建一个具有多个类别的下拉菜单系统 不幸的是 我认为 EF 不能很好
  • 使用 xslt 排序对给定顺序进行排序

    我在用着
  • 从 Firebase 获取一个值并将其更新为当前值 + 1

    所以是的 标题有问题 一些信息 这是我的 Firebase 数据库的样子 这是当前的代码 export function updateQTY barcode database ref items barcode update qty cur
  • 如何检测无符号整数溢出?

    I was writing a program in C to find all solutions of ab c where a b and c together use all the digits 0 9 exactly once
  • 替换 pandas dataframe 列中的前 n 个元素

    我想更换第一个n我的数据框中的一列元素与我保存的另一个 pd series 举个例子 category price store testscore 0 Cleaning 11 42 Walmart NaN 1 Cleaning 23 50
  • R - 给定奥尔森时区的 UTC 到 LOCAL 时间

    我有 1974 2013 年的时间序列数据 其中有一列为 datetimeUTC YYYY MM DD hh mm 0000 一列为 Olson 格式的时区 例如 加拿大 太平洋 加拿大 东部 我可以将整个 UTCdatetime 列转换为
  • ListView WP8 中的增量加载

    我读过有关如何在滚动到列表视图底部时进行增量加载的文章 以及如何在滚动到列表顶部时实现延迟加载的文章 当用户到达顶部时 我想将更多项目添加到列表顶部 我们有什么办法可以实现这一目标吗 为此找到了解决方案 旋转两个控件 对于例如 gt
  • 2个php.ini文件

    我发现 当我在终端上输入以下内容时 php i grep php ini 我得到输出 加载的配置文件是 etc php5 cli php ini 然而 从phpinfo 我看到 加载的ini文件是 etc php5 apache2 php
  • Facebook API 限制

    我正在使用应用程序中的 Facebook Graph 和 FQL API 经过 OAuth 身份验证 我在文档中找不到有关速率限制 节流的任何内容 通常 我期望类 用户有某种限制 查看 Facebook 应用程序页面 Insigths gt
  • 如何使用node js将消息从Web服务器推送到浏览器