Q1:什么是WebSocket? A1: WebSocket是Html5提供的一种能在单个TCP连接上进行全双工通讯的协议，是HTTP协议中长连接的升级版。全双工通讯就是你能主动给我发消息，我也能主动给你发消息。
Q2:为什么要使用WebSocket? A2:使用WebSocket最大的好处就是客户端能主动向服务端发送消息，服务端也能主动向客户端发送消息，能最大程度的保证信息交换的实时性。
在WebSocket出现之前，客户端是怎么和服务端进行信息交换的呢?最常用的方式就是轮询。 WebSocket相对于轮询的优势很明显，WebSocket只需要建立一次连接，客户端和服务端只需要交换一次请求头和响应头就可以无数次交换信息。
create中调用initWebSocket; 创建=》各个流程=》onmessage中收到服务端推送过来的数据 注：可能有兼容性问题所以进行了判断是否支持websocket
initWebSocket() {
if (typeof (WebSocket) === 'undefined') {
this.$message.warning('当前浏览器不支持webSocket')
return false
}
const socketUrl = this.alarmSendWebSocketUrl
this.ws = new WebSocket(socketUrl)
this.ws.onopen = this.websocketOnOpen
this.ws.onmessage = this.websocketOnMessage
this.ws.onerror = this.webSocketOnError
this.ws.onclose = this.webSocketClose
},
websocketOnOpen() {
console.log('websocket连接成功')
},
websocketOnMessage(e) {
// console.log(e)
this.openAlarmDialog(e.data)
},
webSocketOnError(e) {
console.log('连接失败信息', e)
// this.initWebSocket()
},
webSocketClose(e) {
console.log('断开连接', e)
},
openAlarmDialog(data) {
this.realTimeStatus = '报警'
this.getCurrentAlarm()
this.showAlarmVisible = false
this.alarmList.push(JSON.parse(data))
this.showAlarmVisible = true
},
