【美高梅开户网址】Nodejs学习笔记,来看望机智的前端童鞋怎么防盗

研究前端黑科学技术——通过 png 图的 rgba 值缓存数据

2016/09/12 · JavaScript
· 1 评论 ·
缓存

原稿出处: jrainlau   

谈起前端缓存,超越3/7位想到的无非是多少个正规的方案,比方cookielocalStoragesessionStorage,只怕加上indexedDBwebSQL,以及manifest离线缓存。除却,到底还有未有别的方法能够举办前端的多少缓存呢?那篇小说将会带您共同来研究,怎么着一步一步地经过png图的rgba值来缓存数据的黑科学和技术之旅。

壹.小知识点总计

Node.js
是单进度单线程应用程序,不过经过事件和回调援助并发,所以品质尤其高。
nodejs由以下模块组合:
引进 required 模块:大家能够动用 require 指令来载入 Node.js 模块。
创立服务器:服务器可以监听客户端的乞求,类似于 Apache 、Nginx 等 HTTP
服务器。
接收请求与响应请求 服务器很轻松成立,客户端可以选取浏览器或终点发送 HTTP
请求,服务器收到请求后回来响应数据。

来探视机智的前端童鞋怎么防盗

2016/07/12 · JavaScript
· 4 评论 ·
HTML5

初稿出处: VaJoy   

数不完开拓的童鞋都以寥寥混江湖、夜宿城中村,如若居住的地点安全保卫欠缺,那么出门在外难免顾虑屋里的资产安全。

实质上世面上有许多宏大上的防盗设备,但对中国“氢弹之父”感的前端童鞋来讲,只要有一台附带摄像头的处理器,就能够简轻松单地完成一个防盗监察和控制连串~

纯 JS 的“防盗”本领相当的大程度借助于 H伍 canvas
的力量,且1二分风趣。假设你对 canvas
还不谙习,能够先点这里读书小编的数不尽教程。

step一. 调用录像头

笔者们供给先在浏览器上访问和调用录制头,用来监督屋子里的此举。差别浏览器中调用录制头的
API 都略有出入,在那边大家以 chrome 做示范:

JavaScript

<video width=”640″ height=”480″ autoplay></video>
<script> var video = document.querySelector(‘video’);
navigator.webkitGetUserMedia({ video: true }, success, error); function
success(stream) { video.src = window.webkitURL.createObjectURL(stream);
video.play(); } function error(err) { alert(‘video error: ‘ + err) }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<video width="640" height="480" autoplay></video>
 
<script>
    var video = document.querySelector(‘video’);
 
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert(‘video error: ‘ + err)
    }
</script>

运行页面后,浏览器出于安全性思索,会询问是还是不是允许当前页面访问你的录制头设备,点击“允许”后便能一向在
<video> 上观看拍戏头捕获到的镜头了:

美高梅开户网址 1

step2. 捕获 video 帧画面

只但是开着录像头监视房间可不曾其余意义,浏览器不会帮你对监督画面进行解析。所以那边我们胜利动用脚本捕获
video 上的帧画面,用于在后续进展数量解析。

从那里开始大家将在借助 canvas
力量了。在 Canvas入门(五)一文大家介绍过 ctx.drawImage()
方法,通过它能够捕获 video 帧画面并渲染到画布上。

咱俩必要创造二个画布,然后这么写:

JavaScript

<video width=”640″ height=”480″ autoplay></video> <canvas
width=”640″ height=”480″></canvas> <script> var video =
document.querySelector(‘video’); var canvas =
document.querySelector(‘canvas’); // video捕获摄像头画面
navigator.webkitGetUserMedia({ video: true }, success, error); function
success(stream) { video.src = window.webkitU帕杰罗L.createObjectU宝马X5L(stream);
video.play(); } function error(err) { alert(‘video error: ‘ + err) }
//canvas var context = canvas.getContext(‘二d’); setTimeout(function(){
//把当前录像帧内容渲染到画布上 context.drawImage(video, 0, 0, 640, 480);
}, 四千); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
 
<script>
    var video = document.querySelector(‘video’);
    var canvas = document.querySelector(‘canvas’);
 
    // video捕获摄像头画面
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert(‘video error: ‘ + err)
    }
 
    //canvas
    var context = canvas.getContext(‘2d’);
 
    setTimeout(function(){
        //把当前视频帧内容渲染到画布上
        context.drawImage(video, 0, 0, 640, 480);
    }, 5000);
 
</script>

如上代码所示,五秒后把录像帧内容渲染到画布上(下方右图)

美高梅开户网址 2

step三. 对抓获的五个帧画面实施差异混合

在上头大家关系过,要使得地辨认有个别场景,必要对摄像画面进行数量解析。

那便是说要怎么辨识我们的房舍是或不是有人忽然闯入了吗?答案很粗大略 —— 定期地破获
video 画面,然后相比前后两帧内容是或不是存在不小变迁。

我们先简单地写三个定时捕获的点子,并将捕获到的帧数据存起来:

JavaScript

//canvas var context = canvas.getContext(‘二d’); var preFrame, //前壹帧
curFrame; //当前帧 //捕获并保存帧内容 function captureAndSaveFrame(){
console.log(context); preFrame = curFrame; context.drawImage(video, 0,
0, 640, 480); curFrame = canvas.toDataULX570L; //转为base6肆并保存 }
//定期捕获 function timer(delta){ setTimeout(function(){
captureAndSaveFrame(); timer(delta) }, delta || 500); } timer();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    //canvas
    var context = canvas.getContext(‘2d’);
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){ console.log(context);
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL;  //转为base64并保存
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            timer(delta)
        }, delta || 500);
    }
 
    timer();

如上代码所示,画布会每隔500阿秒捕获并渲染二遍 video
的帧内容(夭寿哇,做完那几个动作不小心把饼干洒了壹地。。。\(“▔□▔)/)

美高梅开户网址 3

留神那里大家使用了 canvas.toDataURL 方法来保存帧画面。

