概念部分:
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的资料请关注阿兔在线工具其它相关文章!