目录概念部分:使用示例概念部分: 1,websocket 是 HTML5 提供的 tcp 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。 2
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的资料请关注编程网其它相关文章!
--结束END--
本文标题: vue使用websocket概念及示例
本文链接: https://www.lsjlt.com/news/168140.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0