2d:null 2e:["$","title",null,{"children":"Create a table with websocket API | KyungYeol Kim | Observable"}] 33:T404,createRows = (data, quote, anim) => { return _.chain(data) .values() .filter(d => d.quote === quote && +d.quote_vol != 0) .orderBy(d => +d.quote_vol, 'desc') .map(({base, close, high, low, quote_vol, updated, volatility}) => { const tr = width > 430 ? ` ${base} ${close} ${volatility} ${high} ${low} ${quote_vol} ` : ` ${base} ${close} ${quote_vol} ` return tr }) .join('') .value() }34:[] 31:{"id":"a1039c3c54404288","slug":"create-a-table-with-websocket-api","title":"Create a table with websocket API","thumbnail":"8b18d2731d5ee13bed297c7df500107d0bc0ca63b591ba0ec24029607a4c3f88","access_level":"public","create_time":"$D2018-11-15T10:34:57.928Z","update_time":"$D2020-02-24T18:49:02.727Z","view_time":null,"first_public_time":"$D2018-11-16T08:16:18.170Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":792,"publish_version":792,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"6d39e1a0c0d88bcd","slug":"blog","title":"Blog","owner":{"id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim"}},"type":"notebook","body":{"title":"Create a table with websocket API","cells":[{"id":0,"value":"md`# Create a table with websocket API\n\n*${icon({\n text: 'subscribe me',\n collection: 'blog'\n})}* $\"Buy$ \n\n

\n\nobservable 은 [더 나은 방법으로](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) 실험적인 코드를 작성할 수 있도록 도와 줍니다. 여기에 websocket API 를 활용하면, 실시간으로 업데이트되는 문서를 다양한 방식으로 탐색하고, 테스트하면서 만들 수 있습니다. 아래는 암호화폐 거래소 [DAYBIT](https://daybit.com) 의 실시간 [Market summary](https://docs.daybit.com/kr#market-summary) 데이터를 보여주는 테이블 입니다.\\n\n(업데이트된 테이블의 값에는 애니메이션이 표시됩니다.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"BTC = createTable(market_summaries, 'KRW')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"ETH = createTable(market_summaries, 'BTC')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`이런 테이블을 만들기 위해서는 아래와 같은 사항들을 observable notebook 에서 구현할 수 있어야 합니다.\n* [Phoenix Channel](https://hexdocs.pm/phoenix/channels.html#content) 을 통해 데이터 가져오기\n* 지속적으로 전달되는 데이터를 다른 notebook cell 에 전파하기\n* 업데이트된 테이블 항목에 애니메이션을 적용하기`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`## Phoenix Channel 을 통해 데이터 가져오기\n\n[DAYBIT](https://daybit.com) 은 [Phoenix framework](https://phoenixframework.org/) (이하 Phoenix) 로 [구현된 암호화폐 거래소 입니다.](https://vimeo.com/294267371) Phoenix 는 websocket 에 기반을 둔 Channel 을 통해 수십, 수백만에 달하는 클라이언트들과 실시간으로 메시지를 주고받을 수 있습니다. 클라이언트는 Channel 을 통해 하나의 websocket 연결 속에서도 데이터를 주제별로 나누어 전달받을 수 있습니다. Phoenix 가 제공하는 [phoenix.js](https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js) 를 사용하면 웹 클라이언트에서 Channel 을 편리하게 사용할 수 있습니다.\n\n~~[phoenix.js](https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js) 는 module 형태로 작성되지 않았기 때문에, 이를 바로 가져다 observable 에 사용할 수 없습니다. (observable 에서 module 을 가져다 쓰는 방법에 대해서는 [Introduction to require](https://beta.observablehq.com/@tmcw/introduction-to-require) 에 자세히 나와 있습니다.)~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"require('https://cdn.rawgit.com/phoenixframework/phoenix/master/assets/js/phoenix.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`~~다행스럽게도 [phoenix.js](https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js) 파일을 가져다 약간의 수정을 거쳐 node.js 에서 사용할 수 있게 만들어둔 [phoenix-channels](https://github.com/mcampa/phoenix-channels) 란 프로젝트가 있습니다. 이를 사용하면 node.js 에서도 websocket 을 통해 Phoenix 서버로 부터 데이터를 실시간으로 가져올 수 있습니다. phoenix-channels 프로젝트는 [npm 에도 배포되어 있습니다.](https://www.npmjs.com/package/phoenix-channels)~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"require('phoenix-channels')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`~~그래도 phoenix-channels 모듈을 바로 가져올 수 없습니다. phoenix-channels 는 lodash 처럼 한번에 모든 내용을 로드할 수 있는 파일을 제공해 주지 않기 때문입니다. 이런 상황은 능숙한 node.js, web 개발자에게도 헷갈리는 상황인데, observable 의 개발자인 [@tmcw](https://beta.observablehq.com/@tmcw) 가 이 부분을 도와줄 수 있는 [Module require debugger](https://beta.observablehq.com/@tmcw/module-require-debugger) 란 멋진 디버깅 페이지를 만들었습니다. input 항목에 observable 에서 가져오고자 하는 모듈을 이름을 입력하면 가장 적합한 형태를 추천해 줍니다.~~\n\n

\n\n> ~~2019-01-22 update: https://bundle.run/phoenix-channels@1.0.0 에 문제가 있어, [운영자가 데모로 띄워둔 인스턴스](https://github.com/Rich-Harris/packd) 의 [url](https://packd.now.sh) 로 변경합니다.~~\n\n> 2019-06-12 update: \\`require('phoenix@1.4.6')\\` 를 observable notebook 에서 로드할 수 있게되어서 변경합니다.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"pc = require('phoenix@1.4.6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`~~이제 phoenix-channels 모듈을 가져와서~~ [DAYBIT](https://daybit.com) 의 websocket api (${url}) 에 접속할 수 있습니다. 🎉🎉🎉`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"socket = {\n const socket = new pc.Socket(url);\n socket.connect();\n return socket;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`## 지속적으로 전달되는 데이터를 다른 notebook cell 에 전파하기\n\nPhoenix socket 이 만들어 졌으니, 채널에 참가할 수 있습니다. \\`socket.channel\\` 을 사용해 Channel 인스턴스를 생성하고, \\`channel.join\\` 함수를 호출해 채널에 참가할 수 있습니다. 채널에 참가가 성공한 후 \\`request\\` 메시지를 보내면 데이터를 받을 수 있습니다. [DAYBIT](https://daybit.com) api 는 \\`subscription:market_summaries\\` 채널에서 \\`request\\`를 보낸 클라이언트에게 전체 마켓에 대한 데이터를 먼저 내려주고, 업데이트가 있을 때마다, \\`notification\\` 메시지를 통해 업데이트 된 마켓의 정보를 내려줍니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"mermaid`\nsequenceDiagram\n participant client\n participant server\n client->>+server: \"join\"\n server-->>client: \"ok\"\n client->>server: \"request\"\n server-->>client: \"ok\"\n Note over client,server: initial data\n loop every updated\n server-->>client: \"notification\"\n Note over client,server: updated data\n end\n client-->-server: end\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`\\`notification\\` 메시지는 마켓이 업데이트 될 때마다 수신되기 때문에, \\`notification\\` 메시지를 수신하는 코드가 구현된 notebook cell 은 조금 다르게 구현되어야 합니다. observable notebook 의 cell 은 기본적으로 **한 번만 실행되어 결과가 저장되기 때문입니다.** [cell 의존하는 다른 cell 이 다시 실행되지 않으면, cell 은 실행되지 않습니다.](https://beta.observablehq.com/@mbostock/how-observable-runs) 스스로 계속 실행되면서, 자신에 의존하는 다른 cell 을 업데이트하는 cell 을 만들기 위해서는 [\\`Generator\\` 를 사용해 cell 을 만들어야 합니다.](https://beta.observablehq.com/@mbostock/introduction-to-generators#input) 이는 RxJS 에서 새로운 [Observable 인스턴스를 만드는 \\`Observable.create\\` 함수와 유사합니다.](https://rxjs-dev.firebaseapp.com/guide/observable) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"value = Generators.observe(notify => {\n let i = 0\n let s = setInterval(() => notify(i++ % 100), 2000)\n return () => clearInterval(s)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`\\`Generator\\` 로 만들어진 cell 을 참조하면 계속해서 업데이트 되는 cell 을 만들수 있습니다. (${value})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`\\`notification\\` 메시지가 수신될 때마다, 새로운 데이터를 \\`nofify\\` 콜백과 함께 호출하는 함수를 \\`Generator.observe\\` 에 전달해, 새로운 데이터가 수신될 때마다 결과값이 업데이트 되는 cell 을 만들 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"market_summaries = Generators.observe(notify => {\n let state = {};\n const channel = socket.channel('/subscription:market_summaries;86400')\n channel.join()\n .receive('ok', () => {\n // 채널을 처음 구독하면 전체 데이터를 받습니다.\n channel\n .push('request', {timestamp: new Date() * 1000})\n .receive('ok', ({data: [d]}) => {\n state = createState(state, d.data)\n notify(state)\n })\n })\n .receive('error', () => console.log('join error'))\n \n // 전체 데이터를 내려준 이후에는 업데이트된 항목만 받습니다.\n channel.on('notification', ({data: [d]}) => {\n state = createState(state, d.data)\n notify(state)\n })\n return () => channel.leave()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`## 업데이트된 테이블 항목에 애니메이션을 적용하기\n\n${createTable(market_summaries, 'BTC', false)}\n애니메이션이 없는 테이블... 변화를 알기 어렵습니다.\n\n수치가 변경된 항목을 쉽게 확인할 수 있도록, table 에 간단한 css 스타일을 적용할 수 있습니다. 하지만 이 때, css 의 \\`transition\\` 프로퍼티를 사용할 수 없습니다. observable 의 html cell 은 react 처럼 변경된 DOM 만 우아하게 바꿔주는게 아니라, 매번 새로운 DOM 앨리먼트를 생성해서 교체하기 때문입니다. 따라서 기존의 상태가 필요한 \\`transition\\` 프로퍼티 보다는 \\`animation\\` 프로퍼티를 사용하는 것이 좋습니다.\n\n[style cell 처럼](#style) \\`html\\` tagged template literal 에 \\`style\\` 태그를 사용하면 notebook global 하게 적용되는 스타일을 만들 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"createTable = (data, quote = 'BTC', anim = true) => {\n const rows = createRows(data, quote, anim)\n const table = width > 430 ? `\n\n \n \n \n \n \n \n \n \n \n \n \n \n${rows}\n \n

${quote}
Base	Price	Change	High	Low	Volume (24H)

\n` : `\n\n \n \n \n \n \n \n \n \n \n${rows}\n \n

${quote}
Base	Price	Volume (24H)

\n`\n return html`${table}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"createState = (oldState, updatedData) => {\n const newState = _.reduce(updatedData, (acc, n) => {\n const market = `${n.base}/${n.quote}`\n const previous = oldState[market]\n const updated = !!previous ? diff(n, _.omit(previous, ['updated', 'previous'])) : {}\n return Object.assign(acc, {\n [market]: {\n ...n,\n updated,\n previous: _.omit(previous, ['updated', 'previous'])\n }\n })\n }, oldState)\n return newState\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"function diff(target, base) {\n\tfunction changes(target, base) {\n\t\treturn _.transform(target, function(result, value, key) {\n\t\t\tif (!_.isEqual(value, base[key])) {\n\t\t\t\tresult[key] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value;\n\t\t\t}\n\t\t});\n\t}\n\treturn changes(target, base);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":" // updated: Object {quote_vol: \"177.618\", base_vol: \"16050924.000\"}\n // volatility: \"-0.0099\"\n // seconds: 86400\n // quote_vol: \"177.618\"\n // quote: \"BTC\"\n // open: \"0.00001116\"\n // low: \"0.0000109\"\n // high: \"0.0000117\"\n // close: \"0.00001105\"\n // base_vol: \"16050924.000\"\n // base: \"DAY\"\ndiff({\n volatility: \"-0.0099\",\n seconds: 86400,\n quote_vol: \"177.618\",\n base_vol: \"16050924.000\"\n}, {\n volatility: \"-0.0099\",\n seconds: 86400,\n quote_vol: \"177.618\",\n quote: \"BTC\",\n open: \"0.00001116\",\n low: \"0.0000109\",\n high: \"0.0000117\",\n close: \"0.00001105\",\n base_vol: \"16050924.000\",\n base: \"DAY\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"changes = val => {\n if (+val > 0) {\n return 'up'\n } else if (+val < 0) {\n return 'down'\n }\n return 'flat'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"mermaidPackage = require('mermaid@8.4.4/dist/mermaid.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"function mermaid(...args) {\n let div = document.createElement('div')\n div.innerHTML = mermaidPackage.mermaidAPI.render(`mermaid-render-element-${guid()}`, String.raw(...args))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"url = 'wss://api.daybit.com/v1/socket'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"function guid() {\n\treturn 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n\t\tvar r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);\n\t\treturn v.toString(16);\n\t});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"import {icon} from \"@chitacan/rss\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"md`*Clip art courtesy [ClipArt ETC](https://etc.usf.edu/clipart/)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"