服務器發送事件 (SSE) 在簡單的 3D 立方體 model 上使用 Three.JS 很慢

Question

我目前正在開發一個客戶端-服務器應用程序，它使用 SSE 從數據中獲取加速度計數據，並將它們傳遞給 three.js model，然后在瀏覽器上呈現結果。

從技術上講，應用程序應該只在瀏覽器上實時顯示一個方向的加速度計數據，因此延遲很重要。

因為我只傳遞一個數據（即只有 accelerometerX），所以這個過程應該是快速和即時的； 但是，將 accX 值傳遞給 object.position.x 甚至 console.log("Accelerometer X-Axis Data: " + (sensor value / 16384)); 偶爾顯示數據。 有時，整個瀏覽器崩潰顯示“WebGL 場景由於丟失上下文而無法呈現”錯誤和很長的“精度”錯誤。 到目前為止，我已經嘗試了每一種方法，但我始終無法解決這個長期滯后的問題。

這是我從服務器得到的，一個具有這種特殊格式的 JSON 文件：

 "DMObjectsCompleteObject": [
        {
            "DataMapAddress": 1,
            "DataType": 9,
            "DefaultValue": 0,
            "Description": "Accelerometer X Axis Data",
            "MaxValue": 66,
            "MinValue": 18446744073709552000,
            "ReadOnly": false,
            "Value": -18706.4
        },
        {
            "DataMapAddress": 2,
            "DataType": 9,
            "DefaultValue": 0,
            "Description": "Accelerometer Y Axis Data",
            "MaxValue": 66,
            "MinValue": 18446744073709552000,
            "ReadOnly": false,
            "Value": 128
        }
]

這是我客戶端的代碼：

// Importing libraries and data
import * as THREE from "three";
if (!!window.EventSource) {
    var source = new EventSource("/sse");

    source.addEventListener('message', function (event) {
        // Parameters initialization
        const canvas = document.querySelector('#canvas');
        const accelPanel = document.querySelector('#accelPanel');
        const renderer = new THREE.WebGLRenderer({ canvas });
        const fov = 70;
        const aspect = 2;  // the canvas default
        const near = 20;
        const far = 500;

        // Initialize camera perspective
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

        // The camera FOV when the model starts to move
        camera.position.z = 25;
        camera.up.set(0, 0, 1);
        camera.lookAt(0, 0, 0);

        // Add background grid and light
        const scene = new THREE.Scene();
        {
            const color = 0x00afaf;
            const intensity = 10;
            const light = new THREE.PointLight(color, intensity);
            scene.add(light);
        }

        // Make the 3D cube model with the XYZ axis
        const boxGeometry = new THREE.BoxGeometry();
        const boxMaterial = new THREE.MeshBasicMaterial({ color: "green", wireframe: false });
        const object = new THREE.Mesh(boxGeometry, boxMaterial);

        var cubeAxis = new THREE.AxesHelper(3);
        object.add(cubeAxis);

        object.scale.set(5, 5, 5)
        scene.add(object);
        scene.background = new THREE.Color(0.22, 0.23, 0.22);

        let currentIndex = 0
        let time = 0
        let velocity = new THREE.Vector3()
        requestAnimationFrame(render);

        // Rendering function responsible of creating the translation motion
        function render(dt) {
            dt *= 0.0001 // in seconds
            time += dt
            document.querySelector("#time").textContent = time.toFixed(2)


            // JSON.parse twice due to over-stringified string from SSE
            var obj = JSON.parse(JSON.parse(event.data));
            
            if (obj !== null) {
                // Sensor data
                if (
                    obj.hasOwnProperty("DataMapChangedObjectsAddressValue") &&
                    obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"] !==
                    undefined
                ) {
                    let sensorAddr =
                        obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"];
                    let sensorValue =
                        obj["DataMapChangedObjectsAddressValue"][0]["Value"];

                    //Accelerometer X Axis
                    //if(sensorAddr === this.despToAddrMap.get("Accelerometer X Axis Data")){
                    if (sensorAddr === 1) {
                        // console.log(obj["DataMapChangedObjectsAddressValue"][2]["Value"])
                        console.log("Accelerometer X Axis Data: " + (sensorValue / 16384));
                    }

                    object.position.x = (sensorValue / 16384) * 500;
                    document.querySelector("#accX").textContent = (sensorValue / 16384) * 500;
                    object.rotation.y = -70.68;
                    var relativeCameraOffset = new THREE.Vector3(5, 10, 1);
                    var cameraOffset = relativeCameraOffset.applyMatrix4(object.matrixWorld);
                    camera.position.x = cameraOffset.x;
                    // camera.position.y = cameraOffset.y;
                    // camera.position.z = cameraOffset.z;
                    camera.lookAt(object.position);
                }
            }

            // // Find datapoint matching current time
            // while (data[currentIndex].time < time) {
            //     currentIndex++
            //     if (currentIndex >= data.length) return
            // }
            // const { rotX, rotY, rotZ, accX, accY, accZ } = data[currentIndex]
            // document.querySelector("#accX").textContent = accX;

            // const acceleration = new THREE.Vector3(accX, accY, accZ)
            // object.position.x = accX * 30;
            // object.rotation.y = -70.68;

            resizeToClient();
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }

        function resizeToClient() {
            const needResize = resizeRendererToDisplaySize()
            if (needResize) {
                const canvas = renderer.domElement;
                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                camera.updateProjectionMatrix();
            }
        }

        function resizeRendererToDisplaySize() {
            const canvas = renderer.domElement;
            const width = canvas.clientWidth;
            const height = canvas.clientHeight;
            const needResize = canvas.width !== width || canvas.height !== height;
            if (needResize) {
                renderer.setSize(width, height, false);
            }
            return needResize;
        }
    }, false)

    source.addEventListener('open', function (e) {
        // document.getElementById('state').innerHTML = "Connected"
    }, false)

    source.addEventListener('error', function (e) {
        const id_state = document.getElementById('state')
        if (e.eventPhase == EventSource.CLOSED)
            source.close()
        if (e.target.readyState == EventSource.CLOSED) {
            id_state.innerHTML = "Disconnected"
        }
        else if (e.target.readyState == EventSource.CONNECTING) {
            id_state.innerHTML = "Connecting..."
        }
    }, false)
} else {
    console.log("Your browser doesn't support SSE")
}

