# 前端開發利器sync_browser
基于tp5瀏覽器自動刷新測試工具
思路來源于[http://www.browsersync.cn/](http://www.browsersync.cn/)
實現方式是采用socket通知機制
基于nodejs的瀏覽器自動刷新，現已有[http://www.browsersync.cn/](http://www.browsersync.cn/)，該工具實現了代碼修改瀏覽器自動刷新功能。據說能提高約30%的開發效率，但是必須得安裝nodejs，node比較耗資源，而且對于php開發人員來說維護起來比較麻煩。故開發php版本的同步刷新工具。基于workerman+tp5，算是使用tp5框架的php開發者的一個福音吧，tp3可以對應的仿照實現。
## 使用方式
項目根目錄執行
```
php think
```
執行結果
```
......
Available commands:
browser_sync 監聽服務器文件，當文件修改時，自動同步刷新瀏覽器
build Build Application Dirs
clear Clear runtime file
help Displays help for a command
list Lists commands
......
```
查看幫助
```
php think browser_sync --help
```
執行結果
```
Usage:
browser_sync [options]
Options:
-f, --file_types=FILE_TYPES 監聽變化的文件后綴名，分號分割，例如：html;js;css;php [default: "html;js;css;php"]
-d, --dirs=DIRS 監聽web根目錄下變化的文件夾，分號分割，例如：application;public [default: "application;public"]
-p, --port=PORT socket監聽的端口，注意防火墻的設置 [default: "8000"]
-c, --command=COMMAND start/啟動，start-d/啟動（守護進程），status/狀態, restart/重啟，reload/平滑重啟，stop/停止 [default: "start"]
-h, --help Display this help message
-V, --version Display this console version
-q, --quiet Do not output any message
--ansi Force ANSI output
--no-ansi Disable ANSI output
-n, --no-interaction Do not ask any interactive question
-v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
```
默認方式執行，或監聽default中的定義
```
php think browser_sync
```
守護進程方式執行
```
php think browser_sync -c start-d
```
僅僅監聽php文件
```
php think browser_sync -f php
```
修改監聽的端口，比如改為6000
```
php think browser_sync -p 6000
```
上述工作做完之后，手工刷新下瀏覽器，則在瀏覽器下方自動拼接相關js刷新代碼
```
<script type="text/javascript">
var ws = new WebSocket('ws://yourdomain:8000');
ws.onclose = function(){
window.location.reload();
};
</script>
```
如瀏覽器不需要刷新，則在url后拼接
```
url?browser_sync=0
```
恢復刷新，則拼接
```
url?browser_sync=1
```
這時，修改任意被監聽的代碼，則瀏覽器會自動刷新。