接着正是数据解析管理了,大家得以经过对照前后捕获的帧画面来判定录像头是还是不是监察和控制到变化,那么如何做啊?

熟谙设计的同窗确定经常使用1个图层成效 —— 混合形式:

美高梅开户网址 4

当有三个图层时,对顶层图层设置“差值/Difference”的参差不齐形式,能够一目精通地看到三个图层的异样:

美高梅开户网址 5

“图A”是自个儿2018年在商号楼下拍的照片,然后作者把它有点调亮了一丝丝,并在上头画了三个X 和 O
得到“图B”。接着笔者把它们以“差值”情势混合在联合,得到了最右的那张图。

JavaScript

“差值”格局原理:要掺杂图层双方的福特ExplorerGB值中每一个值分别张开相比,用高值减去低值作为合成后的颜料,平日用深藕红图层合成一图像时,能够收获负片效果的反相图像。用花青的话不发出任何改动(深湖蓝亮度最低,下层颜色减去最小颜色值0,结果和原来一样),而用烟灰会获得反相效果(下层颜色被减去,获得补值),其余颜色则根据它们的亮度水平

1
“差值”模式原理:要混合图层双方的RGB值中每个值分别进行比较,用高值减去低值作为合成后的颜色,通常用白色图层合成一图像时,可以得到负片效果的反相图像。用黑色的话不发生任何变化(黑色亮度最低,下层颜色减去最小颜色值0,结果和原来一样),而用白色会得到反相效果(下层颜色被减去,得到补值),其它颜色则基于它们的亮度水平

在CSS3中,已经有 blend-mode
脾气来支撑那么些妙不可言的混杂格局,可是大家开掘,在主流浏览器上,canvas
的 globalCompositeOperation 接口也1度完美援助了图像混合情势:

于是咱们再建多一个画布来呈现前后两帧差距:

JavaScript

<video width=”640″ height=”480″ autoplay></video> <canvas
width=”640″ height=”480″></canvas> <canvas width=”640″
height=”480″></canvas> <script> var video =
document.querySelector(‘video’); var canvas =
document.querySelectorAll(‘canvas’)[0]; var canvasForDiff =
document.querySelectorAll(‘canvas’)[1]; // video捕获录制头画面
navigator.webkitGetUserMedia({ video: true }, success, error); function
success(stream) { video.src = window.U奥德赛L.createObjectU安德拉L(stream);
video.play(); } function error(err) { alert(‘video error: ‘ + err) }
//canvas var context = canvas.getContext(‘二d’), diffCtx =
canvasForDiff.getContext(‘二d’); //将第三个画布混合格局设为“差别”
diffCtx.globalCompositeOperation = ‘difference’; var preFrame, //前一帧
curFrame; //当前帧 //捕获并保存帧内容 function captureAndSaveFrame(){
preFrame = curFrame; context.drawImage(video, 0, 0, 640, 480); curFrame
= canvas.toDataUGL450L(); //转为base6肆并保存 } //绘制base6四图像到画布上
function drawImg(src, ctx){ ctx = ctx || diffCtx; var img = new Image();
img.src = src; ctx.drawImage(img, 0, 0, 640, 480); } //渲染前后两帧差距function renderDiff(){ if(!preFrame || !curFrame) return;
diffCtx.clearRect(0, 0, 640, 480); drawImg(preFrame); drawImg(curFrame);
} //定期捕获 function timer(delta){ setTimeout(function(){
captureAndSaveFrame(); renderDiff(); timer(delta) }, delta || 500); }
timer(); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
<canvas width="640" height="480"></canvas>
 
<script>
    var video = document.querySelector(‘video’);
    var canvas = document.querySelectorAll(‘canvas’)[0];
    var canvasForDiff = document.querySelectorAll(‘canvas’)[1];
 
    // video捕获摄像头画面
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);
 
    function success(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }
 
    function error(err) {
        alert(‘video error: ‘ + err)
    }
 
    //canvas
    var context = canvas.getContext(‘2d’),
        diffCtx = canvasForDiff.getContext(‘2d’);
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = ‘difference’;
 
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }
 
    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }
 
    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return;
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            timer(delta)
        }, delta || 500);
    }
 
    timer();
 
</script>

