动手写一个"liveReload"

对于 liveReload 我想做前端的同学应该很熟悉，修改代码 -> 切换到浏览器 -> 刷新页面 现在大概没有多少人会在开发的时候这么做了吧。最近闲来无事，学习 Python，做些小练习能加快学习进度，于是想到了 liveReload，就决定自己做一个，放在我的 GitHub 上。

开始之前

在开始之前，把整个的原理给弄清楚。

这里面主要用到技术就是 websocket，相信大家都有所了解。整体的思路应该是这样的：打开websocket服务器 -> 等待客户端连接 -> 当文件有变动时通知客户端 -> 页面刷新。

开发环境

Python3.5，windows10系统

开工

建立websocket连接

首先下载一个封装好的 websockets 库：

$ pip install websockets

根据官方的文档，很快就写好了一个简单的websocket服务器：

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import sys, asyncio, websockets

# send changed message
async def reload(websocket, path):
    try:
        while  True:
            msg = 'hello world!'
            await websocket.send(msg)
            await asyncio.sleep(1)
    except:
        sys.exit()


if __name__ == "__main__":
    # run websocket server
    try:
        start_server = websockets.serve(reload, '127.0.0.1', 8080)
        asyncio.get_event_loop().run_until_complete(start_server)
        asyncio.get_event_loop().run_forever()
    except KeyboardInterrupt:
        sys.exit()

新建一个 index.html 文件，加入如下脚本：

var ws = new WebSocket("ws://127.0.0.1:8080/");
ws.onmessage = function(event) {
    var data = event.data;
    console.log(data);
};

然后先运行服务器脚本，再打开 index.html，即可在控制台看到，每隔1秒打印出一个”hello world!”。OK，至此 websocket 连接建立好了。

监听文件修改

建立 websocket 连接的目的是通知浏览器有文件更新，需要刷新页面。既如此，就需要我们监听文件的变化。

最开始的时候，我希望能借助现有的库来解决这个问题，于是找到了 watchdog，一个用于监听文件变化的库。可是在windows下多次实验都失败了，网上也搜了很久，于是决定放弃他，自己动手写一个简单的。

不知大家有没有了解过计算文件MD5值的算法，只要文件内容不同，计算出来的MD5值也是不同的，关于MD5的算法我也不太了解，有兴趣的同学可以自行搜索。Python里有现成的模块，直接拿来用即可，下面是个简单的例子：

import hashlib

# get the MD5 value of file
def getFileMD5(file):
    # 拿到MD5对象实例
    md5 = hashlib.md5()
    f = open(file, 'rb')
    # 分块读取文件内容
    while True:
        chunk = f.read(1024)
        if not chunk:
            f.close()
            break;
        md5.update(chunk)
    # 返回最终计算结果
    return md5.hexdigest()

接下来只需要在md5值发生改变时，发送通知给页面即可。

结语

这个实现非常简单，目的是学习Python并了解下最初的前端页面自动刷新技术的实现。完整代码我就不贴了，想了解的同学欢迎来我的GitHub。