JavaScript前后端数据交互

Question

前端和后端使用websocket连接，后端不断发送坐标数据给前端绘制，传递方式为二进制，请问用什么样的数据格式发送效率最高

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：javascript websocket 二进制转字符串 二进制转对象
• 以下回答由chatgpt基于相关博客总结生成:

  问题分析: 在前后端数据交互中，使用二进制数据格式来发送坐标数据可以提高传输效率，因为二进制数据比文本数据更紧凑。对于Vue.js框架，可以通过WebSocket进行数据传输。以下是一种可能的解决方案:

  解决方案: 1. 在后端使用WebSocket来与前端建立连接，并发送坐标数据给前端。 2. 在前端使用WebSocket来接收后端发送的二进制坐标数据。 3. 在前端使用ArrayBuffer对象来存储和处理二进制数据。ArrayBuffer是一种固定长度的原始二进制数据缓冲区，可以高效地处理二进制数据。 4. 在前端使用DataView对象来读取和写入ArrayBuffer中的数据。DataView提供了一系列方法来读取和写入不同类型的二进制数据，如整数、浮点数和字符串等。 5. 使用WebSocket的onmessage事件来检测到新的坐标数据时，将接收到的二进制数据存储到ArrayBuffer中。 6. 使用DataView对象解析ArrayBuffer中的二进制数据，并根据坐标数据的结构提取相关信息。 7. 根据提取到的坐标数据，在前端进行绘制或其他相关操作。

  代码示例: 后端 (使用Node.js的WebSocket库ws):

  const WebSocket = require('ws');
  
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
    // 向客户端发送二进制坐标数据
    const coordinates = new Uint8Array([1, 2, 3, 4]); // 假设这是坐标数据的二进制表示
    ws.send(coordinates);
  });
  

  前端 (使用Vue.js和原生WebSocket API):

  <template>
    <div>
      <!-- 在此处进行绘制 -->
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      const socket = new WebSocket('ws://localhost:8080');
  
      socket.binaryType = 'arraybuffer'; // 设置接收的数据类型为二进制
  
      socket.onmessage = (event) => {
        const data = new Uint8Array(event.data);
        // 解析二进制数据并进行后续操作
        this.handleCoordinatesData(data);
      };
  
      this.socket = socket;
    },
  
    beforeDestroy() {
      this.socket.close();
    },
  
    methods: {
      handleCoordinatesData(data) {
        const view = new DataView(data.buffer);
  
        // 解析二进制数据并进行绘制或其他操作
        const x = view.getInt16(0); // 假设第一个字节是x坐标
        const y = view.getInt16(2); // 假设第二个字节是y坐标
  
        // 在此处进行绘制或其他相关操作
      },
    },
  };
  </script>
  

  请注意，以上代码只是示例，具体实现可能根据你的实际需求和数据结构而有所改变。同时，还需要根据具体情况进行异常处理、数据格式校验等操作。此外，如果需要在前端进行大量坐标数据的操作和展示，可以考虑使用WebGL等技术来提高性能。

  我希望以上回答对你有帮助，如果你有任何疑问或其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^