vuewebsocket消息推送(websocket后端推送信息)
WebSocket使用及在vue如何使用
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中， 浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输 。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每 1 秒），由浏览器对服务器发出 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后， 客户端和服务器端就可以通过 TCP 连接直接交换数据 。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接
socket.io 是一个类库，内部封装了 WebSocket，可以在浏览器与服务器之间建立实时通信。
如果某些旧版本的浏览器不支持 WebSocket，socket.io 会使用轮询代替。另外它还具有可发送二进制消息、多路复用、创建房间等特性，因此相比直接使用原生 WebSocket，socket.io 是更好的选择。
开发一个实时应用主要分两部分：服务端和客户端，socket.io 分别提供了相应的 npm 包供我们方便地调用。
接下来就通过一个生动形象且有趣的栗子分别介绍这两大块。
现在假设李白张三，李四，王五 5 个人加入了一个叫 棋牌室 的房间，在文章结束时我们将拥有一个麻雀虽小五脏俱全的峡谷英雄在线聊天室。
客户端的功能到这基本上也开发完了。核心 api 就是 on 和 emit 用于收发消息，既简单又优雅。
SpringBoot+Vue+Websocket 实现服务器端向客户端主动发送消息
本文通过一个实际的场景来介绍在前后端分离的项目中通过 WebSocket 来实现服务器端主动向客户端发送消息的应用。主要内容如下
Websocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 连接成功后，服务端与客户端可以双向通信。在需要消息推送的场景，Websocket 相对于轮询能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
具体如下特点
在客户端的列表数据中有个 status 字段，服务器端需要花费较长的时间进行处理，处理完成后才会更新对应数据的 status 字段值，通过 Websocket 的处理流程如下：
通过注入 ServerEndpointExporter 类，用于在项目启动的时候自动将使用了 @ServerEndpoint 注解声明的 Websocket endpoint 注册到 WebSocketContainer 中。
为什么增加一个 ServerEndpointExporter Bean，并通过在一个类上增加 @ServerEndpoint 和 @Component 注解就可以实现服务器端 Websocket 功能，这里简单解析一下。
java 定义了一套 javax.servlet-api, 一个 HttpServlet 就是一个 HTTP 服务。java websocket 并非基于 servlet-api 简单扩展, 而是新定义了一套 javax.websocket-api。
一个 websocket 服务对应一个 Endpoint。与 ServletContext 对应, websocket-api 也定义了 WebSocketContainer, 而编程方式注册 websocket 的接口是继承自 WebSocketContainer 的 ServerContainer。
一个 websocket 可以接受并管理多个连接, 因此可被视作一个 server。主流 servlet 容器都支持 websocket, 如 tomcat, jetty 等。看 ServerContainer api 文档, 可从 ServletContext attribute 找到 ServerContainer。
websocket的消息推送只能固定在某一个页面吗？
不会固定某一个页面一般都是用多 frame 来实现，即建立 WebSocket 是单独的一个 frame，且此 frame 不随页面切换而刷新，至于其他需要在页面切换时刷新的元素放在其他 frame 里。
websocket 对前端其实还蛮简单(如果以前有对ajax的经验的话)，与平时ajax的区别大多就是在事件监听上的不同，在onMessage回调里拿到你想要的数据后就与ajax无异了，主要是后端的推送数据方式有比较大的改变。
后端推送数据方式就有点类似于 tcp 的方式，搭配框架实现起来还蛮方便的，如果你了解php，建议你后端使用 php workerman，当然websocket其实只能实现在线推送，推送方面类似的比如 PWA 也不错，不过学习成本比较高。
多窗口websocket消息推送怎么实现。
目前只能在单浏览器窗口下可以收到websocket服务器推送过来的消息。现在消息推送软件有很多，使用消息推送软件的好处也是很多的，具体好处如下：
1、能提高使用者的活跃度；
2、具有较强的针对目的性，推送服务提供的信息是根据用户的特定需求定制的，这充分体现了用户的个性化需求；
3、消息推送及时，这是推送服务必须具备的基础功能。
结合以上几点，深圳极光就是这样的一个消息推送软件。极光的行业应用已经拓展至市场洞察、金融风控与商业地理服务，助力各行各业优化决策、提升效率。
截至2017年，我们服务了超过60万款移动应用，累积覆盖超过100亿个移动终端，月活跃设备数7.5亿，日推送信息量超过30亿条。
HTML5 WebSocket如何实现消息推送？
HTML5 WebSocket实现消息推送有以下两种方法：
长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。 优点：消息即时到达，不发无用请求；管理起来也相对便。
Flash Socket：在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。 优点：实现真正的即时通信，而不是伪即时。
实现消息推送可以试一试极光。极光是国内领先的移动开发者服务提供商，近十年里，极光紧密围绕移动开发者的需求，打造了一系列针对开发者运营、增长及变现的产品。