<template>
|
<!-- <button v-on:click="send">测试发送</button> -->
|
|
<div>
|
<button @click="send()">测试发送</button>
|
<button @click="ttt()">测试发送</button>
|
|
</div>
|
</template>
|
|
<script>
|
let socket;
|
export default {
|
name: "talkvue",
|
|
data() {
|
return {
|
messagepack: {
|
data: { taskname: "" }
|
},
|
qqqq: {},
|
queryInfo: {
|
data: "1",
|
pageSize: 10
|
},
|
};
|
},
|
created() {
|
this.init();
|
|
},
|
methods:
|
{
|
init() {
|
let viewname = "talkvue";
|
|
if (typeof (WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
} else {
|
//console.log("您的浏览器支持WebSocket");
|
|
let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
|
if (socket != null) {
|
socket.close();
|
socket = null;
|
}
|
// 开启一个websocket服务
|
socket = new WebSocket(socketUrl);
|
//打开事件
|
socket.onopen = function () {
|
console.log("websocket已打开");
|
};
|
// 浏览器端收消息，获得从服务端发送过来的文本消息
|
socket.onmessage = function (msg) {
|
console.log("收到数据====" + msg.data)
|
|
// 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
|
this.qqqq = JSON.parse(msg.data);
|
console.log(this.qqqq);
|
};
|
//关闭事件
|
socket.onclose = function () {
|
console.log("websocket已关闭");
|
};
|
//发生了错误事件
|
socket.onerror = function () {
|
console.log("websocket发生了错误");
|
}
|
}
|
},
|
send() {
|
this.messagepack.data = { taskname: "前端到后台" };
|
socket?.send(JSON.stringify(this.messagepack)); // 将组装好的json发送给服务端，由服务端进行转发
|
},
|
ttt() {
|
console.log(this.qqqq)
|
},
|
|
}
|
}
|
</script>
|
