2c:null 2d:["$","title",null,{"children":"WebSockets with Django | brookslybrand | Observable"}] 32:T461,{ const serverLocation = "ws://127.0.0.1:8000/ws/output/" const startWebSocketConnection = (websocketServerLocation) => { console.log('Initializing Forja websocket connection') const forjaSocket = new WebSocket(websocketServerLocation); forjaSocket.onmessage = function(e) { console.log(e.data) const data = JSON.parse(e.data, (key, value) => JSON.parse(value)) document.querySelector('#data-display').innerHTML = JSON.stringify(data, null, "
") }; forjaSocket.onclose = function(){ console.error('Forja websocket closed unexpectedly') // Try to reconnect in 5 seconds setTimeout(function(){startWebSocketConnection(websocketServerLocation)}, 5000); }; const buttons = document.getElementsByClassName('get-data') Array.from(buttons).forEach((button) => { button.onclick = null button.onclick = function() { forjaSocket.send(JSON.stringify({ 'group': this.name })) } }) } startWebSocketConnection(serverLocation) }33:[] 30:{"id":"a01cff84e3037a23","slug":"websockets-with-django","title":"WebSockets with Django","thumbnail":"d3776615cbc24319fc10d7630d88a2a675ab068a8251f3010a2c09e0de86eea6","access_level":"public","create_time":"$D2018-07-02T13:17:11.433Z","update_time":"$D2018-07-03T14:15:35.851Z","view_time":null,"first_public_time":"$D2018-07-03T14:15:03.215Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a909e0bff533eb4","login":"brookslybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1163ee5d8efddf2fd01cacaafd562a461fa49b417679cfae5d0b2ccab445026f","tier":"starter_2024"},"version":63,"publish_version":63,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c0ccc95e20909a5","login":"brookslybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1163ee5d8efddf2fd01cacaafd562a461fa49b417679cfae5d0b2ccab445026f","tier":null}],"members":[{"type":"individual","id":"9c0ccc95e20909a5","login":"brookslybrand","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1163ee5d8efddf2fd01cacaafd562a461fa49b417679cfae5d0b2ccab445026f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebSockets with Django","cells":[{"id":0,"value":"md`# WebSockets with Django`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"//html to display the line map and metrics\nhtml`\n\n\t\n\t\n\n\n\n \n \n \n \n \n \n

\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"