上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

时间校验,webSocket的理解

[复制链接]
  • TA的每日心情
    开心
    昨天 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-5-4 20:02:00 | 显示全部楼层 | 阅读模式

    本帖最后由 wwwwwllllk 于 2023-5-4 20:17 编辑

    知识是学不完的,完美的方式当然是即用即学,但是又不是天才。有些东西只能是写的多了用的多了就理解了。写文章更多的是站在自己的立场,你现在看不懂,完全可以忽略掉,但是起码留个印象,当自己遇到同样的问题,你突然想到当初那个吊毛分享过,我去看看能不能解决我的问题。

    时间校验

    1. 首页我们要理解,当我们打开一个网页,我们是从服务器把html,js,css代码等资源从服务器下载到我们的电脑里面了,然后是我们自己的电脑在运行js代码,所以我们new Date()其实是获取的是我们电脑的时间,当然正常情况下我们的电脑都是联网获取的是正确的北京时间。但是用内网的单位我们很难保证时间是正确的,难度我们要求用我们软件的人把每台电脑的时候都设正确,显然不合理。

    如何解决

    1.从服务器获取时间,只需要保证服务器的时间正确即可。

    1. 设置轮训每秒调一次接口获取时间(调用接口响应需要时间,显然这样同样是有误差)
    2. 只调用一次接口获取当前服务器时间,然后获取本地电脑的时间。(比如 调用接口获取当前时间为19:56, 我本地时间为19:00 , 我本地时间和服务器时间的误差为 19:56-19:00 = 56)
      chazhi=serverTime - localTime
      currentTime= new Date() + chazhi
      image.png

    webSocket

    我们常用webSocket用来当做聊天室,假如我们用轮训的话就不太合理。如果是客户和客服的话,假如客服是机器人的情况,客户发一句消息,机器人回一句(这种情况更多的就类似于自动回复了),这个时候我们也不需要webSocket.如果客服是人的话,那么客户想收到客服的信息就不使用webSocket的情况就需要使用轮训掉接口来获取是否有人向我发信息。

    webSocket的使用场景二

    问: 体育场馆里面需要有显示屏实时显示排名,排名是通过接口来获取的,由于体育场比较大,需要多块显示屏,前端通过调用接口来获取排名,我应该如何实现

    答:
    以下是一种可能的实现方式:

    确定显示屏数量和位置:根据体育场馆的大小和观众分布情况,确定需要多少块显示屏以及它们的位置和朝向。

    设计前端页面:根据显示屏的数量和位置,设计前端页面布局,将排名信息分配到各个显示屏上。可以使用响应式布局,根据不同的屏幕大小和分辨率自动调整排版。

    编写前端代码:使用HTML、CSS和JavaScript等前端技术,编写页面代码,调用接口获取排名数据,并将其实时显示在各个显示屏上。可以使用定时器或WebSocket等技术,定时或实时更新排名数据。

    部署前端代码:将编写好的前端代码部署到各个显示屏上,可以使用云端部署或本地部署等方式。

    测试和优化:测试前端页面的性能和稳定性,优化代码和布局,确保排名信息能够准确、实时地显示在各个显示屏上。可以使用模拟数据或真实数据进行测试。

    问:使用定时器是否存在屏和屏之前有时间的误差(其实我这里尽可能轮训设置的短其实也还可以用)

    答: 使用定时器确实存在屏和屏之间有时间误差的问题,因为不同的设备和浏览器的性能和响应速度可能不同,导致定时器触发的时间不太一致。这样就会导致不同的显示屏上显示的排名信息有一定的时间差。

    为了解决这个问题,可以使用WebSocket等实时通信技术,将排名信息实时推送到各个显示屏上,这样可以保证各个显示屏上显示的排名信息是完全一致的。另外,还可以使用时间同步技术,将各个显示屏的时间同步到一个统一的时间源,这样可以减小时间误差。

    代码

    前端代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>实时显示排名</title>
      <style>
        .screen {
          width: 50%;
          height: 300px;
          border: 1px solid #ccc;
          margin: 10px;
          padding: 10px;
          box-sizing: border-box;
          float: left;
        }
      </style>
    </head>
    <body>
      <div class="screen" id="screen1"></div>
      <div class="screen" id="screen2"></div>
      <div class="screen" id="screen3"></div>
      <div class="screen" id="screen4"></div>
    
      <script>
        // 创建WebSocket连接
        const ws = new WebSocket('ws://localhost:8080');
    
        // 监听WebSocket连接事件
        ws.onopen = function() {
          console.log('WebSocket连接已建立');
        };
    
        // 监听WebSocket消息事件
        ws.onmessage = function(event) {
          const data = JSON.parse(event.data);
          // 在页面上更新排名信息
          updateRanking(data);
        };
    
        // 发送WebSocket消息
        function sendRanking() {
          const ranking = getRanking(); // 获取排名信息
          ws.send(JSON.stringify(ranking)); // 发送排名信息
        }
    
        // 更新排名信息
        function updateRanking(data) {
          const screen = document.getElementById(`screen${data.screen}`);
          screen.innerHTML = `
            <h2>第${data.screen}屏</h2>
            <ul>
              ${data.ranking.map(item => `<li>${item}</li>`).join('')}
            </ul>
          `;
        }
    
        // 获取排名信息
        function getRanking() {
          // 这里使用模拟数据,实际应该通过接口获取排名信息
          return {
            screen: Math.floor(Math.random() * 4) + 1, // 随机选择一块屏幕
            ranking: [
              '张三',
              '李四',
              '王五',
              '赵六',
              '钱七'
            ]
          };
        }
    
        // 定时发送排名信息
        setInterval(sendRanking, 5000);
      </script>
    </body>
    </html>
    

    后端代码 (只需要安装npm i ws 即可运行)

    const WebSocket = require('ws');
    
    // 创建WebSocket服务器
    const wss = new WebSocket.Server({ port: 8080 });
    
    // 监听WebSocket连接事件
    wss.on('connection', function(ws) {
      console.log('WebSocket连接已建立');
    
      // 监听WebSocket消息事件
      ws.on('message', function(message) {
        const ranking = JSON.parse(message);
        // 处理排名信息
        processRanking(ranking);
    
        // 将排名信息广播给所有连接的客户端
        wss.clients.forEach(function(client) {
          if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify(ranking));
          }
        });
      });
    });
    
    // 处理排名信息
    function processRanking(ranking) {
      console.log(`第${ranking.screen}屏排名:${ranking.ranking.join(', ')}`);
    }
    
    // 启动WebSocket服务器并监听端口
    wss.on('listening', function() {
      console.log('WebSocket服务器已启动,监听端口8080');
    });
    
    wss.on('error', function(error) {
      console.error('WebSocket服务器发生错误:', error);
    });
    
    wss.on('close', function() {
      console.log('WebSocket服务器已关闭');
    });

    测试webSocket本地服务的网址: https://stackoverflow.org.cn/websocket/

    image.png

    接脚本定制
    I frequently record, because want to leave something.
  • TA的每日心情
    开心
    2024-5-17 00:00
  • 签到天数: 120 天

    [LV.7]常住居民III

    29

    主题

    602

    回帖

    539

    积分

    专家

    积分
    539

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2023-5-4 20:44:10 | 显示全部楼层
    哥哥真是小母牛跳脱衣舞,脱了一件还有一件怎么也脱不完,又学到了
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    298

    主题

    4046

    回帖

    3929

    积分

    管理员

    积分
    3929

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-5-4 21:04:16 | 显示全部楼层
    时间校验用ws/轮询不太合理,获取一次时间就好了,然后递增不就好了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-5-4 21:07:34 | 显示全部楼层
    王一之 发表于 2023-5-4 21:04
    时间校验用ws/轮询不太合理,获取一次时间就好了,然后递增不就好了

    两个知识点写到一篇文章了,时间校验跟webSocket没关系的
    接脚本定制
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    114

    主题

    454

    回帖

    981

    积分

    荣誉开发者

    积分
    981

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2023-5-4 21:45:47 | 显示全部楼层
    脚本体验师001 发表于 2023-5-4 20:44
    哥哥真是小母牛跳脱衣舞,脱了一件还有一件怎么也脱不完,又学到了

    其实没有gg厉害!!
    接脚本定制
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表