前后端互联axios

webSocket 介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
- 看过一个很有趣的形容：

- 轮询就是：

前台：后台你好了没有？（3秒后。。。）
 后台：没有。
 前台：后台你好了没有？（3秒后。。。）
 后台：没有。
 前台：后台你好了没有？（3秒后。。。）
 后台：好了。。

websocket就是：

前台：后台你好，我来拿水果了！
后台：给你苹果。（1秒后。。）
后台：给你梨子。（10秒后。。）
后台：给你香蕉，我没水果了。
前台：好了，我走了！

如何使用 webSocket

• 建立websocket
  实现效果：点击按钮建立连接，页面关闭时关闭连接。
• 代码如下：

// 建立连接
initSocket() {
  // 相当于 let url = 'ws://192.168.10.18:9529/websocket/admin' admin 为参数，建立客户端与服务器之间的关系
  let baseURL = `${ Axios.defaults.baseURL }/websocket`.replace("http","ws")
  let url = `${baseURL}/${this.username}` 
      
  this.webSocket = new WebSocket(url)
  this.webSocket.onopen = this.webSocketOnOpen
  this.webSocket.onclose = this.webSocketOnClose
  this.webSocket.onmessage = this.webSocketOnMessage
  this.webSocket.onerror = this.webSocketOnError

},
// 建立连接成功后的状态
webSocketOnOpen() {
  console.log('websocket连接成功');
},
// 获取到后台消息的事件，操作数据的代码在onmessage中书写
webSocketOnMessage(res) {
  // res就是后台实时传过来的数据
  console.log(res);
    //给后台发送数据
  this.webSocket.send("发送数据");
},
// 关闭连接
webSocketOnClose() {
  console.log('websocket连接已关闭');
},
//连接失败的事件
webSocketOnError(res) {
  console.log('websocket连接失败');
  // 打印失败的数据
  console.log(res);
}

谨记：在生命周期结束的时候关闭websocket连接，除非业务需要可以不关，不然很耗内存。

created() {
  // 页面打开就建立连接，根据业务需要
  this.initSocket()
},
destroyed() {
  // 页面销毁关闭连接
  this.webSocket.close()
},