const mySyft = new Syft({
class Playground extends Component {
// Store syft related information
syftLocation: 'ws://localhost:1112/',
// Track the tensors in React separately
// For performing an operation we need to set some defaults
mySyft.start(this.state.syftLocation);
const updateTensorsState = (tensors, isRemoved) => {
console.log('TENSOR REMOVED', tensors);
console.log('TENSOR ADDED', tensors);
const newState = isRemoved ? { tensors, result: null } : { tensors };
this.setState(newState, () => {
if (tensors.length >= 2) {
mySyft.onTensorAdded(({ tensors }) => updateTensorsState(tensors, false));
mySyft.onTensorRemoved(({ tensors }) => updateTensorsState(tensors, true));
mySyft.onRunOperation(({ func, result }) => {
console.log('OPERATION RAN: ' + func, result);
this.setState({ result });
mySyft.onMessageReceived(data => {
console.log('MESSAGE RECEIVED', data);
mySyft.onMessageSent(data => {
console.log('MESSAGE SENT', data);
return <p>Syft.js is awesome - check your console!</p>;