模拟websocket推送消息服务mock工具二

模拟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一颗小星星吧！