功能如下(夭寿啊,做完这么些动作笔者又把Coca Cola洒在键盘上了。。。(#--)/

美高梅开户网址 6

能够见见,当前后两帧差距相当小时,第5个画布差不离是黑乎乎的一片,唯有当拍片头捕获到动作了,第多个画布才有拨云见日的高亮内容出现。

故此,大家只必要对第陆个画布渲染后的图像实行像素分析——推断其高亮阈值是还是不是达到规定的标准某个钦命预期:

JavaScript

var context = canvas.getContext(‘贰d’), diffCtx =
canvasForDiff.getContext(‘二d’); //将第二个画布混合情势设为“差距”
diffCtx.globalCompositeOperation = ‘difference’; var preFrame, //前一帧
curFrame; //当前帧 var diffFrame; //存放差别帧的imageData
//捕获并保存帧内容 function captureAndSaveFrame(){ preFrame = curFrame;
context.drawImage(video, 0, 0, 640, 480); curFrame = canvas.toDataU奇骏L();
//转为base6四并保存 } //绘制base64图像到画布上 function drawImg(src,
ctx){ ctx = ctx || diffCtx; var img = new Image(); img.src = src;
ctx.drawImage(img, 0, 0, 640, 480); } //渲染前后两帧差别 function
renderDiff(){ if(!preFrame || !curFrame) return; diffCtx.clearRect(0, 0,
640, 480); drawImg(preFrame); drawImg(curFrame); diffFrame =
diffCtx.getImageData( 0, 0, 640, 480 ); //捕获差距帧的imageData对象 }
//总计差别 function calcDiff(){ if(!diffFrame) return 0; var cache =
arguments.callee, count = 0; cache.total = cache.total || 0;
//整个画布都是雾灰时有所像素的值的总的数量 for (var i = 0, l =
diffFrame.width * diffFrame.height * 4; i < l; i += 4) { count +=
diffFrame.data[i] + diffFrame.data[i + 1] + diffFrame.data[i + 2];
if(!cache.isLoopEver){ //只需在首先次循环里推行 cache.total += 25伍 * 三;
//单个反革命像素值 } } cache.isLoop伊夫r = true; count *= 3; //亮度放大
//重临“差距画布高亮部分像素总值”占“画布全亮意况像素总值”的比例 return
Number(count/cache.total).toFixed(贰); } //按时捕获 function
timer(delta){ set提姆eout(function(){ captureAndSaveFrame();
renderDiff(); setTimeout(function(){ console.log(calcDiff()); }, 10);
timer(delta) }, delta || 500); } timer();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
    var context = canvas.getContext(‘2d’),
        diffCtx = canvasForDiff.getContext(‘2d’);
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = ‘difference’;
 
    var preFrame,   //前一帧
        curFrame;   //当前帧
 
    var diffFrame;  //存放差异帧的imageData
 
    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }
 
    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }
 
    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return;
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
        diffFrame = diffCtx.getImageData( 0, 0, 640, 480 );  //捕获差异帧的imageData对象
    }
 
    //计算差异
    function calcDiff(){
        if(!diffFrame) return 0;
        var cache = arguments.callee,
            count = 0;
        cache.total = cache.total || 0; //整个画布都是白色时所有像素的值的总和
        for (var i = 0, l = diffFrame.width * diffFrame.height * 4; i < l; i += 4) {
            count += diffFrame.data[i] + diffFrame.data[i + 1] + diffFrame.data[i + 2];
            if(!cache.isLoopEver){  //只需在第一次循环里执行
                cache.total += 255 * 3;   //单个白色像素值
            }
        }
        cache.isLoopEver = true;
        count *= 3;  //亮度放大
        //返回“差异画布高亮部分像素总值”占“画布全亮情况像素总值”的比例
        return Number(count/cache.total).toFixed(2);
    }
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            setTimeout(function(){
                console.log(calcDiff());
            }, 10);
 
            timer(delta)
        }, delta || 500);
    }
 
    timer();

留神那里大家选择了 count *= 三来推广差距高亮像素的亮度值,不然得出的数值实在太小了。大家运营下页面(图片相当的大加载会有点慢)

美高梅开户网址 7

经过试(xia)验(bai),个人感觉如若 calcDiff() 再次来到的比值假诺当先0.20,那么就可以定性为“壹间空屋子,突然有人闯进来”的气象了。

step四. 上报相当图片

当上述的计量开掘有气象时,供给有某种路子文告大家。有钱有精力的话能够安插个邮件服务器,直接发邮件以致短信通告到和煦,but
本文走的吃吐少年路径,就不搞的那么高档了。

那就是说要怎么轻便地落成丰硕图片的申报呢?小编权且想到的是 ——
直接把难题图片发送到有些站点中去。

此地大家选取腾讯网的“日记”作用,它可以任性上传相关内容。

JavaScript

【美高梅开户网址】Nodejs学习笔记,来看望机智的前端童鞋怎么防盗。p.s.,其实这里原来是想直接把图片传遍新浪相册上的,可惜POST请求的图形实体必要走
file 格式,即不能够透过脚本改换文件的 input[type=file],转 Blob
再上传也没用,只能作罢。

1
p.s.,其实这里原本是想直接把图片传到博客园相册上的,可惜POST请求的图片实体要求走 file 格式,即无法通过脚本更改文件的 input[type=file],转 Blob 再上传也没用,只好作罢。

咱俩在保管后台创设日记时,通过 Fiddler 抓包能够观望其请求参数万分简单:

美高梅开户网址 8

因而能够平素协会贰个呼吁:

JavaScript

//至极图片上传处理 function submit(){ //ajax 提交form $.ajax({ url :
”, type : “POST”, data : {
‘__VIEWSTATE’: ”, ‘__VIEWSTATEGENERATOR’: ‘4773056F’,
‘Editor$Edit$txbTitle’: ‘告警’ + Date.now(), ‘Editor$Edit$EditorBody’:
‘<img src=”‘ + curFrame + ‘” />’, ‘Editor$Edit$lkbPost’: ‘保存’ },
success: function(){ console.log(‘submit done’) } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    //异常图片上传处理
    function submit(){
 
        //ajax 提交form
        $.ajax({
            url : ‘http://i.cnblogs.com/EditDiary.aspx?opt=1’,
            type : "POST",
            data : {
                ‘__VIEWSTATE’: ”,
                ‘__VIEWSTATEGENERATOR’: ‘4773056F’,
                ‘Editor$Edit$txbTitle’: ‘告警’ + Date.now(),
                ‘Editor$Edit$EditorBody’: ‘<img src="’ + curFrame + ‘" />’,
                ‘Editor$Edit$lkbPost’: ‘保存’
            },
            success: function(){
                console.log(‘submit done’)
            }
        });
    }

本来假若请求页面跟新浪域名差别,是无力回天发送 cookie
导致请求跨域而失效,不过那一个很好化解,直接修改 host
就能够(怎么修改就不介绍了,自行百度吗)

本人那边改完 host,通过 
的地方访问页面,开掘录制头竟然失效了~

通过谷歌(谷歌)的文档能够摸清,那是为了安全性思量,非
HTTPS 的服务端请求都无法联网摄像头。然而消除办法也是部分,以 window
系统为例,张开 cmd 命令行面板并固定到 chrome 安装文件夹下,然后实行:

ZSH

chrome
–unsafely-treat-insecure-origin-as-secure=””
–user-data-dir=C:\testprofile

1
chrome –unsafely-treat-insecure-origin-as-secure="http://i.cnblogs.com/h5monitor/final.html"  –user-data-dir=C:\testprofile

行动将以沙箱格局张开3个单身的 chrome
进度,并对点名的站点去掉安全限制。注意大家在新开的 chrome
中得重新登6腾讯网。

这会儿便能健康访问摄像头了,大家对代码做下拍卖,当差别检查评定开掘非常时,成立一份日记,最小间隔时间为5秒(可是后来意识没须要,因为新浪已经有做了时限,差不离十秒后才干发表新的日记)

