在vue中使用WebSocket建立长连接
WebSocket 属性ws.readyState ( 只读属性 readyState 表示连接状态)0:表示连接尚未建立。1:表示连接已建立,可以进行通信。2:表示连接正在进行关闭。3:表示连接已经关闭或者连接不能打开。WebSocket方法ws.send();//使用连接发送数据ws.close();//关闭socket链接例:<script>export default {dat
·
WebSocket 属性
ws.readyState ( 只读属性 readyState 表示连接状态)
0:表示连接尚未建立。
1:表示连接已建立,可以进行通信。
2:表示连接正在进行关闭。
3:表示连接已经关闭或者连接不能打开。
WebSocket方法
ws.send(); //使用连接发送数据
ws.close(); //关闭socket链接
例:
<script>
export default {
data(){
return {
datas:[]
}
},
mounted() {
this.initWebSocket()
},
destroyed() {
//页面销毁时关闭长连接
this.websocketOnclose();
},
methods:{
initWebSocket(){
const wsuri="ws://127.0.0.1:8088/websocket/threadsocket";//ws地址
this.websock = new WebSocket(wsuri);
this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketOnerror;
this.websock.onmessage = this.websocketOnmessage;
this.websock.onclose = this.websocketOnclose;
},
// 客户端和服务端建立链接时触发,此时可向服务端传递参数
websocketOnopen(){
this.websock.send('crew'); //传递参数
},
// 客户端收到服务端发来的消息时,会触发onmessage事件,参数res.data中包含server传输过来的数据
websocketOnmessage(res){
//接收到消息的回调方法,我这里是处理返回数据
if(jsons.data){
var maparr = JSON.parse(res.data)
this.datas=maparr
}
// console.log(this.arrisrun)s
},
//如果出现连接,处理,接收,发送数据失败的时候就会触发onerror事件
websocketOnerror(){
console.log('连接失败')
},
//客户端收到服务端发送的关闭连接的请求时,触发onclose事件
websocketOnclose() {
this.websock.close()
console.log('关闭连接')
},
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)