vue中websocket使用（客户端）

1、了解webSocket：阮一峰-webSocket教程

2、使用webSocket的方式：

插件：socket.io
nodejs库：ws

3、组件中使用的代码：

// 可以直接写在App.vue中，数据用vuex存储。我这边是直接写在某个父组件中，因为有些组件不需要用websocket
<template>
    <div class="main">
      <div class="home">
      <!-- 组件A -->
      <A :aData="aData"/>
       <!-- 组件B -->
      <B :bData="bData"/>
      <!--组件C -->
      <C :cData="cData"/>
    </div>
  </div>
</template>

<script>
// 引入 A 组件
import A from "./a.vue"
// 引入 B 组件
import B from "./b.vue"
// 引入 C 组件
import C from "./c.vue"
// 引入请求对象(自己封装的)
import request from '@/api/request'

export default {
  name: "HomeIndex",
  components: {
    A,
    B,
    C
  },
  data() {
    return {
      ws_heart: null, // 心跳监测对象
      ws: null, // WebSocket实例
      connectTimer: null, // 重连对象
      aData: {}, // a组件需要的数据
      bData: {}, // b组件需要的数据
      cData: {}, // c组件需要的数据
    }
  },
  created() {
    this.wsInit()
  },
  // 离开路由之后断开websocket连接
  // destroyed() {
  //   this.ws.close()
  // },
  methods: {
    // 初始化ws
    wsInit() {
      let wsUrl = "ws://localhost:8000"
      //先判断浏览器是否支持WebSocket
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 判断 WebSocket是否已经建立连接，避免重复连接
        this.ws && this.ws.close()
        // 新增一个websocket实例，并且建立连接
        this.ws = new WebSocket(wsUrl)
        // 连接成功后的回调函数
        this.ws.onopen = this.handleWsOpen
        // 收到服务器数据后的回调函数
        this.ws.onmessage = this.handleWsMessage
        // 连接关闭后的回调函数
        this.ws.onclose = this.handleReconnectWs
        // 报错时的回调函数（网络断开，网络不稳定， 用户电脑休眠）
        this.ws.onerror = this.handleReconnectWs
      }
    },
    // ws建立连接
    handleWsOpen() {
      console.log('websocket已连接，可以进行请求了');
      // 开启心跳监测
      this.handleHeartListen()
      // 发送请求
      this.init()
    },
    // ws拿到服务器（后端接口）或者客户端（心跳监测或者自测）发送的数据
    handleWsMessage(msg) {
      console.log('onMessage数据-----' + msg)
      // 如果因为一些异常断开了连接，我们是不会感应到的，所以开启心跳监测
      this.handleHeartListen()
      // 拿到的数据
      let result = msg.data
      if (msg.data instanceof Blob) {
        const reader = new FileReader();
        reader.readAsText(msg.data, "UTF-8");
        reader.onload = (e) => {
          result = JSON.parse(e.currentTarget.result)
          console.log('???',result)
          /**
          * 如果拿到的不是客户端自己发送的数据，那么说明就是后端有新数据进行更新，所以需要重新请求
          * 或者和后端约定一个固定的数据，如果是这个数据，则不需要重新请求
          */
          if(result !== 'self') {
            this.init()
          }
        }
      } else {
        console.log('不是blob',result)
        /**
	      * 如果拿到的不是客户端自己发送的数据，那么说明就是后端有新数据进行更新，所以需要重新请求
	      * 或者和后端约定一个固定的数据，如果是这个数据，则不需要重新请求
        */
        if(result !== 'self') {
          this.init()
        }
      }
    },
    // WebSocket的心跳监测，20s进行一次数据的发送，查看是否断开连接(需求是2s...我自测用的20s)
    handleHeartListen() {
      clearInterval(this.ws_heart)
      this.ws_heart = setInterval(() => {
      	/**
	      * 自己定义的数据或者和后端约定一个固定的数据
        */
        this.ws.send(JSON.stringify("self"));
      }, 20000)
    },
    // 重连ws
    handleReconnectWs() {
      this.connectTimer && clearTimeout(this.connectTimer);
      this.connectTimer = setTimeout(() => {
        console.log('重连',this.ws.readyState)
        // 接已经关闭，或者打开连接失败
        if (this.ws.readyState === 3) {
          this.wsInit()
        }
      }, 20000) // 需求是2s...我自测用的20s
    },
    // 初始化所有请求
    init() {
      // 获取A组件的数据
      this.getAdata()
      // 获取B组件的数据
      this.getBdata()
      // 获取C组件的数据
      this.getCdata()
    },
    // 获取A组件的数据
    getAdata() {
      // TODOS: 请求数据，将拿到的数据赋值给aData
    },
    // 获取B组件的数据
    getBdata() {
      // TODOS: 请求数据，将拿到的数据赋值给bData
    },
    // 获取C组件的数据
    getCdata() {
      // TODOS: 请求数据，将拿到的数据赋值给cData
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

4、webSocket中监听客户端数据，收到[object Blob]类型的解决办法：

1）问题截图：

2）解决办法：

方法一：更改package.json中ws的版本号，重新安装ws，重启项目

方法二：对当前的类型进行判断：

this.ws.onmessage = (msg) => {
  // 进行心跳监测，如果有新数据，则重新进行请求
  console.log('新消息' + msg.data)
  if (msg.data instanceof Blob) {
    const reader = new FileReader();
    reader.readAsText(msg.data, "UTF-8");
    reader.onload = (e) => {
      console.log('websocked收到', JSON.parse(e.currentTarget.result));
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

5、自己搭建服务器进行测试，步骤在资源中自行下载。

步骤的地址