关于技术您现在的位置是:首页 > 关于技术

socket动态获取实时数据

头像 2019-05-14 16:10:09 88 人已围观 0 条评论

简介

平常我们获取后台数据是用ajax异步更新的,但是ajax是前端主动向后台发送请求,然后返回数据;要想获取实时数 […]

平常我们获取后台数据是用ajax异步更新的,但是ajax是前端主动向后台发送请求,然后返回数据;要想获取实时数据就需要用websocket与后台建立连接,然后由后台主动推送数据到前端。

二者的区别是,ajax是前端主动发送请求获取数据;socket是后端主动推送数据给前端。

我们常用的ajax这里就不介绍了,记录一下websocket的简单用法。

// 判断浏览器是否支持websocket
if (typeof (WebSocket) == "undefined") {
    console.log("遗憾:您的浏览器不支持WebSocket");
  } else {
    console.log("恭喜:您的浏览器支持WebSocket");
    // 实例化WebSocket对象
    // 指定要连接的服务器地址与端口建立连接
    // 注意ws、wss使用不同的端口。使用自签名的证书测试,
    // 无法使用wss,浏览器打开WebSocket时报错
    // ws对应http、wss对应https。
   // url是与后台建立连接的接口
   var url = "ws://localhost:9001/......"; 
    socket = new WebSocket(url);
    // 连接打开事件
    socket.onopen = function() {
      console.log("Socket 已打开");
      socket.send("消息发送测试(From Client)");
    };
    // 收到消息事件
    socket.onmessage = function(msg) {
      console.log(msg); // msg为后端返回的数据
      // 前端在这里可以对返回的数据做渲染
    };
    // 连接关闭事件
    socket.onclose = function() {
      console.log("Socket已关闭");
    };
    // 发生了错误事件
    socket.onerror = function() {
      console.log("Socket发生了错误");
    }
  }

建立socket连接后,只要后台有数据更新,前端无需主动操作,会自动渲染返回的数据;基于此,我们可以将socket用到监控实时数据的地方,例如,实时刷新的曲线图。

以上,是websocket的最基础的用法,更深层次的用法及作用待挖掘,我们,加油!

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号