limin-live-server 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/limin-live-sever.js +70 -0
- package/package.json +16 -0
- package/public/index.html +14 -0
- package/public/script.js +8 -0
- package/public/style.css +3 -0
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
const http = require('http');
|
|
2
|
+
const fs = require('fs');
|
|
3
|
+
const path = require('path');
|
|
4
|
+
const WebSocket = require('ws');
|
|
5
|
+
const chokidar = require('chokidar');
|
|
6
|
+
|
|
7
|
+
const PORT = 8080;
|
|
8
|
+
const WS_PORT = 8081;
|
|
9
|
+
const ROOT = path.resolve(__dirname, './public'); // 监听目录
|
|
10
|
+
|
|
11
|
+
// 1. 启动 WebSocket 服务器
|
|
12
|
+
const wss = new WebSocket.Server({ port: WS_PORT });
|
|
13
|
+
let clients = [];
|
|
14
|
+
|
|
15
|
+
wss.on('connection', (ws) => {
|
|
16
|
+
clients.push(ws);
|
|
17
|
+
ws.on('close', () => {
|
|
18
|
+
clients = clients.filter(c => c !== ws);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// 2. 注入客户端的脚本（用于接收刷新指令）
|
|
23
|
+
const injectScript = `
|
|
24
|
+
<script>
|
|
25
|
+
(function() {
|
|
26
|
+
const socket = new WebSocket('ws://localhost:${WS_PORT}');
|
|
27
|
+
socket.onmessage = (msg) => {
|
|
28
|
+
if (msg.data === 'reload') {
|
|
29
|
+
console.log('检测到文件变化，正在刷新...');
|
|
30
|
+
location.reload();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
console.log('LiveServer 已激活');
|
|
34
|
+
})();
|
|
35
|
+
</script>
|
|
36
|
+
`;
|
|
37
|
+
|
|
38
|
+
// 3. 启动静态文件服务器
|
|
39
|
+
http.createServer((req, res) => {
|
|
40
|
+
let filePath = path.join(ROOT, req.url === '/' ? 'index.html' : req.url);
|
|
41
|
+
const ext = path.extname(filePath);
|
|
42
|
+
|
|
43
|
+
if (fs.existsSync(filePath) && fs.lstatSync(filePath).isFile()) {
|
|
44
|
+
let content = fs.readFileSync(filePath, 'utf8');
|
|
45
|
+
|
|
46
|
+
// 如果是 HTML 文件，注入 WebSocket 脚本
|
|
47
|
+
if (ext === '.html') {
|
|
48
|
+
content = content.replace('</body>', `${injectScript}</body>`);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
res.writeHead(200);
|
|
52
|
+
res.end(content);
|
|
53
|
+
} else {
|
|
54
|
+
res.writeHead(404);
|
|
55
|
+
res.end('File Not Found');
|
|
56
|
+
}
|
|
57
|
+
}).listen(PORT, () => {
|
|
58
|
+
console.log(`服务器运行在: http://localhost:${PORT}`);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// 4. 监听文件变化
|
|
62
|
+
chokidar.watch(ROOT).on('change', (path) => {
|
|
63
|
+
console.log(`文件变化: ${path}`);
|
|
64
|
+
// 通知所有已连接的客户端刷新
|
|
65
|
+
clients.forEach(client => {
|
|
66
|
+
if (client.readyState === WebSocket.OPEN) {
|
|
67
|
+
client.send('reload');
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "limin-live-server",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "LiMin-LiveServer",
|
|
5
|
+
"main": "limin-live-sever.js",
|
|
6
|
+
"author": "LiMin",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"chokidar": "^5.0.0",
|
|
10
|
+
"express": "^5.2.1",
|
|
11
|
+
"ws": "^8.18.3"
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"limin-ols": "node live-sever.js"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>LiMin-LiveServer</title>
|
|
6
|
+
<link rel="stylesheet" href="style.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<h1>我是超级前端大王!!!</h1>
|
|
10
|
+
<p>123</p>
|
|
11
|
+
<button onclick="changeColor()">点击我，改变颜色</button>
|
|
12
|
+
<script src="script.js"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
package/public/script.js
ADDED
package/public/style.css
ADDED