zoukankan      html  css  js  c++  java
  • vue项目使用websocket实现数据实时推送

    写了一个关于工程的项目,关于工地数据的实时监控 

    1.后端要先写好数据,将数据传递给前端

    2.在前端页面:

    $(function(){ 
     var websocket = null;
       //判断当前浏览器是否支持WebSocket
       if ('WebSocket' in window) {
           websocket = new WebSocket("ws://localhost:9999/guanXiangCamera/websocket"); // 后台给的地址
      // 这里会传递一些数据,
       }else {
           alert('当前浏览器 Not support websocket')
       }
       //连接发生错误的回调方法
       websocket.onerror = function () {
           setMessageInnerHTML("WebSocket连接发生错误");
       };
       //连接成功建立的回调方法
       websocket.onopen = function () {
           //setMessageInnerHTML("WebSocket连接成功");
       }
       //接收到消息的回调方法
       websocket.onmessage = function (event) {
           setMessageInnerHTML(event.data);
       }
       //连接关闭的回调方法
       websocket.onclose = function () {
           //setMessageInnerHTML("WebSocket连接关闭");
       }
       //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
       window.onbeforeunload = function () {
           //closeWebSocket();
       }
       //将消息显示在网页上
       function setMessageInnerHTML(innerHTML) {
           document.getElementById('message').innerHTML += innerHTML + '<br/>';
       }
       //关闭WebSocket连接
       function closeWebSocket() {
           websocket.close();
       }
       //发送消息
       function send() {
           var message = "测试一下,看能不能发!"
           websocket.send(message);
       }
    }

    注意:有写要求是一进去就要请求websocket返回数据的,或者是查看时再请求接口返回数据的。其实如果页面只有一个请求还好,你离开页面或者关闭时websocket接口并没有断开,这样是使页面加载数据变慢,造成不好的体验

    //关闭WebSocket连接
       function closeWebSocket() { //离开时一定要关闭
           websocket.close();
       }

    这样写就可以拿到数据,当然要看后台多少时间给你推送数据,这样页面上的数据就可以实时更新了。

    大概的内容就是这些,如有不足欢迎补充!

  • 相关阅读:
    如何通过CSS3实现背景图片色彩的梯度渐变
    提升网站页面打开速度的12个建议
    DIV+CSS高手必知的15个CSS常识
    飞机订票-1注册用户脚本
    需求不明的测试
    职业发展-外包公司考虑项
    Linux-Apache+Mysql+PHP+PHPWind(重点Apache+PHP集成环境)
    LR11-更改licence
    Linux-服务排查
    C语言-删除重复字符
  • 原文地址:https://www.cnblogs.com/0314dxj/p/10738706.html
Copyright © 2011-2022 走看看