Real-time streaming of JSON information using JavaScript

Looking to stream telemetry data in JSON format from a websocket to a browser using javascript. The websocket is set up on server X.X.X.X with native c and the websocketd wrapper on port 8080. A client (IP: Y.Y.Y.Y) should connect to the same server via https on port 80 () and receive javascript code instructing it to fetch live data from the websocket (ws://X.X.X.X:8080) and update values on the webpage accordingly.

An example of the data structure:

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

This data will be sent in a continuous loop, every 500ms, without any spaces or line breaks.

Attempted parsing this with JSON.parse() but encountering errors like: "Uncaught SyntaxError: Unexpected token *" or "Unexpected token {". Is this due to incorrect JSON implementation, even after multiple checks?

So my question is: Can JSON.parse handle livestreaming? If not, are there alternative libraries for this task, or should I consider a completely different approach?

Thank you

Answer №1

If your JSON parser is coming across an asterisk, indicated by the error message Unexpected token *, then it is likely that your JSON data is not properly formatted, as asterisks are not allowed in JSON except within a string.

I suggest reviewing the incoming message and visually confirming that it adheres to correct JSON format. You can do this by implementing something similar to the following code:

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

Afterwards, you can inspect the contents of what you are actually receiving by checking your browser's developer console (usually accessed through Cmd-Shift-I on a Mac or F12 on other systems).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Making a post request with Ajax in Node.js

Dealing with an issue in Node js and AJAX POST - the Node request fails to verify if the form data is being handled correctly, consistently triggering the error function. Is there any solution to check the AJAX NODE JS CODE below? $("#submit_btn").click ...

What could be causing the input field to not have a border set?

I am attempting to add a border to my input field. I have successfully added the border to the text field, but it is being applied across the entire width. I would like the border to only appear on the input field up to where the characters start scrolling ...

Personalized selection in React with list filtering

I have created a custom dropdown menu and I am facing an issue. When a user selects an element from the dropdown, I want that item to be removed from the list so it does not show up again. Here's how it currently looks when I click on the select for t ...

Clicking on ajax will disable the submit button and then re-enable it

Hey everyone, I've got this function that's working great but I'm encountering a small problem. $(document).ready(function(){ $("input[type='submit']").attr("disabled", false); $("form").submit(function(){ $("input[type='s ...

Having trouble fixing the '@material-ui/lab' error while working with the newest React update?

My goal is to set up a global alert by following this method: Check out the Sandbox Demo Yet, I encounter an issue with the following error message: ERROR in ./src/components/snackbar/Alert.js 5:0-82 Module not found: Error: Can't resolve '@m ...

Transforming a CSV file into JSON format using Gatsbyjs

I am currently exploring the possibilities of GatsbyJs and considering the utilization of the gatsby-transformer-csv plugin. You can find the documentation for this plugin here. I have got my hands on two CSV files exported from WordPress that I am eager ...

What is the best way to extract data from a nested array within an array of objects and transfer it to a separate array without altering its nested arrangement?

I have a collection of different objects stored in an array. Each object within the main array contains another array with specific details like this: const data = [ { id: 1, name: "Jack", interests: [ ...

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

Maintaining hover effects even when elements are not in view

I am facing an issue with my absolutely positioned <div> (which serves as a menu) located in the corner of a webpage. The problem arises when I try to animate it on hover, but as soon as the cursor moves beyond the viewport, the hover action stops. I ...

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

A guide to retrieving all keys from a JSON object in Javascript

{"data": {"characters":[ {"name":["Harry Potter"],"age":["18"],"gender":["Male"]}, {"name":["Hermione Granger"],"age":["18"],"gender":["Female"]} ]} } In the given JSON data, I am interested in retrieving the keys like name, age, gender for ea ...

Performing aggregation functions on arrays of JSON data in PostgreSQL

Many discussions mention using json_array_elements to extract elements from a JSON array, but it seems to only work on a single array. When attempting to use it in a general query, an error occurs: ERROR: cannot call json_array_elements on a scalar Cons ...

Issue with React component: prop becomes undefined upon reloading the component

I am currently encountering an issue with a React component where I need to use a specific prop in one scenario and another prop in a different scenario. Let me demonstrate what I mean. class GizmoComponent extends React.Component { render() { ...

When I attempted to use jQuery to access the innerHTML of list items, I encountered the issue of it returning as Undefined

For my grocery list application created with Angular 4, I need the user to click on an item and have it added to the bookmarked section. Despite using jQuery to access the innerHTML of the li when hovered over, the value keeps returning as "undefined." In ...

Error: The function $(...).tableDnD is undefined and cannot be executed

Recently, I've been working on creating a drag and drop gridview using C#. After searching for some jQuery libraries like tableDnD and following various examples, I came across a piece of code. When I tried to implement it with my own code, I encounte ...

Tips for incorporating broadcasting into my Angular application?

console.log('js'); var myApp = angular.module('myApp', ["ngRoute"]); myApp.config(function($routeProvider) { $routeProvider.when('/', { templateUrlnp: 'views/partials/logIn.html', controller: 'LoginC ...

Determine in React whether a JSX Element is a descendant of a specific class

I am currently working with TypeScript and need to determine if a JSX.Element instance is a subclass of another React component. For instance, if I have a Vehicle component and a Car component that extends it, then when given a JSX.Element generated from ...

Looking for a template to implement useRef in TypeScript?Feel free to provide me

const CanvasMapComponent = () => { const canvasRef = React.useRef<HTMLCanvasElement>(null) useEffect(() => { canvasRef && canvasRef.current && cities.forEach(function (item) { // logic to be impl ...

Adjust Fire When the Window is Resized

Recently, I've been working on a random graph bars script using Chart.js and the canvas element. However, I encountered an issue when resizing the window for testing purposes on different devices. Every time I tried to resize the window while inspect ...

How to retrieve a specific item from an array in JavaScript

I am retrieving this list from the server using PHP: ["Ak-Bulak","Balykchy","Batken"] How can I access it and insert it into select options using JavaScript? Here is what I have tried so far: for (var i in data) { $('#cities').append(' ...