JavaScript

//定期捕获 function timer(delta){ setTimeout(function(){
captureAndSaveFrame(); renderDiff(); if(calcDiff() > 0.二){
//监察和控制到格外,发日志 submit() } timer(delta) }, delta || 500); }
setTimeout(timer, 四千0 * 十); //设定打开页面10分钟后才起来监察和控制//格外图片上传管理 function submit(){ var cache = arguments.callee, now
= Date.now(); if(cache.reqTime && (now – cache.req提姆e < 4000))
return; //日记创设最小间隔为伍秒 cache.reqTime = now; //ajax 提交form
$.ajax({ url : ”, type :
“POST”, timeout : 5000, data : { ‘__VIEWSTATE’: ”,
‘__VIEWSTATEGENERATOR’: ‘4773056F’, ‘Editor$Edit$txbTitle’: ‘告警’ +
Date.now(), ‘Editor$Edit$EditorBody’: ‘<img src=”‘ + curFrame + ‘”
/>’, ‘Editor$Edit$lkbPost’: ‘保存’ }, success: function(){
console.log(‘submit done’) }, error: function(err){ cache.reqTime = 0;
console.log(‘error: ‘ + err) } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            if(calcDiff() > 0.2){  //监控到异常,发日志
                submit()
            }
 
            timer(delta)
        }, delta || 500);
    }
 
    setTimeout(timer, 60000 * 10);  //设定打开页面十分钟后才开始监控
 
 
    //异常图片上传处理
    function submit(){
        var cache = arguments.callee,
            now = Date.now();
        if(cache.reqTime && (now – cache.reqTime < 5000)) return;  //日记创建最小间隔为5秒
 
        cache.reqTime = now;
 
        //ajax 提交form
        $.ajax({
            url : ‘http://i.cnblogs.com/EditDiary.aspx?opt=1’,
            type : "POST",
            timeout : 5000,
            data : {
                ‘__VIEWSTATE’: ”,
                ‘__VIEWSTATEGENERATOR’: ‘4773056F’,
                ‘Editor$Edit$txbTitle’: ‘告警’ + Date.now(),
                ‘Editor$Edit$EditorBody’: ‘<img src="’ + curFrame + ‘" />’,
                ‘Editor$Edit$lkbPost’: ‘保存’
            },
            success: function(){
                console.log(‘submit done’)
            },
            error: function(err){
                cache.reqTime = 0;
                console.log(‘error: ‘ + err)
            }
        });
    }

施行成效:

美高梅开户网址 9

日记也是妥妥的出来了:

美高梅开户网址 10

点开就能收看这么些的那张图片了:

美高梅开户网址 11

要留意的是,新浪对日记公布数量是有做每一天额度限制来防刷的,达到限额的话会变成当天的随笔和作品也无力回天发布,所以得小心使用:

美高梅开户网址 12

不过那种情势仅能申报分外图片,权且不可能让大家立马收悉告警,有意思味的童鞋能够试着再写个
chrome 插件,按期去拉取日记列表做判定,假使有新添日记则触发页面 alert。

其余大家自然期待能直接对闯入者举行警戒,那块相比较好办 ——
搞个警示的韵律,在相当的时候接触播放即可:

JavaScript

//播放音频 function fireAlarm(){ audio.play() } //按时捕获 function
timer(delta){ setTimeout(function(){ captureAndSaveFrame(); if(preFrame
&& curFrame){ renderDiff(); if(calcDiff() > 0.二){ //监察和控制到尤其//发日记 submit(); //播放音频告警 fireAlarm(); } } timer(delta) }, delta
|| 500); } setTimeout(timer, 四千0 * 10);
//设定展开页面10分钟后才初始监察和控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    //播放音频
    function fireAlarm(){
        audio.play()
    }
 
 
    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            if(preFrame && curFrame){
                renderDiff();
                if(calcDiff() > 0.2){  //监控到异常
                    //发日记
                    submit();
                    //播放音频告警
                    fireAlarm();
                }
            }
            timer(delta)
        }, delta || 500);
    }
 
    setTimeout(timer, 60000 * 10);  //设定打开页面十分钟后才开始监控

终极说一下,本文代码均挂在我的github上,有意思味的童鞋能够自助下载。共勉~

1 赞 4 收藏 4
评论

美高梅开户网址 13

原理

咱俩掌握,通过为静态财富设置Cache-ControlExpires响应头,可以迫使浏览器对其进行缓存。浏览器在向后台发起呼吁的时候,会先在作者的缓存里面找,借使缓存里面未有,才会持续向服务器请求那一个静态财富。利用那一点,我们能够把部分亟需被缓存的消息通过那么些静态财富缓存机制来拓展仓库储存。

那就是说大家怎么把新闻写入到静态能源中吗?canvas提供了.getImageData()方法和.createImageData()艺术,可以独家用于读取设置图片的rgba值。所以我们得以接纳那三个API举行信息的读写操作。

接下去看规律图:

美高梅开户网址 14

当静态资源进入缓存,以往的别的对于该图片的请求都会先物色本地缓存,也便是说新闻实际已经以图片的情势被缓存到地方了。

注意,由于rgba值只好是[0,
255]中间的整数,所以本文所议论的艺术仅适用于纯数字组合的数码。

* Xshell 使用open张开一个虚拟机;

始建服务器
先是要引进http模块
var http = require(“http”);
通过
http.createServer() 方法成立服务器
demo:
var http = require(‘http’);http.createServer(function (request,
response) { // 发送 HTTP 底部 // HTTP 状态值: 200 : OK // 内容类型:
text/plain response.writeHead(200, {‘Content-Type’: ‘text/plain’}); //
发送响应数据 “Hello World” response.end(‘Hello
World\n’);}).listen(888捌);// 终端打字与印刷如下消息console.log(‘Server
running at ‘);
写入数据足以选取write()
response.write(“Hello World”);
response.write(” IAM LQ”);
response.write(data.toString());
response.end();

静态服务器

