Magic Leap MagicScript Landscape Application. WebSocket

Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one

mlsdk v.0.21.0
https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.2.1
https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.4.0
https://www.npmjs.com/package/magic-script-polyfills

Create Project

magic-script init
? What is the name of your application? my-sws
? What is the app ID of your application? my-sws
? In which folder do you want to save this project? my-sws
? Do you want a Landscape App? Yes
cd my-sws

Code
Change app.js

import { LandscapeApp, ui } from 'lumin';
const { 
  UiLinearLayout, 
  UiText, 
  UiTextEdit,
  UiButton, 
  EclipseLabelType, 
  Alignment, 
  HorizontalTextAlignment } = ui;

export class App extends LandscapeApp {
  onAppStart () {
    const prism = this.requestNewPrism([0.7, 0.6, 0.5]);
    const layout = UiLinearLayout.Create(prism);
    let ws = null;
    let isConnected = false;
    layout.setLocalPosition([-0.1, 0.1, 0]);

    const text = UiText.CreateEclipseLabel(
      prism,
      '',
      EclipseLabelType.kT4
    );
    text.setAlignment(Alignment.CENTER_CENTER);
    text.setTextAlignment(HorizontalTextAlignment.kCenter);
    
    const edit = UiTextEdit.Create(prism, "", 0.4, 0.05);
    edit.onTextChangedSub(function (uiEventData) {
        btn_send.setEnabled(edit.getText().length > 0);
    });
    edit.setAlignment(Alignment.CENTER_CENTER);
    edit.setTextAlignment(HorizontalTextAlignment.kCenter);
    
    const btn_close = UiButton.Create(prism, 'Close', 0, 0.1);
    btn_close.onActivateSub(function (uiEventData) {
        ws.close();
        btn_close.setEnabled(false);
        isConnected = false;
    });
    btn_close.setEnabled(false);

    const btn_send = UiButton.Create(prism, 'Send', 0, 0.1);
    btn_send.onActivateSub(function (uiEventData) {
        if (isConnected)
        {
            text.setText('Send...');
            btn_send.setEnabled(false);
            ws.send(edit.getText());
            btn_send.setEnabled(false);
            edit.setText("");
        }
        else
        { 
            ws = new WebSocket('wss://echo.websocket.org');
            ws.onerror = function(error)
            {
                text.setText('Error: ' + error);
            };
            ws.onopen = function() {
                text.setText('Send...');
                btn_close.setEnabled(true);
                btn_send.setEnabled(false);
                ws.send(edit.getText());
                edit.setText("");
                isConnected = true;
            };
            ws.onmessage = function(message) {
                text.setText(message);
            };
        }
    });
    btn_send.setEnabled(false);

    layout.addItem(text, [0, 0, 0.03, 0]
      , Alignment.BOTTOM_LEFT);
    layout.addItem(edit, [0, 0, 0.03, 0]
        , Alignment.BOTTOM_LEFT);
    layout.addItem(btn_send, [0, 0, 0.03, 0]
      , Alignment.BOTTOM_LEFT);
    layout.addItem(btn_close, [0, 0, 0.03, 0]
        , Alignment.BOTTOM_LEFT);
    prism.getRootNode().addChild(layout);   
  }

  // Known Issue
  // Web Inspector does not work unless the updateLoop function is present in source.
  // It can be removed for production code.
  updateLoop (delta) {
    return true;
  }
}

Change manifest.xml

<manifest xmlns:ml="magicleap"
          ml:package="my-sws"
          ml:version_name="0.0.1"
          ml:version_code="1">
  <application ml:visible_name="my-sws"
               ml:sdk_version="1.0">
    <component ml:name=".universe"
               ml:visible_name="my-sws"
               ml:binary_name="bin/index.js"
               ml:type="Universe">
      <mode ml:shareable="true"/>
      <icon ml:model_folder=""
            ml:portal_folder=""/>
    </component>
    <uses-privilege ml:name="MagicScript"/>
    <uses-privilege ml:name="Internet"/>
  </application>
</manifest>

Build

magic-script build -i

Run

magic-script run --port=10000

Reference
websocket.js
https://github.com/magic-script/magic-script-polyfills/blob/35684eeb2e45c4b133419135f9193343ce3af291/src/websocket.js

Thanks!