分享

使用socket.io+fs.watchFile实现浏览器上自动预览html

 昵称10504424 2015-09-01

  作为一个前端码农我三分之一的时间用来在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

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
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./libs/jquery/2.1.4/jquery.min.js"></script>    
    </head>
    <body>
            <iframe  style="height:100%;width: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.第二篇博客园文章,第一篇是关于怎么前端表单写验证框架的被骂的很惨(理论描述了一般我就保存了,以为可以接着写结果好多人是来看代码的,骂我标题党,后来我把代码补上了,也没见夸我的,后来就删除了)

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多