作者们运用node搭建3个简易的静态服务器:

JavaScript

const fs = require(‘fs’) const http = require(‘http’) const url =
require(‘url’) const querystring = require(‘querystring’) const util =
require(‘util’) const server = http.createServer((req, res) => { let
pathname = url.parse(req.url).pathname let realPath = ‘assets’ +
pathname console.log(realPath) if (realPath !== ‘assets/upload’) {
fs.readFile(realPath, “binary”, function(err, file) { if (err) {
res.writeHead(500, {‘Content-Type’: ‘text/plain’}) res.end(err) } else {
res.writeHead(200, { ‘Access-Control-Allow-Origin’: ‘*’,
‘Content-Type’: ‘image/png’, ‘ETag’: “666666”, ‘Cache-Control’: ‘public,
max-age=31536000’, ‘Expires’: ‘Mon, 07 Sep 2026 09:32:27 GMT’ })
res.write(file, “binary”) res.end() } }) } else { let post = ”
req.on(‘data’, (chunk) => { post += chunk }) req.on(‘end’, () => {
post = querystring.parse(post) console.log(post.imgData)
res.writeHead(200, { ‘Access-Control-Allow-Origin’: ‘*’ }) let
base64Data = post.imgData.replace(/^data:image\/\w+;base64,/, “”) let
dataBuffer = new Buffer(base64Data, ‘base64’)
fs.writeFile(‘assets/out.png’, dataBuffer, (err) => { if (err) {
res.write(err) res.end() } res.write(‘OK’) res.end() }) }) } })
server.listen(80) console.log(‘Listening on port: 80’)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const fs = require(‘fs’)
const http = require(‘http’)
const url = require(‘url’)
const querystring = require(‘querystring’)
const util = require(‘util’)
 
const server = http.createServer((req, res) => {
  let pathname = url.parse(req.url).pathname
  let realPath = ‘assets’ + pathname
  console.log(realPath)
  if (realPath !== ‘assets/upload’) {
     fs.readFile(realPath, "binary", function(err, file) {
      if (err) {
        res.writeHead(500, {‘Content-Type’: ‘text/plain’})
        res.end(err)
      } else {
        res.writeHead(200, {
          ‘Access-Control-Allow-Origin’: ‘*’,
          ‘Content-Type’: ‘image/png’,
          ‘ETag’: "666666",
          ‘Cache-Control’: ‘public, max-age=31536000’,
          ‘Expires’: ‘Mon, 07 Sep 2026 09:32:27 GMT’
        })
        res.write(file, "binary")
        res.end()
      }
   })
  } else {
    let post = ”
    req.on(‘data’, (chunk) => {
      post += chunk
    })
    req.on(‘end’, () => {
      post = querystring.parse(post)
      console.log(post.imgData)
      res.writeHead(200, {
        ‘Access-Control-Allow-Origin’: ‘*’
      })
      let base64Data = post.imgData.replace(/^data:image\/\w+;base64,/, "")
      let dataBuffer = new Buffer(base64Data, ‘base64’)
      fs.writeFile(‘assets/out.png’, dataBuffer, (err) => {
        if (err) {
          res.write(err)
          res.end()
        }
        res.write(‘OK’)
        res.end()
      })
    })
  }
})
 
server.listen(80)
 
console.log(‘Listening on port: 80’)

本条静态财富的功力很轻易,它提供了三个成效:通过客户端传来的base6肆生成图片并保留到服务器;设置图片的缓存时间并发送到客户端。

关键部分是设置响应头:

JavaScript

res.writeHead(200, { ‘Access-Control-Allow-Origin’: ‘*’,
‘Content-Type’: ‘image/png’, ‘ETag’: “666666”, ‘Cache-Control’: ‘public,
max-age=31536000’, ‘Expires’: ‘Mon, 07 Sep 2026 09:32:27 GMT’ })

1
2
3
4
5
6
7
res.writeHead(200, {
  ‘Access-Control-Allow-Origin’: ‘*’,
  ‘Content-Type’: ‘image/png’,
  ‘ETag’: "666666",
  ‘Cache-Control’: ‘public, max-age=31536000’,
  ‘Expires’: ‘Mon, 07 Sep 2026 09:32:27 GMT’
})

咱俩为这张图纸设置了一年的Content-Type和10年的Expires,理论上充分长了。上面大家来进行客户端的coding。

* linux 中开创三个空荡荡的日记文件用touch命令;

使用package.json
npm init 去创建

客户端

XHTML

<!– client.html –> <canvas id=”canvas” width=”8″,
height=”1″></canvas>

1
2
3
<!– client.html –>
 
<canvas id="canvas" width="8", height="1"></canvas>

设若我们须要仓库储存的是33个人的数码,所以大家为canvas设置宽度为八,高度为一。到底怎么30人数据对应长度为八,是因为每三个像素都有一个rgba,对应着redgreenbluealpha伍个数值,所以须要除以四。

JavaScript

