作为一个前端码农我三分之一的时间用来在f5上还乐此不彼，当然我也可以用runjs.cn之类的在线编辑器来及时预览我的页面，但在线编辑器的智能提示等功能远远没有本地编辑好用啊，有同学说了，我们可以用dw的代码/设计模式，但我不喜欢dw( 没有理由的不喜欢 O(∩_∩)O)
现在有一个问题是确定的我们要使用本地编辑器 vscode sublime 什么的爱用什么用什么 ，那么怎么才能让浏览器自动刷新呢，最开始我想着人为模拟f5。但这有个坏处：
第一,我不会写浏览器插件啊
第二,是不是每个浏览器都要写一套插件啊 ie chrome ff ......my god
飞机的发明告诉我们，人类要实现飞翔不是非要靠模拟鸟类震动翅膀。还有什么能实现页面自动刷新呢 。。。。。
一时的烦恼源于深陷概念无法自拔，我需要浏览器刷新吗，不，我需要的只是浏览器能够更新dom.....dom!!!!
dom...realtime...dom...realtime....!!!
好吧我想到了socket.io
---------------------------------------------------以上为背景------------------------------------------------------------------------------
首先说明一下工作原理：
利用fs.watchFile检测某个html文件是否改变(当我们在编辑器ctr+s的时候会触发change哦)
触发改变后向和客户端发送html文件文本
客户端接收到html文件文本后更新dom
ps：他们通过 websocket通信(为啥用websocket,因为我觉得websocket体现了前端人员的NB支出.......)
然后就是客户端该怎么构建的问题
最开始我打算使用一个div用来渲染 服务器传递回来的html文本
但是有以下问题
怎么防止css js 污染
所以还是用iframe吧(iframe工作时并不总需要一个src)
--------------------------------------------代码实践---------------------------
首先安装 nodejs+socket.io(这不废话吗) 请大家自行百度怎么安装
本人的安装经历也很狗血 不敢擅自指点
正式开工:
创建app.js
var app=require('http').createServer(handler),
io=require('socket.io').listen(app),
fs=require('fs'),
app.listen(8080);
function handler (req,res) {
fs.readFile(__dirname+'/sandbox.html',
function(err,data){
if(err){
res.writeHead(500);
return res.end('Error loading sandbox.html');
}
res.writeHead(200);
res.end(data);
}
)
}
io.sockets.on('connection',function(socket){
fs.watchFile(__dirname+'/test.html',{ persistent: true, interval: 300 },function(status){
if(status){
console.log(status);
}
fs.readFile(__dirname+"/test.html",function(err,data){
if(err){
console.log(err);
return false;
}
var str=data.toString();
socket.emit("render",str);
});
});
});
app.js代码解读:
首先我们创建了一个httphandler(asp.net好像就这么叫)监听8080端口默认的就是本机locahhost喽,io,fs分别是socket.io和fs的引用
在handler里我们读取当前文件夹的sandbox页面(沙盒页面里面有个iframe用来预览，下面会有详细代码，注意这里的__dirname指的是当前app.js在的路径__是两个连续的_)
接下来是大家熟悉的建立连接
当连接建立后我们开始watchFile
现在我们只wath一个file 随便起一个名字 test.html
fs.wathFile是fs模块自实现方法第一个参数为watch的路径，第二个为watch的间隔，第三个为文件 发生改变的时候做出的响应
之后的代码就简单了读取test.html的文本然后通过socket.emit发送给客户端
sandbox代码:
<html> <head> <script type="text/javascript" src="socket.io/socket.io.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <iframe style="height:100%;100%;margin:0px;border:0px;" id="prebox"> <body> </body> </iframe> <script type="text/javascript"> var port="http://locahhost:8080/" var socket=io.connect(port); socket.on('render',function (data) { $("#prebox")[0].contentDocument.documentElement.innerHTML=data.replace("<html>","").replace("</html>",""); }) </script> </body> </html>
引用socket.io.js（这个文件在哪呢？这个文件其实在 引用socket.io时候创建的node_modules里，虽然我没找到，但我就是这么理解的）
引用jquery（为啥引用这么高的版本，因为使用的百度的cdn啊,其实随便一个jquery版本就行了）
创建socket的链接 只需要在 服务器socket返回render事件的时候对对iframe更新一下就好了
测试浏览器为chrome
现在打开 http://localhost:8080/你只会看到一篇空白
然后你在test.html更新代码就会发现 浏览器代码已经在实时的更新了。。。激动啊
关于以下问题。。。。。
1.socket性能如何啊
2.watchFile稳定不
3.有没其他的框架实现啊，你这个方法有点像土包子啊
4.test.html路径为啥要写死啊 不能灵活点吗?
5.写这种垃圾的代码你到底接触过nodejs没
6.使用socket这种长连接有必要吗不浪费吗
7.这文章的排版太难看了，兄台你这排版是我见过最丑的。
我先自己回答
1.socket性能很好啊（我没测试过）
2.watchFile稳定不（不稳定，这个我测试过，但不妨碍正常执行）
3.有人开发过自动刷新f5的插件，但程序员的不就喜欢自己造轮子吗
4.为了代码的清晰可读（也可以理解为懒）
5.上周才接触
6.自己玩玩
7.第二篇博客园文章，第一篇是关于怎么前端表单写验证框架的被骂的很惨（理论描述了一般我就保存了，以为可以接着写结果好多人是来看代码的，骂我标题党，后来我把代码补上了，也没见夸我的，后来就删除了）