Node构建静态资源服务器 (nodejs静态资源服务器)
在前端工作中，静态资源的管理和部署是一个重要的问题。为了让静态资源能够快速地被用户访问并且保证安全性，我们需要构建一个高效的静态资源服务器。本文将介绍如何使用Node构建一个静态资源服务器，并在其中应用一些更佳实践。
1. 创建项目和安装依赖
我们需要在本地创建一个Node项目。在命令行中输入以下命令即可：
“`
mkdir static-server
cd static-server
npm init -y
“`
完成上述步骤后，我们需要安装一些依赖。在本例中，我们需要使用`express`和`morgan`这两个库（详情可参考官方文档）。
命令行中输入以下命令：
“`
npm install express morgan –save
“`
2. 构建服务器
接下来，我们需要在项目中创建一个服务器。
在项目目录中创建`server.js`文件，并在文件中编写如下代码：
“`javascript
const express = require(‘express’);
const morgan = require(‘morgan’);
const path = require(‘path’);
const app = express();
const PORT = process.env.PORT || 3000;
app.use(morgan(‘combined’));
app.use(express.static(path.join(__dirname, ‘public’)));
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
“`
上述代码中，我们导入了所需的依赖：`express`、`morgan`和`path`。然后，根据约定，我们将构建的服务器端口设置为3000（如果环境变量存在，则使用环境变量端口）。接下来，我们使用`express`中间件`morgan`来记录服务器的请求日志。我们使用静态文件中间件`express.static`来指定我们的静态文件服务。
在上述代码中，`express.static`方法的参数`path.join(__dirname, ‘public’)`用于指定静态文件夹的路径。这里，我们将静态文件放在`public`文件夹中。如果你的静态文件放在不同的文件夹中，请修改此处的路径。
3. 运行服务器
完成上述步骤后，我们就可以运行服务器了。在命令行中输入以下命令：
“`
node server.js
“`
如果一切正常，您将在命令行中看到一个消息：`Server listening on port 3000`。此时，访问`http://localhost:3000/`即可访问您的静态文件。
4. 更改访问路径
在默认的情况下，访问静态文件的路径是`http://localhost:3000/your-file.html`。这种路径并不美观，也不符合我们的需求。为了改变访问路径，我们需要修改`server.js`文件，添加如下代码：
“`javascript
app.get(‘/static/*’, (req, res) => {
const filePath = req.path.replace(‘/static’, ”);
res.sendFile(path.join(__dirname, ‘public’, filePath));
});
“`
上述代码中，我们使用`app.get`方法来指定了访问静态资源的路径。我们将路径前缀为`/static`的请求重定向到静态文件目录中。这将使我们的资源访问路径更为美观和规范。
5. 应用更佳实践
为了让我们的静态资源服务器更加安全和高效，我们需要应用一些更佳实践：
– 设置HTTP头安全性 – 我们可以使用`helmet`库来设置HTTP头信息。
– gzip压缩文件 – 我们可以使用`compression`库来进行gzip压缩。
– CDN加速静态文件 – 我们可以使用CDN来加速我们的静态文件访问。
这些更佳实践详细信息可参考官方文档。
本文介绍了如何使用Node构建一个静态资源服务器，并应用了一些更佳实践，以提升服务器的性能和安全性。通过学习本文，您已经能够快速地构建自己的静态资源服务器，为您的网站和应用程序提供高效的静态资源服务。
相关问题拓展阅读：
怎么连接nodejs服务器
前面已经学习掘源了WebSocket API，包括事件、方法和属性。详情：WebSocket(二)–API WebSocket是基于事件驱动，支持全双工通信。下面通过三个简单例子体验一下。
简单开始
1.安装node。/
2.安装ws模块
ws：是nodejs的一个WebSocket库，可以用来创建服务。
3.server.js
在项目里面新建一个server.js，创建服务，指定8181端口，将收到的消息log出来。
var WebSocketServer = require(‘ws’).Server,
wss = new WebSocketServer({ port: 8181 });
wss.on(‘connection’, function (ws) {
console.log(‘client connected’);
ws.on(‘message’, function (message) {
console.log(message);
});
});
4.建立一个client.html。
在页面上建立一个判镇态WebSocket的连接。用send方法发送消息。
var ws = new WebSocket(“
ws.onopen = function (e) {
console.log(‘Connection to server opened’);
} function sendMessage() {
ws.send($(‘#message’).val());
}
页面：
View Code
运行之后如下，服务端即时获得客户端的消息。
模拟股票
上面的例子很简单，只是为了演示如何运用nodejs的ws创建一个WebSocket服务器。且可以接受客户端的消息。那么下面这个例子演示股票的实时更新。客服端只需要连接一次，服务器端会不断地发送新数据，客户端收数据后更新UI.页面如下，有五只股票，开始和停止按钮测试连接和关闭。
服务端：
1.模拟五只股票的涨跌。
var stocks = { “AAPL”: 95.0, “MSFT”: 50.0, “AMZN”: 300.0, “GOOG”: 550.0, “YHOO”: 35.0}function randomInterval(min, max) { return Math.floor(Math.random() * (max – min + 1) + min);
}var stockUpdater;var randomStockUpdater = function() { for (var symbol in stocks) {if(stocks.hasOwnProperty(symbol)) {var randomizedChange = randomInterval(-150, 150);var floatChange = randomizedChange / 100;
stocks += floatChange;
}
} var randomMSTime = randomInterval(500, 2500);
stockUpdater = setTimeout(function() {
randomStockUpdater();
}, randomMSTime);
}
randomStockUpdater();
2.连接建立之后就开始更新数据
wss.on(‘connection’, function (ws) { var sendStockUpdates = function (ws) {if (ws.readyState == 1) {var stocksObj = {};for (var i = 0; i originalValue) {
valElem.addClass(‘label-success’);
valElem.removeClass(‘label-danger’);
}
}// 处理受到的消息
ws.onmessage = function (e) {var stocksData = ON.parse(e.data);
console.log(stocksData);for (var symbol in stocksData) { if (stocksData.hasOwnProperty(symbol)) {
changeStockEntry(symbol, stocks, stocksData);
stocks = stocksData;
}
}
};
}
updataUI();
运行效果如下：只需要请求一次，数据就会不断的更新，效果是不是很赞，不用轮询，也不用长连接那么麻烦了。文章末尾会附上所有源码。
（美股的涨跌和A股的颜色是反的，即红跌绿涨）
实时聊天
上面的例子是连接建立之后，服务端不断给客户端发送数据。接下来例子是一个简单的聊天室类的例子。可以建立多个连接。
1.安装node-uuid模块，用来给每个连接一个唯一号。
2.服务端消息发送
消息类型分notification和message两种，前者是提示信息，后者是聊天内容。消息还包含一个id、昵称和消息内容。在上一节有学习到readyState有四个值，OPEN表示连接建立可以发送消息。如果页面关闭了，为WebSocket.CLOSE。
function wsSend(type, client_uuid, nickname, message) { for (var i = 0; i = 2) { var old_nickname = nickname;
nickname = nickname_array; var nickname_message = “Client ” + old_nickname + ” changed to ” + nickname; wsSend(“nick_update”, client_uuid, nickname, nickname_message);
}
} else {
wsSend(“message”, client_uuid, nickname, message);
}
});
处理连接关闭：
var closeSocket = function(customMessage) {for (var i = 0; i *”;
} else if (type == ‘nick_update’) {
preface_label = “*”;
} else {
preface_label = “”
+ nickname + “”;
}var message_text = “
” + preface_label + ” “
+ message + “
“;
messageElem.innerHTML = message_text;
messages.appendChild(messageElem);
}//收到消息处理
ws.onmessage = function (e) {var data = ON.parse(e.data);
nickname = data.nickname;
appendLog(data.type, data.nickname, data.message);
console.log(“ID: = %s”, data.id, data.message);
}
ws.onclose = function (e) {
appendLog(“Connection closed”);
console.log(“Connection closed”);
}//发送消息
function sendMessage() {var messageField = document.getElementById(‘message’);if (ws.readyState === WebSocket.OPEN) {
ws.send(messageField.value);
}
messageField.value = ”;
messageField.focus();
}//修改名称
function changName() {var name = $(“#name”).val();if (ws.readyState === WebSocket.OPEN) {
ws.send(“/nick ” + name);
}
}
运行结果：
页面关闭之后，连接马上断开。
这种实时响应的体验简直不能太爽，代码也清爽了，前端体验也更好，客户端不用一直发请求，服务端不用等着被轮询。
小结：上面例子的代码都很好理解，接下来学习WebSocket协议。