<!– client.js –> let keyString =
‘01234567890123456789012345678901’ let canvas =
document.querySelector(‘#canvas’) let ctx = canvas.getContext(‘2d’) let
imgData = ctx.createImageData(8, 1) for (let i = 0; i <
imgData.data.length; i += 4) { imgData.data[i + 0] =
parseInt(keyString[i]) + 50 imgData.data[i + 1] =
parseInt(keyString[i + 1]) + 100 imgData.data[i + 2] =
parseInt(keyString[i + 2]) + 150 imgData.data[i + 3] =
parseInt(keyString[i + 3]) + 200 } ctx.putImageData(imgData, 0, 0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!– client.js –>
 
let keyString = ‘01234567890123456789012345678901’
        
let canvas = document.querySelector(‘#canvas’)
let ctx = canvas.getContext(‘2d’)
 
let imgData = ctx.createImageData(8, 1)
 
for (let i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i + 0] = parseInt(keyString[i]) + 50
    imgData.data[i + 1] = parseInt(keyString[i + 1]) + 100
    imgData.data[i + 2] = parseInt(keyString[i + 2]) + 150
    imgData.data[i + 3] = parseInt(keyString[i + 3]) + 200
}
 
ctx.putImageData(imgData, 0, 0)

首先大家假诺必要被缓存的字符串为33位的01234567890123456789012345678901,然后大家应用.createImageData(8, 1)变迁三个空荡荡的imgData对象。接下来,大家对那一个空对象开始展览赋值。为了试验效果更直观,大家对rgba值都进展了拓宽。设置完了imgData以后,通过.putImageData()办法把它放入大家的canvas就能够。

我们未来能够打字与印刷一下,看看那么些imgData是什么:

JavaScript

// console.log(imgData.data) [50, 101, 152, 203, 54, 105, 156, 207, 58,
109, 150, 201, 52, 103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203,
54, 105, 156, 207, 58, 109, 150, 201]

1
2
3
// console.log(imgData.data)
 
[50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201, 52, 103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201]

接下去,大家要把那么些canvas编写翻译为一张图纸的base6四并发送给服务器,同时吸收服务器的响应,对图纸展开缓存:

JavaScript

$.post(”, { imgData: canvas.toDataURL() },
(data) => { if (data === ‘OK’) { let img = new Image()
img.crossOrigin = “anonymous” img.src = ”
img.onload = () => { console.log(‘完毕图片请求与缓存’)
ctx.drawImage(img, 0, 0) console.log(ctx.getImageData(0, 0, 捌, 1).data)
} } })

1
2
3
4
5
6
7
8
9
10
11
12
$.post(‘http://xx.xx.xx.xx:80/upload’, { imgData: canvas.toDataURL() }, (data) => {
    if (data === ‘OK’) {
        let img = new Image()
        img.crossOrigin = "anonymous"
        img.src = ‘http://xx.xx.xx.xx:80/out.png’
        img.onload = () => {
            console.log(‘完成图片请求与缓存’)
            ctx.drawImage(img, 0, 0)
            console.log(ctx.getImageData(0, 0, 8, 1).data)
        }
    }
})

代码很轻松,通过.toDataURL()措施把base6肆发送到服务器,服务器管理后生成图片并回到,其图片财富地址为http://xx.xx.xx.xx:80/out.png。在img.onload后,其实图片就已经到位了地点缓存了,大家在这几个事件当中把图纸新闻打字与印刷出来,作为和源数据的相比较。

* http 是nodejs的劳动模块

Node.js REPL交互式解释器
http://www.runoob.com/nodejs/nodejs-repl.html

结果分析

张开服务器,运转客户端,第一回加载的时候经过调控台能够见见响应的图样音讯:

美高梅开户网址 15

200 OK,表明是从服务端获取的图形。

关闭当前页面,重新载入:

美高梅开户网址 16

200 OK (from cache),表明是从本地缓存读取的图样。

接下去直接看rgba值的周旋统1:

源数据: [50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201, 52,
103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203, 54, 105, 156, 207,
58, 109, 150, 201] 缓存数据:[50, 100, 152, 245, 54, 105, 157, 246,
57, 109, 149, 244, 52, 103, 154, 245, 56, 107, 157, 247, 50, 100, 152,
245, 54, 105, 157, 246, 57, 109, 149, 244]

1
2
3
源数据:  [50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201, 52, 103, 154, 205, 56, 107, 158, 209, 50, 101, 152, 203, 54, 105, 156, 207, 58, 109, 150, 201]
 
缓存数据:[50, 100, 152, 245, 54, 105, 157, 246, 57, 109, 149, 244, 52, 103, 154, 245, 56, 107, 157, 247, 50, 100, 152, 245, 54, 105, 157, 246, 57, 109, 149, 244]

可以看到,源数据与缓存数据**基本一致**,在`alpha`值的误差偏大,在`rgb`值内**偶有误差**。通过分析,认为产生误差的原因是服务端在进行base64转buffer的过程中,所涉及的运算会导致数据的改变,这一点**有待考证**。

以前得到的结论,源数据与缓存数据存在抽样误差的缘由,经调查商讨后鲜明为alpha值的困扰所致。借使我们把alpha值直接定为25五,并且只把多少存放在rgb值内部,就能够化解抽样误差。上边是立异后的结果:

源数据: [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7,
8, 255, 0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255] 缓存数据:[0, 1, 2,
255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7, 8, 255, 0, 1, 2,
255, 4, 5, 6, 255, 8, 9, 0, 255]

1
2
3
源数据:  [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7, 8, 255, 0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255]
 
缓存数据:[0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255, 2, 3, 4, 255, 6, 7, 8, 255, 0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 0, 255]

因为作者懒,只是把alpha值给定为25伍而从不把循环赋值的逻辑实行更新,所以第6n位的元数据被一贯替换到了255,这么些留着读者自行修改没事再改……

总结,那几个动用png图的rgba值缓存数据的黑科学技术,在争鸣上是有效的,但是在实际操作过程中可能还要考虑更多的影响因素,比如设法消除服务端的误差,采取容错机制等。骨子里也是行得通的。

值得注意的是,localhost可能暗许会直接通过地面而不是服务器请求能源,所以在地面实验中,可以透过安装header进行cors跨域,并且经过安装IP地址和80端口模拟服务器访问。

* fs 是文本服务器模块

Nodejs 回调函数
demo:
var http=require(‘http’);//http服务
var fs = require(“fs”);//读取文件
http.createServer(function(request,response){
response.writeHead(200,{‘Content-Type’:’text/plain’});
//读取文件新闻 将赶回值 给response
//var data = fs.readFileSync(‘input.txt’); 这种艺术 是 同步
fs.readFile(‘message.txt’, function (err, data) {
if (err) return console.error(err);
response.end(data.toString());
});
}).listen(8888);

后记

正是黑科技(science and technology),其实原理十二分轻松,与之类似的还有通过Etag等方法实行强缓存。商量的目的唯有为了求学,千万不要看成地下之用。假若读者们发掘那篇小说有啥错漏之处,欢迎指正,也指望有乐趣的对象能够同步开始展览斟酌。

