模擬websocket推送消息服務mock工具二

在上一篇博文中有提到《使用electron開發一個h5的客戶端應用創建http服務模擬后端接口mock》使用electron創建一個模擬后端http接口的工具mock，在通常情況下，這已經足夠大多數的應用場景，但還是不夠，作為一個模擬工具，不能模擬后端socket推送怎么行呢，請把我的工具與那些純靜態的模擬服務區別開來，我做的是一個能夠減少前端開發工作量的東西，而不是一個單元測試工具。

在websocket上面，nodejs比較有名氣的就是socket.io和ws了,它們之間誰優誰劣，我不作評價了，因為只是做他的模擬服務，所以在工具中，我不作過多的限制，可以先看下這一版本的mock的主界面:

主界面中提供了兩種推送服務：socket和ws，分別對應着socket.io和websocket/ws兩種表現形式。添加配置和http服務類似：

作為一個推送服務，它完成下面這些功能

1. 推送消息的頻率
2. 一個可變化的值。
3. 可以依次推送消息，所以可以推多條消息
4. 可以關閉、打開推送

所以它的界面如下：

 

添加完成后，再回到主界面，我們就可以啟動推送服務了，這里需要注意的是，socket.io的服務我是直接放在http上的，所以需要先啟動http服務再啟動socket服務，ws是一個獨立的端口號。效果如下：

他們調用的方式也不一樣。socket.io的調用方式更直接，可以參考文檔，目錄都是以message事件為准。

//socket.io的調用
socket = io.connect('http://localhost:8080'); 
socket.emit('message', '測試成功!');
socket.on('message', function (data) {
 $('#sctips').html(data); 
});

//ws服務的調用
const ws = new WebSocket('ws://localhost:8090/ws');
ws.on('message', function incoming(data) { 
　　$('#wstips').html(data)
});

這樣我們就可以在前端中模擬socket服務了，也可以當作一個優化工具，把頻率改到很高，測試網頁在高頻率的刷新下的執行效率。注意，每次配置的修改都需要重啟一下服務。

另外，這次其實是兩次版本的更新，除了更新了模擬websocket推送外，還添加了一個新的工具，創建本地http站點，他可以隨意的選擇本機的文件夾作為站點目錄，如下圖所示：

然后點擊右側的本地站點，即可以創建一個http://localhost:8000的本地靜態映射站點。

簡單好用，並且直觀，最后，我們再展望下下個版本吧，可以實現文件打包壓縮功能，先做sass和less的編譯吧。

最后，放下mock工具的幾個下載地址：

 https://tianxiangbing.github.io/mock/updates/mock.exe 

或者http://www.lovewebgames.com/app/mock/mock.exe 

或者綠化版本 http://www.react-cn.com/app/mock/mock.rar

如果有用的話，就給作者github一顆小星星吧！