vue使用websocket概念及示例
短信预约 -IT技能 免费直播动态提醒
概念部分：
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的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