谢谢您的翻阅。笔者是Jrain,应接关怀自身的专辑,将不定时分享自个儿的上学经验,开采心得,搬运墙外的干货。下次见啦!

1 赞 2 收藏 1
评论

美高梅开户网址 17

* url是url路由模块

console.log(‘运行在
http://localhost:”8888’);

2.创建nodejs服务器;

Nodejs 事件循环
绑定和监听事件 须要引进events 模块 并且通过伊夫ntEmitter
类来绑定和监听事件
eventEmitter.on(‘你起的名字’,function(){
//那里是其一事件对应的do something
})
eventEmitter.emit(‘你起的名字’);//那标准去实践你写好的轩然大波

//定义主机IP常量名称

demo:
// 引入 events 模块
var events = require(‘events’);
// 创建 eventEmitter 对象
var eventEmitter = new events.EventEmitter();

const ip = ‘192.168.0.102’;

//创制链接函数
eventEmitter.on(‘connection’,function(){
console.log(‘链接成功’);
eventEmitter.emit(‘data_received’);
});

//定义端口号

// 使用无名氏函数绑定 data_received 事件
eventEmitter.on(‘data_received’, function(){
console.log(‘数据接受成功。’);
});

const port = 2000;

// 触发 connection 事件
eventEmitter.emit(‘connection’);

//引进的组建立模型块  http、url、fs

console.log(“程序试行完结。”);

const http = require(‘http’);

Buffer缓冲区
特意存放二进制数据
new Buffer创设buffer对象实例 write再次回到实际写入的分寸
写入demo:
var buf = new Buffer(256);
var len =
buf.write(“www.runoob.cn”,0,8,”utf八”);//数据,伊始下标,能存多少位,编码格局

const url = require(‘url’);

console.log(“写入字节数 : “+ len);//八
存入男子并且打字与印刷出来:
var buf = new Buffer(‘你好我是数据’);

const fs = require(‘fs’);

console.log(buf.toString());
合并buffer:
var buffer1 = new Buffer(‘新手教程 ‘);var buffer二 = new
Buffer(‘www.runoob.com’);var;var)
buffer3 = Buffer.concat([buffer1,buffer2]);console.log(“buffer3 内容:
” + buffer3.toString());

//创立叁个劳务

Node.js Stream(流)
http 服务器发起呼吁的request 对象正是2个 Stream

var server = http.createServer(function(req,res){

createWriteStream//写入流
createReadStream//读取流
创设对象并且针对文件对象
var readerStream = fs.createReadStream(‘input.txt’);
var writerStream = fs.createWriteStream(‘output.txt’);
写入数据 并且定义编码标准
var data=’作者是写入的数据’
writerStream.write(data,’UTF8′);
读取数据并且打字与印刷
// 设置编码为 utf捌。
var data=”;
readerStream.setEncoding(‘utf8’);
// 读取数据并且打字与印刷
readerStream.on(‘data’, function(data) {
data = data;
console.log(data);
});
以下是数额copy 三个文书读取存入另三个文本
var fs = require(“fs”);

res.writeHead(200,{‘Content-Type’:’text/plain’});

// 创立1个可读流
var readerStream = fs.createReadStream(‘message.txt’);

res.write(‘my nodejs’);

美高梅开户网址 ,// 创设三个可写流
var writerStream = fs.createWriteStream(‘book.txt’);

res.end();

// 管道读写操作
// 读取 input.txt 文件内容,并将内容写入到 output.txt 文件中
readerStream.pipe(writerStream);

});

console.log(“程序推行实现”);
压缩文件
var fs = require(“fs”);var zlib = require(‘zlib’);// 压缩 input.txt
文件为 input.txt.gzfs.createReadStream(‘input.txt’)
.pipe(zlib.createGzip()) .pipe(fs.createWriteStream(‘input.txt.gz’));
console.log(“文件减少完毕。”);
解压文件
var fs = require(“fs”);var zlib = require(‘zlib’);// 解压 input.txt.gz
文件为 input.txtfs.createReadStream(‘input.txt.gz’)
.pipe(zlib.createGunzip()) .pipe(fs.createWriteStream(‘input.txt’));
console.log(“文件解压达成。”);

//监听一个端口

nodejs 模块系统
先期加载原生模块 比方http、fs、path等
var http=require(‘http’);
module.exports=function(){} or 对象

