idyll-lang / idyll

Create explorable explanations and interactive essays.
http://idyll-lang.org/
MIT License
2.01k stars 87 forks source link

WebSocket | WebRTC | CometD Support #84

Closed sirinath closed 7 years ago

sirinath commented 7 years ago

Is it possible to support getting the data and updates from the backend.

bclinkinbeard commented 7 years ago

Can you elaborate on what you mean? I don't understand.

mathisonian commented 7 years ago

Hey @sirinath,

You can achieve this functionality by implementing a custom component that subscribes to the websocket (etc.) events and updates a variable.

const React = require('react');
const IdyllComponent = require('idyll-component');

class WS extends IdyllComponent {
  componentDidMount() {
    // Here I just put `setInterval` to simulate an 
    // async call, but you could open any type
    // of websocket, webrtc, etc connection
    setInterval(() => {
      this.updateProps({
        data: Math.random()
      })
    }, 1000);
  }
  render() {
    return null;
  }
}

module.exports = WS;

Then in the Idyll markup you could hook this component up to a variable:

// instantiate a variable named wsValue
[var name:"wsValue" value:0  /]

// connect it to the WS component (defined above)
[ws data:wsValue /] 

// display the current value
Websocket Value is: [DisplayVar var:wsValue /]

to get something like:

ws

sirinath commented 7 years ago

Great!

Perhaps these components can be pre packed. In addition maybe you can have a component for REST also.

mathisonian commented 7 years ago

I think the most likely avenue for this is expanding the "loading" functionality for datasets.

Currently idyll supports loading data from local json or csv files like

[data name:"myDataset" source:"my-file.json" /]

I think loading from a URL would also be a common task that could be supported at some point. For now adding specific loading functionality for websocket connections, webrtc seems a bit out of scope, and something better served by custom components. Adding a way to make it easier to add custom data loaders is definitely something we can think about