/** * WebSocket测试 */ new Vue({ el: '#pageContainer', data: { url: 'ws://121.40.165.18:8800', msg: '', connBtn: false, closeBtn: true, results: [], websock: null, }, watch: {}, mounted: function () { this.$refs.url.focus(); }, destroyed() { this.websock.close() //离开之后断开websocket连接 }, methods: { initWebSocket() { //初始化weosocket this.results.push(this.now() + "连接到:" + this.url); console.log(this.now() + "连接到:" + this.url) this.websock = new WebSocket(this.url); this.websock.onmessage = this.websocketOnMessage; this.websock.onopen = this.websocketOnOpen; this.websock.onerror = this.websocketOnError; this.websock.onclose = this.websocketOnClose; }, websocketSend() {//数据发送 this.websock.send(this.msg); this.results.push(this.now() + "发送:" + this.msg); console.log(this.now() + "发送:" + this.msg) this.msg = ''; }, websocketClose() {//数据发送 this.results.push(this.now() + "关闭连接"); console.log(this.now() + "关闭连接") this.websock.close(); }, cleanupMsg() { this.results = []; }, websocketOnOpen(e) { //连接建立之后执行send方法发送数据 this.results.push(this.now() + "连接成功"); console.log(this.now() + "连接成功!", e) this.connBtn = true this.closeBtn = false }, websocketOnError(e) {//连接建立失败重连 this.results.push(this.now() + "连接失败,请检查连接地址是否正确或服务器是否正常"); console.log(this.now() + "连接失败,请检查连接地址是否正确或服务器是否正常!", e) this.connBtn = false this.closeBtn = true }, websocketOnMessage(msg) { //数据接收 this.results.push(this.now() + "收到消息:" + msg.data); console.log(this.now() + "收到消息:", msg) }, websocketOnClose(e) { //关闭 console.log(this.now() + "连接断开!", e) this.connBtn = false this.closeBtn = true }, now() { let date = new Date(); return f0(date.getHours()) + ":" + f0(date.getMinutes()) + ":" + f0(date.getSeconds()) + " - "; } } }); function f0(i) { return (i < 10 ? '0' : '') + i }