概念部分:
1,WebSocket 是 HTML5 提供的 TCP 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。
2,浏览器想服务器发送请求,建立连接之后,可通过send()方法想服务器发送数据,并通过message事件接受服务器返回的数据。
使用示例
<script>
export default {
mounted() {
this.connectWebsocket();
},
methods: {
connectWebsocket() {
let websocket;
if (typeof WebSocket === "undefined") {
console.log("您的浏览器不支持WebSocket");
return;
} else {
let protocol = "ws";
let url = "";
if (window.localtion.protocol == "https:") {
protocol = "wss";
}
// `${protocol}://window.location.host/echo`;
url = `${protocol}://localhost:9998/echo`;
// 打开一个websocket
websocket = new WebSocket(url);
// 建立连接
websocket.onopen = () => {
// 发送数据
websocket.send("发送数据");
console.log("websocket发送数据中");
};
// 客户端接收服务端返回的数据
websocket.onmessage = evt => {
console.log("websocket返回的数据:", evt);
};
// 发生错误时
websocket.onerror = evt => {
console.log("websocket错误:", evt);
};
// 关闭连接
websocket.onclose = evt => {
console.log("websocket关闭:", evt);
};
}
}
}
};
</script>
以上就是vue使用websocket概念及示例的详细内容,更多关于vue使用websocket的资料请关注编程网其它相关文章!