這是客戶端渲染 3D 立方體的方式：

但它幾乎不動，而且太遲鈍了。 有人可以建議解決這個問題嗎？ 將不勝感激。

Answer 1

如何實現 SSE 服務器也很重要。 如果您使用 expressjs 樣式之一，例如這個（抱歉代碼不是很干凈，它來自實時項目）

'use strict';

const util = require('util');
// const config = require('../lib/config');
const requireAuthorization = require('../middlewares/requireAuthorization');
const router = require('express').Router();
// const thinky = require('../lib/thinky');
// const r = thinky.r;
// const Errors = thinky.Errors;
const logger = require('../lib/logger');
const helpers = require('../lib/helpers');

// redis feed for events

const subscriber = require('../lib/redis').createClient();
const EventEmitter = require('events');
const spine = new EventEmitter();
subscriber.on('message', function (channel, message) {
  spine.emit(channel, message);
});

// setInterval(function () {
//   spine.emit('scubamailer_feed', JSON.stringify({time: Date.now()}));
// }, 500);

subscriber.subscribe('scubamailer_feed');


router.use(requireAuthorization);

router.get('/subscribe', function (req, res, next) {

  // Good read -
  // https://learn.javascript.ru/server-sent-events#tipy-sobytiy
  // https://www.terlici.com/2015/12/04/realtime-node-expressjs-with-sse.html
  // http://stackoverflow.com/questions/27898622/server-sent-events-stopped-work-after-enabling-ssl-on-proxy
  // http://stackoverflow.com/a/33414096/1885921
  // https://github.com/expressjs/compression/issues/17

  // how to remove listeners
  // https://odetocode.com/blogs/scott/archive/2013/07/16/angularjs-listening-for-destroy.aspx

  logger.info('User %s subscribed to event feed from IP %s.', req.user.email, helpers.extractIPfromReq(req), {
    user: req.user.email,
    type: 'user/unsubFromEvents'
  });

  req.isSSE = true; // PLEASE, DO NOT TOUCH IT, OK???
  req.socket.setTimeout(24 * 60 * 60 * 1000);
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no');

  // redis feed events
  const listen = function (message) {
    res.write(util.format('event: notification\ndata: %s\n\n', message));
    // res.flush(); // https://github.com/expressjs/compression#server-sent-events
  };
  const tickerInterval = setInterval(function () {
    res.write(util.format('event: time\ndata: %s\n\n', Date.now()));
  }, 500);


  const stopListening = function () {
    logger.info('User %s [%s] unsubscribed from event feed...', req.user.email, helpers.extractIPfromReq(req), {
      user: req.user.email,
      type: 'user/unsubFromEvents'
    });
    clearInterval(tickerInterval);
    spine.removeListener('scubamailer_feed', listen);
  };
  res.once('close', stopListening);
  res.once('finish', stopListening);
  spine.on('scubamailer_feed', listen);


  const entitiesToMonitor = [
    'Campaign',
    'EmailImport',
    'EmailExport',
    'User',
    'Server'
  ];

  return Promise.all(entitiesToMonitor.map(function (entity) {
    return req.model[entity].changes()
      .then(function (feed) {
        feed.each(function (error, doc) {
          if (error) {
            throw error;
          }
          if (doc.isSaved()) { // send updates only if document is persisted in database
            if (entity === 'User') {
              res.write(util.format('event: %s\ndata: %s\n\n', entity, JSON.stringify(doc.formatToJSON())));
            } else {
              res.write(util.format('event: %s\ndata: %s\n\n', entity, JSON.stringify(doc)));
            }

            // res.flush(); // https://github.com/expressjs/compression#server-sent-events
          }
        });
        return Promise.resolve();
      });
  }))
    .catch(next);
});

module.exports = exports = router;

如您所見，您需要提供所需的所有標題

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no');

nginx 需要 X-Accel-Buffering 才能正確處理 SSE 饋送。

此外，如果您使用 nodejs，確保壓縮中間件不會壓縮 SSE laggy的端點可能很重要，因為它會使事件傳遞滯后

Answer 2

這里有太多活動部件，不知道問題出在哪里。

將您的消息處理程序替換為以下內容：

source.addEventListener('message', function (event) {
console.log(event)
}

現在確認您的加速度計數據實時到達控制台日志。 （這也是確認數據結構完全符合預期的好時機。）

如果它確實可以快速可靠地運行，那么 SSE 運行良好，您的問題只是關於 ThreeJS。 （我會將您的 static 函數移到消息處理程序之外作為開始 - 如果只是為了使代碼更易於閱讀。）

但是，如果您的數據 stream 非常安靜，那么一大塊數據到達，然后在另一個大塊到達之前再次安靜，這可能意味着您的服務器正在緩沖。 您尚未描述服務器端系統，但請查看刷新數據的選項，或關閉 output 緩沖。

如果數據不規律地到達，有時工作，有時不工作，那么我會調查網絡問題。 瀏覽器中的開發者工具可以幫助診斷這類問題。 或者從等式中刪除瀏覽器，並使用 curl（或類似的）來調試 SSE stream。