動手寫一個"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。