function init() {
    const body = document.querySelector('body')
    const socket = new WebSocket('wss://troligt.ru/connect')

    function createElement(m) {
        var e = document.createElement(m.tag)
        e.style.position = 'absolute'
        e.style.left = m.x - 10
        e.style.top = m.y - 10
        e.style.border = "10px solid black"
        e.style.width = 0
        e.style.height = 0
        e.style.borderRadius = "10px"
        body.appendChild(e)
        console.log("drew shape " + m.tag + " " + m.x + " " + m.y)
    }

    socket.addEventListener('open', function(event) {
        console.log("socket open")
        socket.addEventListener('message', function drawFromServer(event) {
            try {
                console.log(event)
                var msg = JSON.parse(event.data)
                console.log("received")
                console.log(msg)
                createElement(msg)
            } catch(e) {
                console.log(event)
            }
        })
        body.addEventListener('click',function bodyLis(event) {
            var item = {"tag": "div",
                        "x": event.clientX,
                        "y": event.clientY}
            var str = JSON.stringify(item)
            console.log("send " + str)
            socket.send(str)
            createElement(item)
        })
    })
}

document.addEventListener('DOMContentLoaded', init)