Node.js初体验：在html页面中设置秒级实时更新的通知栏

前言

近期需要在之前的HTML网页上增加一个能够实时动态更新的通知栏，用于在用户访问时能够接收到最新的网站维护人员的通知消息，并且实时更新。
本来希望能用简单的方式，即设置自动无缓存刷新，即每次打开页面都可以不加载缓存重新加载，但是在标签中设置了下列代码后似乎并没有办法实现，感觉是由于浏览器的影响，强制了加载缓存？

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

于是又设置了页面自行刷新，例如每20秒进行刷新。但是这样需要在发送通知时，修改站点的HTML文件，实时不太方便。于是经过查询学习，下面使用Node.js来进行一个示例。

首先安装node.js框架，这里我使用的ubuntu系统

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash
sudo apt-get install -y nodejs

随后新建一个node.js项目。这里我直接放在了../html目录下，即nginx服务器的根目录下，可以根据自己需求放置。

#此时在../html下,proj1是我创建的防止nodejs项目的文件夹
mkdir proj1
cd proj1
npm init -y

接下来是安装 Express 和 socket.io

Express是一个简单易用的Web服务器框架，而socket.io可以方便地提供WebSocket支持。

npm install express socket.io

新建一个server.js文件，加入下面这些内容。下面的内容中，1111是该框架运行的端口，public用于放置html/css文件。

vim server.js
#下面是文件内容
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('disconnect', () => console.log('Client disconnected'));
});

const PORT = process.env.PORT || 1111;
server.listen(PORT, () => console.log(`Listening on ${PORT}`));

app.use(express.static('public'));
app.use(express.json());

// This endpoint will be used to send notifications
app.post('/notification', (req, res) => {
  console.log('Received notification:', req.body);  
  let notification = req.body;
  // Broadcast the notification to all connected clients
  io.sockets.emit('notification', notification);
  res.status(200).end();
});

在pubulic的html文件中，在标签内加入

<script src="/socket.io/socket.io.js"></script>
<script>
        var socket = io();
        socket.on('notification', function (notification) {
            // Update the notification box
            
    document.querySelector('#notification').innerText = 
    notification.message;
        });
</script>

监听新的通知

此时已经创建了一个websocket链接，用于监听\”notification\”的消息。
然后还需要再html的代码中加入一个用于展示notification内容的板块，例如可以加入下面这个块

<div id="notification"></div>

之后实时推送更新的信息会在页面中的这个板块展示。
同时为了使public页面能够在访问你的域名是正常访问，不要忘了配置nginx服务器，将1111的端口使用nginx代理到你想要用来访问此public页面的域名。
下面可以通过输入下面的命令来向这个块推送新的消息。

curl -X POST -d \"This is a new notification\" http://0.0.0.0:1111/notification

自动推送

这里站主为了能够保持秒级的推送，使用了一个脚本来实时不停推送通知内容，以保证每一个访问者访问时都能看到当前的通知状态。
下面是脚本,该脚本每2秒推送一次通知。

#!/bin/bash
counter=0
while true; do
    counter=$((counter+1))
    datetime=$(date '+%Y-%m-%d %H:%M:%S')
    message="This is a notification. \n Current time：$datetime"
    curl -X POST -H "Content-Type: application/json" -d "{\"message\":\"$message\"}" http://0.0.0.0:1111/notification
    echo "Executed command $counter times"
    sleep 2
done

脚本设置好以后，站主通过screen在虚拟终端中设置其保持运行。在每次维护服务器时进入虚拟终端临时改编需要推送的内容。

上面就是这个初步学习体验nodejs的一个简单项目。

wslll blog