1. WebSocket 简介
前端和后端的交互模式最常见的就是：前端发数据请求，从后端拿到数据后展示到页面中。
如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。
一种新的通信协议应运而生 WebSocket，它最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。
WebSocket 其他特点：
建立在 TCP 协议之上，服务器端的实现比较容易；
与 HTTP 协议有着良好的兼容性；
默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效；
可以发送文本，也可以发送二进制数据；
没有同源限制，客户端可以与任意服务器通信；
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL；
2. Vue中使用 WebSocket
2.1 vue中使用 WebSocket 注意项
- 判断浏览器是否支持 WebSocket；
解决兼容性问题传送门：解决 WebSocket 兼容性
2.组件加载的时候 连接websocket，在组件销毁的时候 断开websocket；
3.后端接口需要引入 socket 模块，否则不能实现连接；
2.2 完整代码
<template> <div class="test"> </div> </template> <script> export default { data() { return { websock: null, } }, methods: { // 初始化weosocket initWebSocket(){ if(typeof(WebSocket) === "undefined"){ console.log("您的浏览器不支持WebSocket") }else{ const wsurl = "ws://127.0.0.1:8080"; // 实例化 WebSocket this.websock = new WebSocket(wsurl); // 监听 WebSocket 连接 this.websock.onopen = this.websocketonopen; // 监听 WebSocket 错误信息 this.websock.onerror = this.websocketonerror; // 监听 WebSocket 消息 this.websock.onmessage = this.websocketonmessage; this.websock.onclose = this.websocketclose; } }, // 连接建立之后执行send方法发送数据 websocketonopen(){ console.log("socket连接成功") let actions = {"test":"12345"}; this.websocketsend(JSON.stringify(actions)); }, // 连接建立失败重连 websocketonerror(){ console.log("连接错误"); this.initWebSocket(); }, // 数据接收 websocketonmessage(e){ const resdata = JSON.parse(e.data); console.log(resdata); }, // 数据发送 websocketsend(Data){ this.websock.send(Data); }, // 关闭 websocketclose(e){ console.log('WebSocket 断开连接',e); }, }, beforeMount() { this.initWebSocket(); }, destroyed() { //离开路由之后断开 websocket 连接 this.websock.close(); }, } </script>
