30:[] 2e:{"title":"Websocket utils","cells":[{"id":0,"value":"md`# Websocket utils`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":58,"value":"import { signature } from \"@mootari/signature@420\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"pako = require('pako/dist/pako.es5.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"

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

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}