vue前后端实现WebSocket的连接，数据库变化后后端推送的消息在前端主动推送，同时实现页面的部分更新

实现目标：前后端通过WebSocket建立连接，当数据库发生变化后后端向前端推送消息，前端将展示后端推送的消息，同时实现页面部分数据的更新。

实现方法：

vue文件中：

data中：

wsUrl: 'xxxx/ws/xxxx/ws/dem/',

methods中：

// ---- WebSocket连接start ----
		initWebSocket() {
			let randomNum = Math.round(Math.random() * 100)
			//初始化weosocket
			const wsuri = 'ws://' + this.wsUrl + randomNum
			this.websock = new WebSocket(wsuri)
			this.websock.onmessage = this.websocketonmessage
			this.websock.onopen = this.websocketonopen
			this.websock.onerror = this.websocketonerror
			this.websock.onclose = this.websocketclose
		},
		// 连接建立之后执行send方法发送数据
		websocketonopen() {
		},
		//连接建立失败重连
		websocketonerror() {
			console.log('连接失败，重新连接')
			this.initWebSocket()
		},
		//数据接收
		websocketonmessage(e) {
			console.log(e)
			if (e.data != '连接成功') {
				this.msgShow = true // 提示信息的弹框展示，弹框样式本文不再赘述
				this.msg = JSON.parse(e.data).msg // 前端弹框展示的内容为后端返回的信息，具体内容具体分析
				this.date = JSON.parse(e.data).date // 前端弹框展示的内容为后端返回的信息，具体内容具体分析
				setTimeout(() => {
					this.getInfo() // 某某某接口的调用方法
					console.log('收到数据')
				}, 3000)
			}
		},
		//数据发送
		websocketsend(Data) {
			this.websock.send(Data)
		},
		//关闭 websocket
		websocketclose(e) {
			console.log('断开连接,重新连接', e)
		}

		// ---- WebSocket连接end ----

用后及时销毁：

script中：

destroyed() {
		// 离开路由之后断开websocket连接
		this.websock.close()
	},

几点说明：

1. setTimeout(() => {
                    this.getInfo() // 某某某接口的调用方法
                    console.log('收到数据')
                }, 3000)

此处代码为webSocket接收到信息后触发页面其他接口的调用方法，实现页面的局部更新，延迟3秒展示的原因为给数据库更新数据的时间，避免因数据库更新不及时导致页面的局部更新失败。

2.let randomNum = Math.round(Math.random() * 100)

该行代码为设置0-100之间的随机数，拼接在wsurl中，避免多人同时登录同一账号导致WebSocket的信息发送失败。

这样就实现了WebSocket连接，并可以同时对页面进行局部更新。