WebSocket的使用以和原理

一.WebSocket的介绍

1. WebSocket是HTML5提供的一种在单个TCP连接进行的全双工通讯的协议。
2. WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就可以数据互相传输。
3. WebSocket最大的特带你介绍服务器可以主动向客服端推送消息，客服端也可以主动向服务器发送信息，是真正的双向平等对话。
4. WebSocket使得客服端和服务器之间的数据交换变得更加简单，允许服务端主动向客服端推送数据。只需要完成一次握手，两者就可以创建持久性的连接，并进行双向数据传输。

二.为什么要使用WebSocket

可能很多人会说有HTTP协议为什么要用这个，因为HTTP通信只能由客服端发起,HTTP协议做不到服务器主动向客服端推送信息。

三.WebSocket事件

四.WebSocket方法

五.WebSocket的使用

1.封装工具类在utils创建socket.js

1.  
   /**
2.  
   * @param { String } url WebSocket连接地址
3.  
   * @param { Object } heartbeatParams 心跳参数
4.  
   */
5.  
   export default class Socket {
6.  
   constructor (url, heartbeatParams = null) {
7.  
   if (typeof WebSocket === 'undefined') {
8.  
   console.warn('您的浏览器不支持websocket')
9.  
   } else {
10.  
    // 实例化socket
11.  
    const { host, protocol } = window.location
12.  
    const webSocketServe = `${protocol === 'https:' ? 'wss' : 'ws'}://${host}`
13.  
    this.socket = new WebSocket(webSocketServe url)
14.  
    this.open()
15.  
    this.error()
16.  
    this.heartbeatParams = heartbeatParams
17.  
    }
18.  
    }
19.  
     
20.  
    open () {
21.  
    this.socket.onopen = e => {
22.  
    console.log('websocket连接成功')
23.  
    if (e.target.readyState === 1) {
24.  
    this.startHeartBeat()
25.  
    }
26.  
    }
27.  
    }
28.  
     
29.  
    error () {
30.  
    this.socket.onerror = err => {
31.  
    console.error(err)
32.  
    }
33.  
    }
34.  
     
35.  
    close () {
36.  
    this.socket.onClose = e => {
37.  
    console.log('WebSocket已断开')
38.  
    }
39.  
    this.socket.close()
40.  
    }
41.  
     
42.  
    startHeartBeat () {
43.  
    setInterval(() => {
44.  
    const obj = {
45.  
    ...this.heartbeatParams,
46.  
    timestamp: Date.now()
47.  
    }
48.  
    this.socket.send(obj)
49.  
    }, 1800000)
50.  
    }
51.  
    }

2.再在api下创建一个webSocketRequest.js用于存放多个请求地址

1.  
   export const WebSocketApi = {
2.  
   web1: '地址.....', //这样的好处就是写多个导出
3.  
   .........
4.  
   }

3.在需要的页面导入

1.  
   // 使用
2.  
   initSocket() {
3.  
   const socketInstance = new Socket(
4.  
   WebSocketApi.web1,
5.  
   "heart"
6.  
   );
7.  
   const { socket } = socketInstance;
8.  
   socket.onmessage = (e) => {
9.  
   const eventInfoList = JSON.parse(e.data);
10.  
    };
11.  
    this.$once("hook:beforeDestroy", () => { //页面销毁之前关闭
12.  
    socket.close();
13.  
    });
14.  
    },

这篇好文章是转载于：学新通技术网