Reading speckle stream from JavaScript

Help
1

Hello,
I am interested in reading a speckle stream with JavaScript, i.e. fetching the data found in the stream and being able to use it elsewhere on my website.

The JavaScript SDK (Introduction | Speckle Docs) seems to be about displaying 3D geometries within the browser. I am only interested in receiving the “raw” data, is this possible?

Thanks in advance! :slight_smile:

2

The easiest way to get your hands on the data in JS is to start first with the GraphQL API and then perhaps the REST API.

These will be using your web-request library of choice or native fetch.

With these, you will be able to query both the contents of streams and commits and also then address specific objects.

My personal preference is to use the ObjectLoader package. This is part of the the SpeckleServer repo, but is also available separately from npm @speckle/objectloader

example…

  let loader = new ObjectLoader({
          serverUrl: details.initiator,
          streamId: postedObject.variables.streamId,
          objectId: postedObject.variables.id,
          options: {
            fullyTraverseArrays: false,
            excludeProps: ['displayValue', 'displayMesh', '__closure'],
          },
        });

From there, the ObjectLoader object can handle tree traversals, de-clustering, detached sub element, deserialization and data extraction methods.

You bring-your-own-code at this point, but the codebase is quite clear to use!

Let me know how you get on. I am planning some additional tutorial material on this area soon, it would be good to hear what you discover.

3

Hello, thanks for the quick reply.

I have issues installing the object loader class.

I have run npm init in my base folder, then npm i @speckle/objectloader, after which I added import objectLoader from '../node_modules/@speckle/objectloader' to the top of my JS file.

I am met with the following error when loading the website:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Do you have any idea of what is going wrong?

4

try

import ObjectLoader from '@speckle/objectloader';

Admittedly I have made a million and one assumptions about your setup

5

Thanks for your reply.

I changed it to ObjectLoader, and removed the first part of the relative path, but it didn’t work.

It did however give me this new error message:

Uncaught TypeError: Failed to resolve module specifier “@speckle/objectloader”. Relative references must start with either “/”, “./”, or “…/”.

6

What does your app look like? In Vue you might need to add it to transpileDependencies:

7

Hello,

I am not using Vue but native JS. The script looks like this:

import ObjectLoader from '@speckle/objectloader'

let loader = new ObjectLoader({
    serverUrl: 'https://speckle.xyz/streams/573a426b4c',
    streamId: '573a426b4c',
    objectId: '255391d07a4d9c5c8d6a4cc2b2e27c15'
  });

function main() {
    console.log(loader)
}

It’s just a simple test of a stream created in Python which gets invoked by a button in plain html - no frameworks or libraries involved.

8

point us to a minimal repo and we’ll sort it for you! it’s horrible to debug this otherwise (we don’t know what build steps you have, if any, and if they need to be there!).

9

Absolutely, here you go:

Thanks a lot for the help! :slight_smile: