WebPack中使用WebSocket的点及相关展开

  现在开发的基于Vue的UI项目中，经常需要实时响应网络服务，即需要使用http服务，而webpack本身是不原生支持http服务的，这时候需要结合DevServer去启动一个http服务器用于网页的请求和打开，打开webpack的同时再接收webpack发出的文件变更信号，最后通过websocket协议实时通信，自动刷新网页。
 这里涉及到两个比较麻烦的东西：DevServer和WebSocket。
 DevServer：这种方法是webpack中自带的，主要常用的功能有两个：1、创建一个http服务器用于启动网页请求。2、模块热替换。通俗点来讲，第一个功能就是让我们能够从网上获取内容并结合websocket实现实时更新内容；第二个功能是在不重新加载页面的情况下，用已经更新的模块替换老的模块，再重新执行一次来实现实时预览。以上是个人理解的概述，再详细点的介绍可以参考https://blog.csdn.net/dengdengda/article/details/78746208 大神的剖析。
 WebSocket：也叫WebSocket，WebSocket协议或WebSocket API，现在主要用在Web App的开发上。主要功能是实现用户浏览器和服务器之间的双向通信。啥叫双向通信？打个比方说，最常见的就是聊天软件。多个用户在服务器上签名、订阅，然后这时候服务器就会接受这些用户发送的消息，并把这些消息反馈到所有已经订阅的用户的浏览器上去（有同样订阅的用户都会接收到这些消息），也就是说服务器能接受浏览器给的消息，同时对这些消息做出实时反馈。用官方的话说，就是Pub-Sub（发布-订阅）工作原理。
 WebSockets不仅限于聊天/消息传递应用程序。它们适用于需要实时更新和即时信息交换的任何应用程序。一些示例包括但不限于：现场体育更新，股票行情，多人游戏，聊天应用，社交媒体等等。
 这里只对这两个点做一个概念上的理解，具体到项目中怎么应用，需要注意什么，这里不再引申，可以参考一下下面几个个人觉得讲得比较详细的文章：
 https://www.cnblogs.com/unclekeith/p/8087182.html
 https://www.cnblogs.com/lxwphp/p/8241194.html