server.listen(port,ip,function(){

Nodejs函数
和JS一样

console.log(‘server start’);

nodejs路由
咱俩要求的具有数据都会含有在request对象中,该对象作为onRequest()回调函数的第一个参数字传送递。不过为通晓析那一个数量,大家必要卓殊的Node.JS模块,它们各自是url和querystring模块。
简易正是路线
var pathname =
url.parse(‘http://baidu.com/a/b?a=1’).pathname.pathname);
var
router=url.parse(‘http://baidu.com/a/b?a=1’).query.query)
response.write(pathname+” “+router);

});

会出现 /a/b a=1

三.取得UMuranoL部分块的内容 url;

node全局对象
response.write(__filename);D:\nodejsdemo\global.js
response.write(__dirname);D:\nodejsdemo
setTimeout(cb, ms)
clearTimeout(t)
setInterval(cb, ms)
console
process process 是2个全局变量,即 global 对象的质量。 和类别互相要用到

const ip = ‘192.168.1.118’;//主机IP

nodejs常用工具 util
util 是四个Node.js 大旨模块,提供常用函数的汇聚,用于弥补宗旨JavaScript
的作用 过于精简的欠缺。
用以往续
util.inherits(child,parent)
只得继续原型中定义的函数 即经过prototype扩充的函数
构造函数内部创制的不继续
util.inspect大4对象转变为字符串的主意,常常用于调节和测试和错误输出。它至少接受1个参数
object,即要调换的目的。
util.isArray(object)假诺给定的参数 “object”
是二个数组重临true,不然重返false。
util.isRegExp(object)借使给定的参数 “object”
是3个正则表明式再次来到true,否则重回false。
util.isDate(object)如果给定的参数 “object”
是三个日子再次来到true,不然重临false。
util.isError(object)假使给定的参数 “object”
是三个不当对象回来true,不然重返false。

const port = 2001;//端口号

动用框架Express
安装:npm install express –save
以下多少个第2的模块须求与express一同安装:
$ npm install body-parser –save$ npm install cookie-parser –save$ npm
install multer –save
body-parser 处理JSON RAW Text U猎豹CS6L编码的数量
cookie-parser解析cookie的工具 通过req.cookies 能够取到传来的cookie
转成对象
multer 管理enctype=”multpart/form-data”的表单数据
demo: 那里配置路由
var express=require(‘express’);
var app=express();
app.get(‘/’,function(req,res){
res.send(‘HELLO WORD2’);
})
app.get(‘/app’,function(req,res){
res.send(‘进入了另1个路线’);
})
var server=app.listen(8888,function(){
var host=server.address().address
var port=server.address().port
console.log(“应用实例,访问地址为 http://”, host, port)
})
静态财富
app.use(express.static(‘public’))
http://localhost:8888/img/2.png
就无须写public了

//引进的组装模块  http、url、fs

设置路由 编写接口
var express=require(‘express’);
var app=express();
//静态文件
app.use(express.static(‘public’))
//设置私下认可入口
app.get(‘/’,function(req,res){
res.sendFile(__dirname+”/”+”index.html”);
})
//接口
app.get(‘/message’,function(req,res){
res.writeHead(200,{‘Content-Type’:’text/html;charset=utf-8′});//设置response编码为utf-8
obj={
id:req.query.id,
name:req.query.name
}
res.end(JSON.stringify(obj));
})
var server=app.listen(8888,function(){
var host=server.address().address
var port=server.address().port
console.log(“应用实例,访问地址为 http://”, host, port)
})

const http = require(‘http’);

Post的demo:必需要引进body-parser 须要设置重视
var urlencodedParser = bodyParser.urlencoded({ extended: false })
是必须的
var express=require(‘express’);
var app=express();
var bodyParser = require(‘body-parser’);
// 成立 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
//静态文件
app.use(express.static(‘public’))
//设置暗许入口
app.get(‘/’,function(req,res){
res.sendFile(__dirname+”/”+”post.html”);
})
//接口
app.post(‘/message’,urlencodedParser,function(req,res){
res.writeHead(200,{‘Content-Type’:’text/html;charset=utf-8′});//设置response编码为utf-8
obj={
id:req.body.id,
name:req.body.name
}
res.end(JSON.stringify(obj));
})
var server=app.listen(8888,function(){
var host=server.address().address
var port=server.address().port
console.log(“应用实例,访问地址为 http://”, host, port)
})

const url = require(‘url’);

const fs = require(‘fs’);

//创制服务的回掉函数

var funSer = function(req,res){

//获取url地址块的剧情  如:/path/show

var parth = url.parse(req.url).pathname;

res.write(parth);

res.end();

}

//监听端口的回掉

var fun = function(){

console.log(‘server start’);

}

var server = http.createServer(funSer).listen(port,ip,fun);

四.读取文件的始末 File System;

const ip = ‘192.168.1.118’;//主机IP

const port = 2001;//端口号

//引进的组建立模型块  http、url、fs

const http = require(‘http’);

const url = require(‘url’);

const fs = require(‘fs’);

//真正打字与印刷文件内容

fs.readFile(‘./index.html’, (err, data) => {

if (err) throw err;

//打字与印刷字符串内容

console.log(data.toString());

});

//制造服务的回掉函数

var funSer = function(req,res){

//获取url地址块的剧情  如:/path/show

var parth = url.parse(req.url).pathname;

res.write(parth);

res.end();

}

//监听端口的回掉

var fun = function(){

console.log(‘server start’);

}

var server = http.createServer(funSer).listen(port,ip,fun);

  1. 全部实例(依照分裂的url地址请求例外的文本【模板】)

const ip = ‘192.168.1.118’;//主机IP

const port = 2001;//端口号

//引进的组装模块  http、url、fs

const http = require(‘http’);

const url = require(‘url’);

const fs = require(‘fs’);

//实例化一个劳务容器

var server = new http.Server();

//监听贰个端口

server.listen(port , ip);

//注册三个事件管理的on方法

server.on(‘request’ , function(req , res){

//获取请求的url地址

var url = urls.parse(req.url);

//console.log(url.pathname);

//遵照path路线来读取分化的模版文件

switch( url.pathname ){

case ” || ‘/’:

//读取文件内容

fs.readFile(‘./index.html’,function( error, content){

if(error){//假使有错误时,呈现错误音信

res.writeHead(400,{‘Content-Type’:’text/plain;charset=”utf-8″‘});

res.write(error.message);

res.end();

}else{

//准确时浏览器输出模板文件的内容

res.writeHead(200,{‘Content-Type’:’text/html;charset=”utf-8″‘});//头信息

res.write(content);//模板文件内容

res.end();

}

});

break;

case ‘/list’:

fs.readFile(‘./list.html’,function( error, content){

if(error){

res.writeHead(400,{‘Content-Type’:’text/plain;charset=”utf-8″‘});

res.write(error.message);

res.end();

}else{

res.writeHead(200,{‘Content-Type’:’text/html;charset=”utf-8″‘});

res.write(content);

res.end();

}

});

break;

case ‘/show’:

fs.readFile(‘./show.html’,function( error, content){

if(error){

res.writeHead(400,{‘Content-Type’:’text/plain;charset=”utf-8″‘});

res.write(error.message);

res.end();

}else{

res.writeHead(200,{‘Content-Type’:’text/html;charset=”utf-8″‘});

res.write(content);

res.end();

}

});

break;

default:

fs.readFile(‘./default.html’,function( error, content){

if(error){

res.writeHead(400,{‘Content-Type’:’text/plain;charset=”utf-8″‘});

res.write(error.message);

res.end();

}else{

res.writeHead(200,{‘Content-Type’:’text/html;charset=”utf-8″‘});

res.write(content);

res.end();

}

});

break;

}

});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图