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


相关文章
|
2月前
|
消息中间件 前端开发 JavaScript
【前端】websocket 讲解与项目中的使用
【前端】websocket 讲解与项目中的使用
|
JSON 前端开发 安全
【Java Web项目】基于WebSocket的Web聊天室
本项目的名称为Web聊天室,即类QQ群组聊天,多个用户可以在同一个群组收发消息进行聊天
【Java Web项目】基于WebSocket的Web聊天室
|
12月前
|
移动开发 网络协议 大数据
WebSocket全部内容及项目经验(一)
在websocket未出来之前,实现实时数据更新都是采用轮询http请求实现的,很明显这种方式有很大的缺陷,一条数据就需要发一次http请求。HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
|
12月前
|
前端开发 Java
在项目中使用WebSocket进行前后端通信
在项目中使用WebSocket进行前后端通信
255 0
|
设计模式 网络协议 算法
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
505 0
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
|
移动开发 网络协议 网络安全
即时通讯系列: WebSocket从原理到企业项目技术选型(2)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
196 0
|
JavaScript
在Vue项目中使用WebSocket技术
在Vue项目中使用WebSocket技术
279 0
在Vue项目中使用WebSocket技术
|
移动开发 网络协议 前端开发
websocket 项目启示录
websocket 项目启示录
176 0
websocket 项目启示录
|
前端开发 JavaScript Java
项目集成Websocket
之前接触的公安项目,里边包含大屏这一块,要求数据的实时性,考虑到这种场景,目前常见的方案有两种,轮询和Websocket通信。 轮询,其实就是定时发送请求,也就是普通的客户端与服务端通信过程,只不过是一种无限循环发送的方式,这样可以保证服务端一旦有最新消息,就可以被客户端获取。但是这种方式有两个明显的缺点,开销大并且很被动。Websocket的特点是具有一次握手,持久连接,以及主动推送,并且性能损耗较低,是解决上述场景的完美方式。
|
C# UED 数据格式
C# WebApi+Task+WebSocket实战项目演练(四)
一、课程介绍 本次分享课程属于《C#高级编程实战技能开发宝典课程系列》中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集、整理和完善此系列课程!本高级系列课程适合人群如下: 1、有一定的NET开发基础并对WebApi、Task、WebSocket技术有一定了解和认识。
1503 0