Как обращаться с JSON.parse

Question

Я пишу приложение Websocket Whiteboard, но у меня проблемы с 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();
});

Теперь у меня проблема, о которой говорит консоль:

Неожиданный токен o в JSON встрока 34 (строка с комментарием 34)

Так что я думаю, что это уже объект, и мне не нужно его анализировать, но когда я его не анализирую, у меня возникает проблема, которую я не могуполучить доступ к значениям этого строкового объекта. Всегда не определено или нет. Когда я только печатаю данные без разбора, прежде чем получаю это

MessageEvent {isTrusted: true, data: "{" line ": [{" x ": 0.3506849315068493," y ": 0.12663755458…" x": 0.3506849315068493," y ": 0.12663755458515283}]}", origin: "ws: // localhost: 3000", lastEventId: "", source: 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;
}