WebSocket全部内容及项目经验(二)

简介: Socket.readyState: 只读属性 readyState 表示连接状态。Socket.bufferedAmount: 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。下面的代码展示一个使用bufferedAmount 特性每秒发送更新的例子。如果网络无法承受这一速率,它会相应作出调整。

五.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();
            };
        }
    },


相关文章
|
28天前
|
缓存 JavaScript 前端开发
为开源项目 go-gin-api 增加 WebSocket 模块
为开源项目 go-gin-api 增加 WebSocket 模块
25 2
|
7天前
|
Linux Python
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https
|
2月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
【7月更文挑战第18天】在Python的Flask框架中,结合Flask-SocketIO库可轻松实现WebSocket实时通信,促进前后端分离项目中的高效交互。示例展示了一个简单的聊天应用:Flask路由渲染HTML,客户端通过Socket.IO库连接服务器,发送消息并监听广播。此方法支持多种实时通信协议,适应不同环境,提供流畅的实时体验。
60 3
|
4月前
|
消息中间件 前端开发 JavaScript
【前端】websocket 讲解与项目中的使用
【前端】websocket 讲解与项目中的使用
|
JSON 前端开发 安全
【Java Web项目】基于WebSocket的Web聊天室
本项目的名称为Web聊天室,即类QQ群组聊天,多个用户可以在同一个群组收发消息进行聊天
【Java Web项目】基于WebSocket的Web聊天室
|
移动开发 网络协议 大数据
WebSocket全部内容及项目经验(一)
在websocket未出来之前,实现实时数据更新都是采用轮询http请求实现的,很明显这种方式有很大的缺陷,一条数据就需要发一次http请求。HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
|
前端开发 Java
在项目中使用WebSocket进行前后端通信
在项目中使用WebSocket进行前后端通信
286 0
|
设计模式 网络协议 算法
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
547 0
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
|
移动开发 网络协议 网络安全
即时通讯系列: WebSocket从原理到企业项目技术选型(2)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
209 0
|
JavaScript
在Vue项目中使用WebSocket技术
在Vue项目中使用WebSocket技术
295 0
在Vue项目中使用WebSocket技术
下一篇
云函数