前端和后端的交互模式最常见的就是前端发送数据请求,从后端拿到数据后展示到页面中,如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向前端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等,下面封装了websocket,可以直接使用,然后vue.config.js配置websocket代理即可:
// 代理配置/ws/order根据你自己接口来配置
'/ws/order': {
target: 'http://10.10.10.240:7888',
ws: true,
secure: false,
changeOrigin: true
},
下面写的方法,新建wsMixin.js文件,直接在vue页面混合使用即可
import { default as ReconnectingWebSocket } from '@/assets/js/reconnecting-websocket.min.js'
const wsMixin = {
data() {
return {
websocket: null
}
},
beforeDestroy() {
// 关闭当前连接
this.websocket.close()
},
methods: {
initWebSocket(ip, path) {
const wsUrl = (window.location.protocol === 'https:' ? `wss://${ip}` : `ws://${ip}`) + path
// this.websocket = new WebSocket(wsUrl)
// ReconnectingWebSocket断开链接3秒自动连接
this.websocket= new ReconnectingWebSocket(wsUrl, null, {
debug: true,
reconnectInterval: 3000
})
this.websocket.onmessage = this.wsOnmessage
this.websocket.onopen = this.wsOnopen
this.websocket.onerror = this.wsOnerror
this.websocket.onclose = this.wsClose
},
// 客户端接收到服务端数据的回调
wsOnmessage(res) {
const data = JSON.parse(res.data)
},
// 连接成功后的回调
wsOnopen() {
console.log('连接成功')
},
// 连接失败后的回调
wsOnerror() {},
// 连接关闭后的回调
wsClose() {},
// 向服务器发送数据
wsSend(data) {
this.websocket.send(JSON.stringify(data))
}
}
}
export default wsMixin
在src/assets/js/reconnecting-websocket.min.js目录新增JS文件为reconnecting-websocket.min.js如下:
!(function (a, b) {
'function' == typeof define && define.amd
? define([], b)
: 'undefined' != typeof module && module.exports
? (module.exports = b())
: (a.ReconnectingWebSocket = b())
})(this, function () {
function a(b, c, d) {
function l(a, b) {
var c = document.createEvent('CustomEvent')
return c.initCustomEvent(a, !1, !1, b), c
}
var e = {
debug: !1,
automaticOpen: !0,
reconnectInterval: 1e3,
maxReconnectInterval: 3e4,
reconnectDecay: 1.5,
timeoutInterval: 2e3
}
d || (d = {})
for (var f in e) this[f] = 'undefined' != typeof d[f] ? d[f] : e[f]
;(this.url = b), (this.reconnectAttempts = 0), (this.readyState = WebSocket.CONNECTING), (this.protocol = null)
var h,
g = this,
i = !1,
j = !1,
k = document.createElement('div')
k.addEventListener('open', function (a) {
g.onopen(a)
}),
k.addEventListener('close', function (a) {
g.onclose(a)
}),
k.addEventListener('connecting', function (a) {
g.onconnecting(a)
}),
k.addEventListener('message', function (a) {
g.onmessage(a)
}),
k.addEventListener('error', function (a) {
g.onerror(a)
}),
(this.addEventListener = k.addEventListener.bind(k)),
(this.removeEventListener = k.removeEventListener.bind(k)),
(this.dispatchEvent = k.dispatchEvent.bind(k)),
(this.open = function (b) {
;(h = new WebSocket(g.url, c || [])),
b || k.dispatchEvent(l('connecting')),
(g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'attempt-connect', g.url)
var d = h,
e = setTimeout(function () {
;(g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'connection-timeout', g.url),
(j = !0),
d.close(),
(j = !1)
}, g.timeoutInterval)
;(h.onopen = function () {
clearTimeout(e),
(g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'onopen', g.url),
(g.protocol = h.protocol),
(g.readyState = WebSocket.OPEN),
(g.reconnectAttempts = 0)
var d = l('open')
;(d.isReconnect = b), (b = !1), k.dispatchEvent(d)
}),
(h.onclose = function (c) {
if ((clearTimeout(e), (h = null), i)) (g.readyState = WebSocket.CLOSED), k.dispatchEvent(l('close'))
else {
g.readyState = WebSocket.CONNECTING
var d = l('connecting')
;(d.code = c.code),
(d.reason = c.reason),
(d.wasClean = c.wasClean),
k.dispatchEvent(d),
b ||
j ||
((g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'onclose', g.url),
k.dispatchEvent(l('close')))
var e = g.reconnectInterval * Math.pow(g.reconnectDecay, g.reconnectAttempts)
setTimeout(
function () {
g.reconnectAttempts++, g.open(!0)
},
e > g.maxReconnectInterval ? g.maxReconnectInterval : e
)
}
}),
(h.onmessage = function (b) {
;(g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'onmessage', g.url, b.data)
var c = l('message')
;(c.data = b.data), k.dispatchEvent(c)
}),
(h.onerror = function (b) {
;(g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'onerror', g.url, b),
k.dispatchEvent(l('error'))
})
}),
1 == this.automaticOpen && this.open(!1),
(this.send = function (b) {
if (h) return (g.debug || a.debugAll) && console.debug('ReconnectingWebSocket', 'send', g.url, b), h.send(b)
throw 'INVALID_STATE_ERR : Pausing to reconnect websocket'
}),
(this.close = function (a, b) {
'undefined' == typeof a && (a = 1e3), (i = !0), h && h.close(a, b)
}),
(this.refresh = function () {
h && h.close()
})
}
return (
(a.prototype.onopen = function () {}),
(a.prototype.onclose = function () {}),
(a.prototype.onconnecting = function () {}),
(a.prototype.onmessage = function () {}),
(a.prototype.onerror = function () {}),
(a.debugAll = !1),
(a.CONNECTING = WebSocket.CONNECTING),
(a.OPEN = WebSocket.OPEN),
(a.CLOSING = WebSocket.CLOSING),
(a.CLOSED = WebSocket.CLOSED),
a
)
})