baseimage-tutorial-framework/src/app/static/js/index.js

import * as ace from 'brace';
import 'brace/mode/python';
import 'brace/theme/monokai';
import * as showdown from 'showdown';

let ws = new WebSocket('ws://' + document.location.host + '/ws');

let converter = new showdown.Converter();
// TODO: don't hardcode anchor id
let editor = ace.edit('anchor_webide');
editor.setTheme('ace/theme/monokai');
editor.getSession().setMode('ace/mode/python');
editor.$blockScrolling = Infinity;

$('#container').on('click', '.anchor', ( function (event) {
    let anchorName = $(this).attr('id').replace('_event', '');
    let data = JSON.stringify({
        'anchor': anchorName,
        'data': $('#' + anchorName).text()
    });
    console.log('Sending: ');
    console.log(data);
    ws.send(data);
}));

$('form#anchor_login_event').on('submit', (function (event) {
        event.preventDefault();

        let anchorName = $(this).attr('id').replace('_event', '');
        $.post(
            $(this).attr('action'),
            $(this).serialize(),
            function (data) {}
        );
}));

ws.onopen = function () {
    ws.send(JSON.stringify({
        'anchor': 'reset',
        'data': ''
    }));
    // init webide
    ws.send(JSON.stringify({
        'anchor': 'anchor_webide',
        'data': ''
    }));
};

ws.onmessage = function (messageEvent) {
    let message = JSON.parse(messageEvent.data);
    console.log('Receiving: ');
    console.log(message);
    let $anchor = $('#' + message['anchor']);
    if (message['anchor'] === 'anchor_webide') {
        editor.setValue(message['data'], -1);
    }
    else {
        let formatted_message = converter.makeHtml(message['data']);
        $anchor.html(formatted_message);
    }
};