0

I want to livestream telemetry data formatted in JSON from a websocket to a browser using javascript. A websocket is created on a server X.X.X.X using native c and the websocketd wrapper on port 8080. A client (IP: Y.Y.Y.Y) shall connect to the very same server via https on port 80 (https://X.X.X.X:80) and shall receive javascript code which tells it to grab livestream data from the websocket (ws://X.X.X.X:8080) and refresh some values on the website with the values from this stream.

The data can exemplarily look like this: 

{
        "name of system": {
                "RSSI": {
                        "rssi": "0",
                        "adc1": "0.00",
                        "adc2": "0.00",
                        "rxBatt": "0.00",
                        "swr": "0"
                },
                "ASS": {
                        "airspeed": "0.00"
                }
        }
}
{...}
and so on...

This frame shall be repeated e.g. in a 500ms interval and is sent with no whitespaces nor newline characters.

I tried parsing this already with JSON.parse() but my browser console returns following error: "Uncaught SyntaxError: Unexpected token *" or "Unexpected token {". Is this because of wrongly implemented JSON code, although I checked it several times?

My question is now: Is JSON.parse really capable of livestreaming? If not, are there libraries which are, or am I better off with a completely new solution?

Best regards

T.B.
  • 11
  • 4
  • 1
    Doubt it has anything to do with JSON.parse. my guess is there is invalid characters in the result and since you show no code it is hard to give you pointers to debug. – epascarello Feb 11 '19 at 23:01
  • Send valid `JSON` strings in the form of a flattened array. Or stream `Uint8Arrays` and read the stream continuously. The issue is the data structure, and how the stream is being read, not the streaming process itself. – guest271314 Feb 11 '19 at 23:02
  • My routine is quite simple: `webSocket.onmessage = function(event){ stats = event.data; data = JSON.parse(event.data);` Can you give me a code example of a flattened array? Right now i am streaming ascii data over the websocket, I guess that is the problem? – T.B. Feb 11 '19 at 23:05
  • In what form is the data sent to the client? As a valid `JSON` string? Why is a JavaScript plain object data structure necessary? The values themselves can be streamed in a fixed size, a transform stream can pipe the write (server) to the client (read). – guest271314 Feb 11 '19 at 23:05
  • E.g., see [Receiving data via stdin and storing as a variable/array](https://stackoverflow.com/q/45427642/). See also [How to read and echo file size of uploaded file being written at server in real time without blocking at both server and client?](https://stackoverflow.com/questions/42475492/), [Node.js: splitting stream content for n-parts](https://stackoverflow.com/questions/43631320/) – guest271314 Feb 11 '19 at 23:11
  • I have the opject structure implemented since I want to be able to stream data from diverse systems which have all other names and other sensors (like "RSSI"). I have to assign these sensor values to the specific type of system. – T.B. Feb 11 '19 at 23:15
  • See [How can I append DOM elements as they stream in from the network?](https://stackoverflow.com/questions/38413400/how-can-i-append-dom-elements-as-they-stream-in-from-the-network) – guest271314 Feb 11 '19 at 23:19
  • Each discrete stream segment could contain, e.g., `['0','0.00','0.00','0.00','0','0.00']` asynchronously read and process 6 or N>0-6 elements of the stream at a time in series, or parallel. Do stuff after each 6 element read. – guest271314 Feb 11 '19 at 23:27
  • Thanks for the links. I will examine them and will see if I can get some ideas how to solve my problem. In this project I am using JavaScript for the first time, which puts me in front of seemingly banal problems. – T.B. Feb 11 '19 at 23:30
  • What does `console.log(typeof event.data, event.data instanceof ArrayBuffer, event.data instanceof Blob, new TextDecoder().decode(new Uint8Array(event.data)))` print? – guest271314 Feb 12 '19 at 00:37
  • Web Sockets has framing of your messages automatically. There's no need to buffer and parse out the start/end of the message. You're doing something wrong but you didn't show us any of your code so I don't know how you expect us to be able to help you debug it. Also, consider using Server-Sent Events for this since your data is only going one way. That way, you'd have automatic reconnecting, a simpler API, and a standard way to pick up where you left off on reconnect. – Brad Feb 12 '19 at 13:47

1 Answers1

1

If the JSON parser is encountering an asterisk, as suggested by Unexpected token *, then your JSON is malformed, as that's not a valid character in JSON (outside of a string).

I'd recommend examining the message being received and visually check that it's valid JSON. Something like:

webSocket.onmessage = function(event) {
    console.log(event.data);
}

Then, you can check your browser's developer console (usually Cmd-Shift-I on a Mac or F12 elsewhere) to see what you're actually receiving.

Ben Blank
  • 54,908
  • 28
  • 127
  • 156