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秒后,执行心跳检测,看是不是断了。
    };
    // ---- ...
    // socket
    ws.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秒处理一次接收数据等)

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


版权声明:本文为qq_46380656原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。