金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > js静态页面服务器,探索前端黑科技

js静态页面服务器,探索前端黑科技

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:45

查究前端黑科技(science and technology卡塔尔国——通过 png 图的 rgba 值缓存数据

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

初藳出处: jrainlau   

谈到前端缓存,超过一半人想到的仅仅是多少个正规的方案,举例cookielocalStoragesessionStorage,也许加上indexedDBwebSQL,以及manifest离线缓存。除外,到底还会有没有别的办法能够开展前端的多寡缓存呢?这篇小说将会带你三只来商量,如何一步一步地经过png图的rgba值来缓存数据的黑科技(science and technology卡塔尔(قطر‎之旅。

1.小知识点总计

node.js静态页面服务器

node.js 达成叁个轻易的 web 服务器仍旧比较轻松的,早先使用 express 框架达成过『nodeJS搭二个简约的web服务器』。代码量非常少,可是使用时必要设置信任,多处接受难免有一点点不平价。于是便有了截然使用原生 api 来重写的想法,也视作二回 node.js 复习。

原理

咱俩知道,通过为静态财富设置Cache-ControlExpires响应头,能够反逼浏览器对其进展缓存。浏览器在向后台发起倡议的时候,会先在本身的缓存里面找,假设缓存里面未有,才会持续向服务器央求这几个静态财富。利用这点,大家得以把某个索要被缓存的音讯透过这几个静态财富缓存机制来进展仓库储存。

那么大家怎么把新闻写入到静态财富中吗?canvas提供了.getImageData()方法和.createImageData()艺术,能够独家用于读取设置图片的rgba值。所以大家得以行使那七个API进行新闻的读写操作。

接下去看规律图:

图片 1

当静态财富步向缓存,未来的其他对于该图形的伸手都会先找找本地缓存,也正是说音信实际早就以图纸的样式被缓存到本地了。

注意,由于rgba值只好是[0, 255]时期的整数,所以本文所斟酌的秘籍仅适用于纯数字组成的数目。

* Xshell 使用open张开七个虚构机;

const http = require('http');

1、静态 web 服务器

静态服务器

咱俩选拔node搭建三个粗略的静态服务器:

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')

其风流倜傥静态财富的成效相当轻松,它提供了两个职能:通过客户端传来的base64生成图片并保留到服务器;设置图片的缓存时间并发送到顾客端。

重超越58%是设置响应头:

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和十年的Expires,理论上丰裕长了。上面我们来张开顾客端的coding。

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

const url require('url');

'use strict' const http = require const url = require const fs = require const path = require const cp = require const port = 8080 const hostname = 'localhost' // 创建 http 服务 let httpServer = http.createServer // 设置监听端口 httpServer.listen => { console.log(`app is running at port:${port}`) console.log(`url: http://${hostname}:${port}`) cp.exec(`explorer http://${hostname}:${port}`,  // 处理静态资源 function processStatic { const mime = { css: 'text/css', gif: 'image/gif', html: 'text/html', ico: 'image/x-icon', jpeg: 'image/jpeg', jpg: 'image/jpeg', js: 'text/javascript', json: 'application/json', pdf: 'application/pdf', png: 'image/png', svg: 'image/svg+xml', woff: 'application/x-font-woff', woff2: 'application/x-font-woff', swf: 'application/x-shockwave-flash', tiff: 'image/tiff', txt: 'text/plain', wav: 'audio/x-wav', wma: 'audio/x-ms-wma', wmv: 'video/x-ms-wmv', xml: 'text/xml' } const requestUrl = req.url let pathName = url.parse.pathname // 中文乱码处理 pathName = decodeURI let ext = path.extname // 特殊 url 处理 if (!pathName.endsWith && ext === '' && !requestUrl.includes { pathName += '/' const redirect = `http://${req.headers.host}${pathName}` redirectUrl } // 解释 url 对应的资源文件路径 let filePath = path.resolve // 设置 mime ext = ext ? ext.slice : 'unknown' const contentType = mime[ext] || 'text/plain' // 处理资源文件 fs.stat(filePath,  => { if  { res.writeHead(404, { 'content-type': 'text/html;charset=utf-8' }) res.end('404 Not Found') return } // 处理文件 if  { readFile(filePath, contentType, res) } // 处理目录 if  { let html = "

客户端

XHTML

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

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

假使大家须求仓库储存的是叁十三个人的数目,所以大家为canvas设置宽度为8,中度为1。到底干什么三十几个人数据对应长度为8,是因为每四个像素皆有一个rgba,对应着redgreenbluealpha4个数值,所以要求除以4。

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)

首先我们假如需求被缓存的字符串为31位的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编写翻译为一张图片的base64并发送给服务器,同期收到服务器的响应,对图纸举行缓存:

JavaScript

$.post('', { imgData: canvas.toDataURL() }, (data) => { if (data === 'OK') { let img = new Image() img.crossOrigin = "anonymous" img.src = '' img.onload = (卡塔尔 => { console.log('完毕图片央求与缓存'卡塔尔(英语:State of Qatar)ctx.drawImage(img, 0, 0卡塔尔(英语:State of Qatar) console.log(ctx.getImageData(0, 0, 8, 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()方法把base64发送到服务器,服务器管理后生成图片并赶回,其图片能源地址为http://xx.xx.xx.xx:80/out.png。在img.onload后,其实图片就早就做到了本土缓存了,大家在此个事件个中把图纸新闻打字与印刷出来,作为和源数据的对待。

* http 是nodejs的劳务模块

const fs require('fs');

结果分析

敞开服务器,运营顾客端,第三次加载的时候经过调节台能够看看响应的图形新闻:

图片 2

200 OK,注解是从服务端获取的图形。

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

图片 3

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

接下去直接看rgba值的相持统意气风发:

源数据: [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值直接定为255,况兼只把多少贮存在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值给定为255而从未把循环赋值的逻辑进行翻新,所以第4n位的元数据被直接替换到了255,这么些留着读者自行修改悠闲再改……

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

值得注意的是,localhost大概默许会直接通过地面并不是服务器诉求财富,所以在本土实验中,能够通过安装header进行cors跨域,况兼通过安装IP地址和80端口模拟服务器访谈。

* fs 是文本服务器模块

const ip = '192.168.130.2';

' res.writeHead(200, { 'content-type': 'text/html' }卡塔尔(قطر‎ res.end } // 重定向处理 function redirectUrl { url = encodeUTiguanI res.writeHead(302, { location: url }卡塔尔(英语:State of Qatar) res.end(卡塔尔(قطر‎ } // 文件读取 function readFile(filePath, contentType, res卡塔尔 { res.writeHead(200, { 'content-type': contentType }卡塔尔国const stream = fs.createReadStream stream.on { res.writeHead(500, { 'content-type': contentType }卡塔尔(英语:State of Qatar) res.end('

后记

实属黑科学技术,其实原理特别轻松,与之雷同的还大概有通过Etag等情势开展强缓存。商讨的指标只是为了学习,千万不要看成地下之用。借使读者们开掘那篇小说有何错漏之处,应接指正,也盼望风乐趣的对象能够合营张开探究。

谢谢您的读书。笔者是Jrain,款待关怀本人的专栏,将不许时分享温馨的就学心得,开荒体会,搬运墙外的干货。下一次见啦!

1 赞 2 收藏 1 评论

图片 4

* url是url路由模块

const port = 3000;

500 Server Error

') }) stream.pipe }

// 代理列表 const proxyTable = { '/api': { target: 'http://127.0.0.1:8090/api', changeOrigin: true } } // 处理代理列表 function processProxy { const requestUrl = req.url const proxy = Object.keys let not_found = true for (let index = 0; index < proxy.length; index++) { const k = proxy[index] const i = requestUrl.indexOf { not_found = false const element = proxyTable[k] const newUrl = element.target + requestUrl.slice if (requestUrl !== newUrl) { const u = url.parse const options = { hostname : u.hostname, port : u.port || 80, path : u.path, method : req.method, headers : req.headers, timeout : 6000 } if{ options.headers['host'] = u.hostname + ':' +  } const request = http .request(options, response => { // cookie 处理 if(element.changeOrigin && response.headers['set-cookie']){ response.headers['set-cookie'] = getHeaderOverride(response.headers['set-cookie']) } res.writeHead(response.statusCode, response.headers) response.pipe .on('error', err => { res.statusCode = 503 res.end req.pipe } break } } return not_found } function getHeaderOverride{ if  { for (var i = 0; i < value.length; i++ ) { value[i] = replaceDomain } } else { value = replaceDomain } return value } function replaceDomain { return value.replace(/domain=[a-z.]*;/,'domain=.localhost;').replace } 

服务器收到到 http 央求,首先管理代理列表 proxyTable,然后再管理静态能源。固然这里面独有三个步骤,但若是根据前后相继顺序编码,这种方法了若指掌缺乏利索,不便于以往作用的扩大。koa 框架的中间件就是二个很好的解决方案。完整代码如下:

'use strict' const http = require const url = require const fs = require const path = require const cp = require // 处理静态资源 function processStatic { const mime = { css: 'text/css', gif: 'image/gif', html: 'text/html', ico: 'image/x-icon', jpeg: 'image/jpeg', jpg: 'image/jpeg', js: 'text/javascript', json: 'application/json', pdf: 'application/pdf', png: 'image/png', svg: 'image/svg+xml', woff: 'application/x-font-woff', woff2: 'application/x-font-woff', swf: 'application/x-shockwave-flash', tiff: 'image/tiff', txt: 'text/plain', wav: 'audio/x-wav', wma: 'audio/x-ms-wma', wmv: 'video/x-ms-wmv', xml: 'text/xml' } const requestUrl = req.url let pathName = url.parse.pathname // 中文乱码处理 pathName = decodeURI let ext = path.extname // 特殊 url 处理 if (!pathName.endsWith && ext === '' && !requestUrl.includes { pathName += '/' const redirect = `http://${req.headers.host}${pathName}` redirectUrl } // 解释 url 对应的资源文件路径 let filePath = path.resolve // 设置 mime ext = ext ? ext.slice : 'unknown' const contentType = mime[ext] || 'text/plain' // 处理资源文件 fs.stat(filePath,  => { if  { res.writeHead(404, { 'content-type': 'text/html;charset=utf-8' }) res.end('404 Not Found') return } // 处理文件 if  { readFile(filePath, contentType, res) } // 处理目录 if  { let html = "

' res.writeHead(200, { 'content-type': 'text/html' }卡塔尔(قطر‎ res.end } // 重定向管理 function redirectUrl { url = encodeUPAJEROI res.writeHead(302, { location: url }卡塔尔(قطر‎ res.end(卡塔尔(قطر‎ } // 文件读取 function readFile(filePath, contentType, res卡塔尔(英语:State of Qatar) { res.writeHead(200, { 'content-type': contentType })const stream = fs.createReadStream stream.on { res.writeHead(500, { 'content-type': contentType }卡塔尔(英语:State of Qatar) res.end('

2.创建nodejs服务器;

fs.readFile('/etc/passwd',(err,data) =>{

500 Server Error

'卡塔尔国 }卡塔尔 stream.pipe } // 处理代理列表 function processProxy { const requestUrl = req.url const proxy = Object.keys let not_found = true for (let index = 0; index < proxy.length; index++) { const k = proxy[index] const i = requestUrl.indexOf { not_found = false const element = proxyTable[k] const newUrl = element.target + requestUrl.slice if (requestUrl !== newUrl) { const u = url.parse const options = { hostname : u.hostname, port : u.port || 80, path : u.path, method : req.method, headers : req.headers, timeout : 6000 }; if{ options.headers['host'] = u.hostname + ':' + } const request = http.request(options, response => { // cookie 处理 if(element.changeOrigin && response.headers['set-cookie']){ response.headers['set-cookie'] = getHeaderOverride(response.headers['set-cookie']) } res.writeHead(response.statusCode, response.headers) response.pipe .on('error', err => { res.statusCode = 503 res.end req.pipe } break } } return not_found } function getHeaderOverride{ if { for (var i = 0; i < value.length; i++ ) { value[i] = replaceDomain } } else { value = replaceDomain } return value} function replaceDomain { return value.replace(/domain=[a-z.]*;/,'domain=.localhost;').replace } function compose { if (!Array.isArray throw new TypeError('Middleware stack must be an array!') for (const fn of middleware) { if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!'卡塔尔 } return function { // 记录上一遍执行中间件的任务 let index = -1 return dispatch function dispatch { // 理论上 i 会大于 index,因为每趟实施一回都会把 i依次增加, // 假若相等大概小于,则印证next(卡塔尔实行了频仍 if return Promise.reject called multiple times'卡塔尔卡塔尔(قطر‎ index = i let fn = middleware[i] if (i === middleware.length) fn = next if return Promise.resolve() try { return Promise.resolve(fn(context, function next () { return dispatch } catch { return Promise.reject } } } } function Router(){ this.middleware = [] } Router.prototype.use = function { if (typeof fn !== 'function') throw new TypeError('middleware must be a function!'卡塔尔 this.middleware.push return this} Router.prototype.callback= function(卡塔尔国 { const fn = compose const handleRequest = => { const ctx = {req, res} return this.handleRequest } return handleRequest } Router.prototype.handleRequest= function } // 代理列表 const proxyTable = { '/api': { target: '', changeOrigin: true } } const port = 8080 const hostname = 'localhost' const appRouter = new Router(卡塔尔(قطر‎ // 使用中间件 appRouter.use=>{ if(processProxy{ next=>{ processStatic // 创造 http 服务 let httpServer = http.createServer // 设置监听端口 httpServer.listen => { console.log(`app is running at port:${port}`) console.log(`url: ) cp.exec(`explorer ,

如上正是本文的全部内容,希望对大家的就学抱有利于,也希望我们多多指教脚本之家。

//定义主机IP常量名称

if(err) throw err;

const ip = '192.168.0.102';

console.log(data);

//定义端口号

});

const port = 2000;

var f= function(req,res){

//引进的营造立模型块  http、url、fs

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

const http = require('http');

res.write(pathname);

const url = require('url');

res.end();

const fs = require('fs');

}

//成立三个劳务

var f2 = function(){

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

console.log('server start')

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

}

res.write('my nodejs');

res.end();

});

//监听三个端口

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

console.log('server start');

});

3.得到UPAJEROL部分块的内容 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 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);

4.读取文件的内容 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;

}

});

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:js静态页面服务器,探索前端黑科技

关键词: