如何处理 JSON.parse

Question

我编写了一个 Websocket 白板应用程序，但我在使用 JSON.parse 时遇到了问题。

let server = require('ws').Server;
let s = new server({port: 3000 });

// alle bisher gezeichneten Lines
let line_history = [];


s.on('connection', function(ws) {

     for (let i in line_history) {
          //var object = { line: line_history[i]}
          //ws.send(JSON.stringify(line_history[i]) );
     }   


     ws.on('message', function (data) {
//console.log(data);
    //ws.send("Test");

      // add received line to history 
       var test = JSON.parse(data);
       console.log(test.line[0].x);
      line_history.push(test);
      //console.log(line_history[0]);
      // send line to all clients
      //object = { line: data };
      ws.send(JSON.stringify(test));

   });



});

那是我的客户

document.addEventListener("DOMContentLoaded", function() {
   var mouse = { 
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   var canvas  = document.getElementById('drawing');
   var context = canvas.getContext('2d');
   var width   = window.innerWidth;
   var height  = window.innerHeight;
   var socket  = new WebSocket("ws://localhost:3000");

   // set canvas to full browser width/height
   canvas.width = width;
   canvas.height = height;

   // register mouse event handlers
   canvas.onmousedown = function(e){ mouse.click = true; };
   canvas.onmouseup = function(e){ mouse.click = false; };

   canvas.onmousemove = function(e) {
      // normalize mouse position to range 0.0 - 1.0
      mouse.pos.x = e.clientX / width;
      mouse.pos.y = e.clientY / height;
      mouse.move = true;
   };

   // draw line received from server

      socket.onmessage = function (data) {



      // 34
      var line = JSON.parse(data);



      console.log(line);
      /*context.beginPath();
      context.moveTo(line[0].x * width, line[0].y * height);
      context.lineTo(line[1].x * width, line[1].y * height);
      context.stroke();*/
   };


   // main loop, running every 25ms
   function mainLoop() {
      // check if the user is drawing
      if (mouse.click && mouse.move && mouse.pos_prev) {
         // send line to to the server
         var object = { line: [ mouse.pos, mouse.pos_prev ] };
         socket.send(JSON.stringify(object));
//socket.send("Vom Client");
         mouse.move = false;
      }
      mouse.pos_prev = {x: mouse.pos.x, y: mouse.pos.y};
      setTimeout(mainLoop, 15);
   }
   mainLoop();
});

现在我遇到了问题，控制台说的是：

第 34 行中 JSON 中的意外标记 o（注释 34 行）

所以我认为它已经是一个对象，我不必解析它，但是当我不解析它时，我遇到的问题是我无法访问这个 line 对象的值。总是未定义或不存在。当我在得到这个之前只打印数据而不解析时

MessageEvent {isTrusted: true, data: "{"行":[{"x":0.3506849315068493,"y":0.12663755458..."x":0.3506849315068493,"y":0.12663755458515283}]}", 来源：“ws://localhost:3000”，lastEventId：“”，来源：null，...}

但我需要这个对象的值。

感谢您的帮助:)

Answer 1

socket.onMessage 接收一个事件作为参数，这就是为什么你不能解析你的 data 变量。

MessageEvent {isTrusted: true, data: "{"line":[{"x":0.3506849315068493,"y":0.12663755458…"x":0.3506849315068493,"y":0.12663755458515283}]}", origin: "ws://localhost:3000", lastEventId: "", source: null, …}

如您所见，这里有 json，在 data 属性中。那是您需要解析的部分。所以代码应该去：

socket.onmessage = function(event){
    const data = JSON.parse(event.data)
    const line = data.line;
}