2d:null 2e:["$","title",null,{"children":"Websocket utils | Alex Ciminian | Observable"}] 33:[] 31:{"id":"d7ad8cb4eb6885cc","slug":"websocket-utils","title":"Websocket utils","thumbnail":"04809071cc9332de9eb39c27af12ac4d280673c3a139f09b1d7d856990604f07","access_level":"public","create_time":"$D2021-02-25T00:27:27.113Z","update_time":"$D2022-01-10T15:37:50.977Z","view_time":null,"first_public_time":"$D2021-02-28T13:16:23.907Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"4bdeb0bfdcf84a31","login":"cimi","name":"Alex Ciminian","avatar_url":"https://avatars-next.observableusercontent.com/07b20e107f51bbb625d5cccddae3056e717adf4881bfbbd7493aafd65a409dcc","tier":"starter_2024"},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"63ccee3920153d39","login":"cimi","name":"Alex Ciminian","avatar_url":"https://avatars-next.observableusercontent.com/07b20e107f51bbb625d5cccddae3056e717adf4881bfbbd7493aafd65a409dcc","tier":null}],"members":[{"type":"individual","id":"63ccee3920153d39","login":"cimi","name":"Alex Ciminian","avatar_url":"https://avatars-next.observableusercontent.com/07b20e107f51bbb625d5cccddae3056e717adf4881bfbbd7493aafd65a409dcc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"eefb998a73d0b2a6","slug":"java-mission-control","title":"🚀 Java Mission Control","owner":{"id":"4bdeb0bfdcf84a31","login":"cimi","name":"Alex Ciminian"}},"type":"notebook","body":{"title":"Websocket utils","cells":[{"id":0,"value":"md`# Websocket utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"signature(connect, {\n description: `Creates a websocket connection to \\`url\\` and listens for incoming JSON messages.\n\nReturns an object \\`{ conn, recv }\\` where:\n- \\`conn\\` is a [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) instance\n- \\`recv\\` is a generator that yields data when \\`conn\\` receives messages\n\nAll settings are optional. Available **\\`options\\`**:\n${Object.entries({\n compression:\n 'if `true`, the incoming websocket messages are base64 decoded then unzipped.'\n})\n .map(([k, v]) => `- \\`${k}:\\` ${v}`)\n .join(\"\\n\")}`,\n example: [\n `import { connect, showStatus } from '@cimi/websocket-utils'`,\n `ws = connect(\"ws://localhost:8029/\")`,\n md`We can now show the status of the connection in another cell:`,\n `{\n now; // we use now to re-evaluate on every frame\n return showStatus(ws.conn)\n}`,\n md`We can bind a named cell to ws.recv so we listen for updates:`,\n `message = ws.recv`\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function connect(url, options = {}) {\n const { compressed } = options;\n const conn = new WebSocket(url);\n const recv = Generators.observe(notify => {\n conn.onmessage = function(event) {\n try {\n const data = parseString(event.data, compressed);\n notify({ status: \"success\", data });\n } catch (e) {\n notify({ status: \"error\", err: e.message, data: event.data });\n }\n };\n conn.onclose = function() {\n notify(null);\n };\n notify(null);\n });\n return { conn, recv };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"parseString = function parseString(str, compressed = false) {\n // decode base64 input into raw bytes\n const decoded = compressed ? atob(str) : str;\n let jsonStr = decoded;\n if (compressed) {\n const bytes = new Uint8Array(new ArrayBuffer(decoded.length));\n for (let i = 0; i < decoded.length; i++) {\n bytes[i] = decoded.charCodeAt(i);\n }\n\n // unzip and decode to string\n const unzippedBytes = pako.inflate(bytes);\n jsonStr = new TextDecoder(\"utf-8\").decode(unzippedBytes);\n }\n\n // parse JSON string\n return JSON.parse(jsonStr);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"signature(showStatus, {\n description: `Display the status of a websocket connection as HTML text.`,\n example: [\n `showStatus(ws)`,\n html`${showStatus({\n conn: { url: \"ws://localhost:8029\", readyState: 1, OPEN: 1 }\n })}`\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function showStatus(ws) {\n if (!ws || !ws.conn instanceof WebSocket) {\n return md`⚪️ Websocket not initialized`;\n }\n const { conn } = ws;\n const url = html`${conn.url}`;\n switch (conn.readyState) {\n case conn.CONNECTING:\n return md`🔵 Connecting to ${url}`;\n case conn.CLOSING:\n return md`🟡 Disconnecting from ${url}`;\n case conn.CLOSED:\n return md`🔴 Disconnected from ${url}`;\n case conn.OPEN:\n return md`🟢 Connected to ${url}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import { signature } from \"@mootari/signature@420\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"pako = require('pako/dist/pako.es5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"

Preview image icon made by Freepik from www.flaticon.com

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"