js中websocket基本使用及数据量过大或推送频率过快等基本问题

WebSocket的定义

WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需完成一次握手，两者之间就可以创建一个持久性的TCP连接，此后服务器和客户端通过此TCP连接进行双向实时通信。

WebSocket的优点

很多网站为了实现数据推送，所用的技术都是ajax轮询。轮询是在特定的时间间隔，由浏览器主动发起请求，将服务器的数据拉回来。轮询需要不断的向服务器发送请求，会占用很多带宽和服务器资源。WebSocket建立TCP连接后，服务器可以主动给客户端传递数据，能够更好的节省服务器资源和带宽，实现更实时的数据通讯。

WebSocket的实例

function webSocket(){if("WebSocket" in window){console.log("您的浏览器支持WebSocket");var ws = new WebSocket("ws://localhost:8080"); //创建WebSocket连接//...}else{console.log("您的浏览器不支持WebSocket");}
}

WebSocket的事件

客户端支持WebSocket的浏览器中，在创建socket后，可以通过onopen、onmessage、onclose和onerror四个事件对socket进行响应。WebSocket的所有操作都是采用事件的方式触发的，这样不会阻塞UI，是的UI有更快的响应时间，有更好的用户体验。

浏览器通过Javascript向服务器发出建立WebSocket连接的请求，连接建立后，客户端和服务器就可以通过TCP连接直接交换数据。当你获取WebSocket连接后，可以通多send()方法向服务器发送数据，可以通过onmessage事件接收服务器返回的数据。

 var ws = new WebSocket("ws://localhost:8080"); //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头ws.onopen = function(){//当WebSocket创建成功时，触发onopen事件console.log("open");ws.send("hello"); //将消息发送到服务端}ws.onmessage = function(e){//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据console.log(e.data);}ws.onclose = function(e){//当客户端收到服务端发送的关闭连接请求时，触发onclose事件console.log("close");}ws.onerror = function(e){//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件console.log(error);}

socket 心跳

//心跳检测  .所谓的心跳检测，就是隔一段时间向服务器仅限一次数据访问，因为长时间不使用会导致ws自动断开，// 一般是间隔90秒内无操作会自动断开，因此，在间隔时间内进行一次数据访问，以防止ws断开即可，//这里选择30秒，倒计时30秒内无操作则进行一次访问，有操作则重置计时器////封装为键值对的形式，成为js对象，与json很相似var heartCheck = {timeout: 30000,//30秒timeoutObj: null,reset: function () {//接收成功一次推送，就将心跳检测的倒计时重置为30秒clearTimeout(this.timeoutObj);//重置倒计时this.start();},start: function () {//启动心跳检测机制，设置倒计时30秒一次this.timeoutObj = setTimeout(function () {var message = {"type": "t10010","service": "发送维持连接消息！"};console.log("发送维持连接消息！");ws.send(JSON.stringify(message));//启动心跳}, this.timeout)}//onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息，// 就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。};// ---- ...// socketws.onopen = function () {//当WebSocket创建成功时，触发onopen事件console.log("open");ws.send("hello"); //将消息发送到服务端heartCheck.start();//连接成功之后启动心跳检测机制}ws.onmessage = function (e) {//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据console.log(e.data);//接收一次后台推送的消息，即进行一次心跳检测重置heartCheck.reset();}

问题

处理socket接口推送的数据流太大，导致浏览器崩溃

大数据量传输时的实时数据不是js的强项，且渲染更消耗内存，引起浏览器内核崩溃。

服务端推送频率过快，页面接收渲染跟不上，可与服务端协商放缓推送频率或摒弃掉短频快的数据（例如5秒处理一次接收数据等）

如果只是数据量较大可尝试将数据分页渲染或瀑布流渲染，可减轻一定压力

js中websocket基本使用及数据量过大或推送频率过快等基本问题相关推荐

java switch中标签重复_java程序怎样把id相同的记录挑出来，分别存到不同的文件中，除了switch case,数据量很大，id种类很多。...
展开全部下边是我的实现. hawon1 的实现也是正确的,e69da5e6ba903231313335323631343130323136353331333332613761 我与它的不同是没有频 ...
MyBatis中使用流式查询避免数据量过大导致OOM
欢迎关注方志朋的博客,回复"666"获面试宝典今天mybatis查询数据库中大量的数据,程序抛出: java.lang.OutOfMemoryError: Java heap s ...
【MySQL】根据数据表中日期字段查询某个月每一天的数据量？查询数据表中所有日期每天的数据量？近三天每天数据量？
前提这个table有一个日期字段date_time之类的 1.根据数据表中日期字段查询某个月每一天的数据量如果要获取8月的数据,可以这么写: SELECT count(*), DATE_FORMAT ...
ES 在数据量很大的情况下（数十亿级别）如何提高查询效率？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | advanced-java 来源 | http ...
第9条：用生成器表达式来改写数据量较大的列表推导式
核心知识点: (1)当输入的数据量较大时,列表推导可能会因为占用太多内存而出问题. (2)由生成器表达式所返回的迭代器,可以逐次产生输出值,从而避免内存用量问题. (3)把某个生成器表达式所返回的迭代 ...
bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
bootstrap-table-treegrid数据量较大时渲染太久了森姐姐 2019-10-23 16:48:51 2260 收藏 2 分类专栏: 遇到的问题最后发布:2019-10-23 16 ...
es 查询语法_ES 在数据量很大的情况下（数十亿级别）如何提高查询效率啊？
点击上方☝SpringForAll社区轻松关注! 及时获取有趣有料的技术文章本文来源:http://8rr.co/GFLb 面试官心理分析这个问题是肯定要问的,说白了,就是看你有没有实际干过 e ...
mysql查看比较大的数据表_mysql 如何查看哪些表数据量比较大
数据库中有几十上百张表,那么哪些表的数据量比较大呢,总不能一个表一个表的去查询吧,在mysql中也有类似于oracle的数据字典表,只不过mysql没有oracle记录的那么多和详细,但也足够我们查询 ...
ElasticSearch面试 - es 在数据量很大的情况下如何提高查询效率啊？
面试题 es 在数据量很大的情况下(数十亿级别)如何提高查询效率啊? 面试官心理分析这个问题是肯定要问的,说白了,就是看你有没有实际干过 es,因为啥?其实 es 性能并没有你想象中那么好的.很多时 ...