Vue中如何实现WebSocket长连接功能并应用示例？

本文共计348个文字，预计阅读时间需要2分钟。

目录+概念部分：+ 使用示例+概念部分：

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 == "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的资料请关注易盾网络其它相关文章！