vue实时自动更新数据_vue websocket页面实时刷新方法介绍
在vue项目开发过程中，有时候会需要使用到数据的实时更新功能，比较常见的场景有：实时能看到用户的登录状态以及所在位置、实时图表等。
当然，在数据量不大的情况下，我们用定时器就可以轻松搞定。但是如果数据量非常大，用定时器的话页面很快就会被卡死。
这个时候我们就推荐在vue使用websocket来解决这个问题。
下面给大家分享一份vue使用websocket实现页面实时刷新更新数据的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Websocket demos</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="msg" @keyup.enter="echo">
<button @click="echo">发送</button>
</div>
<script>
/* global Vue, WebSocket */
var ws = null
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
echo: function () {
if (!this.msg) return
console.log('WebSocket发送消息: ' + this.msg)
ws.send(this.msg)
},
initWebSocket: function (params) {
// ws = new WebSocket('wss://echo.websocket.org/')
ws = new WebSocket("ws://X.X.X.X:9093/websocket");
// var ws = new WebSocket("ws://localhost:8096/websocket/111405");
ws.onopen = function (e) {
console.log('WebSocket已经打开: ')
console.log(e)
}
ws.onmessage = function (e) {
console.log('WebSocket收到消息: ' + e.data)
}
ws.onclose = function (e) {
console.log('WebSocket关闭: ')
console.log(e)
}
ws.onerror = function (e) {
console.log('WebSocket发生错误: ')
console.log(e)
}
}
},
created: function () {
this.initWebSocket()
}
})
</script>
</body>
</html>有使用需求的可以试试以上的演示代码。
当然，我们还有更方便快捷的在vue中使用websocket的方法，那就是使用GoEasy提供的服务。
目前GoEasy不仅支持vue前端集成websocket服务，同时提供 php、java、python等多种服务端语言的支持，更多在vue中使用websocket的教程，可以看这里：vue websocket消息推送