五.websocket的属性:
Socket.readyState: 只读属性 readyState 表示连接状态。
Socket.bufferedAmount: 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
下面的代码展示一个使用bufferedAmount 特性每秒发送更新的例子。如果网络无法承受这一速率,它会相应作出调整。
var THRESHOLD = 10240; var ws = new WebSocket("ws://echo.websocket.org/updates"); ws.onopen = function() { setInterval( function(){ if (ws.bufferedAmount < THRESHOLD) { ws.send(getApplicationState()); } }, 1000); }
对于限制应用向服务器发送数据的速率,从而避免网络饱和,bufferedAmount很有用。
六.websocket和socket的区别(面试常问)
WebSocket:WebSocket协议是基于TCP的一种新的网络协议,和http协议一样属于应用层协议,是一种让客户端和服务器之间能进行双向实时通信的技术。
Socket:Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。
七.websocket在项目中的使用
在HTML中的使用:
<body> <script> let url = "ws://ip+端口号+通道"; // "ws:// 192.168.135.30:8000/CHANNL" // let url = "wss://ip+端口号+通道"; // "wss:// 192.168.135.30:8000/CHANNL" 携带加密证书 let ws = new WebSocket(url); ws.onopen = function (e) { console.log("建立连接"); ws.send(); // 前端向后端推送数据 }; ws.onmessage = function (e) { console.log("后端推送给前端的实时数据:", e); // e就是接收到的数据 }; ws.onerror = function (e) { console.log("WebSocket Error:", e); }; ws.onclose = function (e) { console.log("关闭连接", e); }; </script> </body>
在vue项目中的使用:
data () { return { wsurl: "process.env.NODE_ENV === 'development'" ? "ws://ip+端口号+通道" : "生产环境url", // "ws:// 192.168.135.30:8000/CHANNL" }; }, mounted () { this.initWebsocket(); }, methods: { initWebsocket () { let ws = new WebSocket(this.wsurl); ws.onopen = function (e) { console.log("建立连接"); ws.send(); // 前端向后端推送数据 }; ws.onmessage = function (e) { console.log("后端推送给前端的实时数据:", e); // e就是接收到的数据 }; ws.onerror = function (e) { console.log("WebSocket Error:", e); }; ws.onclose = function (e) { console.log("断开连接", e); // 断开重连 this.initWebsocket(); }; } },