vue中使⽤socket连接后台
1、需求背景
  ⼯程车巡检，实时发送巡检位置信息、现场状况到服务器，页⾯实时显⽰⼯程车位置以及状况信息
2、VUE中使⽤socket建⽴实时连接
3、mounted⽣命周期中初始化连接websocket和socket
mounted () {this.initWebSocket()
},
4、socket连接⽅法
/**
* 建⽴socket连接，调⽤时间：
* 1.⾸次进⼊页⾯，如果不是查看记录，请求出来初始数据后，建⽴socket连接
* 2.调⽤数据库查询完毕后
* */
initWebSocket() { //初始化weosocket
const wsuri = 'ws://121.40.165.18:8800/'
this.websock = new WebSocket(wsuri)
ssage = this.websocketonmessage
pen = this.websocketonopen
r = this.websocketonerror
lose = this.websocketclose
},
websocketonopen() { //连接建⽴之后执⾏send⽅法发送数据
let actions = {'tags': ['ypt/leak/textplantrecord/getlist'],'machineid':'18279'}
this.websocketsend(JSON.stringify(actions))
},
/**
* 连接建⽴失败，断开连接
* 1.查询⼀次数据库数据
* 2.查询完后再次建⽴socket连接
* */
websocketonerror() {//连接建⽴失败重连
let _this = this
console.log('连接建⽴失败')
/
/lose()
this.initWebSocket()
},
websocketonmessage(e) { //数据接收
//const redata = JSON.parse(e.data)
console.log(e.data)
this.dealF2DataList(redata)
},
websocketsend(Data) {//数据发送
this.websock.send(Data)
},
websocketclose(e) {  //关闭
console.log('断开连接', e)
},
5、连接状态
6、数据输出（在websocketonmessage⾥调⽤数据处理⽅法）
7、WebSocket 在线测试（）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。