efc854b · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

http-api guide: fix codeblock formatting yet again

efc854bTinnus Napbus5 years ago

content/docs/userspace/http-api-guide.md+188−84

compare with master

unifiedsplit

@@ -189,7 +189,7 @@ window.ship = "zod";

189`"zod"` will be replaced with the actual name of the ship in question. You can

190include this file like:

191

192−```html

192+```

193<script src="/session.js"></script>

194```

195

@@ -208,8 +208,8 @@ through its channel system.

208

209The `Urbit` object will generate a random channel ID that looks like

210`1646295453-e1bdfd`, and use a path of `/~/channel/1646295453-e1bdfd` for

211−channel communications. Pokes and subscription requests will be sent to that

211+channel communications. Pokes will and subscription requests will be sent to

212−channel. Responses and subscription updates will be sent out to you on that

212+that channel. Responses and subscription updates will be sent out to you on that

213channel too.

214

215Eyre sends out updates and responses on an [SSE] (Server Sent Event) stream for

@@ -274,14 +274,26 @@ question):

274Here's a simple example that will run `authenticate` for a fakezod when the

275_Connect_ button is pressed:

276

277−```html

277+```

278−<html> <head> <script

278+<html>

279+ <head>

279−src="https://unpkg.com/@urbit/http-api"></script> </head> <body>

280+ <script src="https://unpkg.com/@urbit/http-api"></script>

281+ </head>

282+ <body>

280−<button id="start" type="button" onClick="connect()" >Connect</button>

283+ <button id="start" type="button" onClick="connect()" >Connect</button>

284+ </body>

285+ <script>

281−</body> <script> async function connect() { window.api = await

286+ async function connect() {

282−UrbitHttpApi.Urbit.authenticate({ ship: "zod", url: "localhost:8080", code:

287+ window.api = await UrbitHttpApi.Urbit.authenticate({

288+ ship: "zod",

289+ url: "localhost:8080",

283−"lidlut-tabwed-pillex-ridrup", verbose: true }); document.body.innerHTML =

290+ code: "lidlut-tabwed-pillex-ridrup",

291+ verbose: true

292+ });

293+ document.body.innerHTML = "Connected!";

294+ };

284−"Connected!"; }; </script> </html>

295+ </script>

296+</html>

285```

297```

286

298

287`window.api` can then be used for further communications.

299`window.api` can then be used for further communications.

@@ -312,22 +324,45 @@ mark. The `json` argument just contains the message in a string. If for some

312reason the `hood` agent rejects the poke, "Poke failed!" will be displayed on

324reason the `hood` agent rejects the poke, "Poke failed!" will be displayed on

313the page.

325the page.

314

326

315−```html

327+```

316−<html> <head> <script

328+<html>

329+ <head>

317−src="https://unpkg.com/@urbit/http-api"></script> <script

330+ <script src="https://unpkg.com/@urbit/http-api"></script>

318−src="/session.js"></script> </head> <body> <input id="msg"

331+ <script src="/session.js"></script>

332+ </head>

333+ <body>

319−type="text" placeholder="Message for ship" /> <button id="submit"

334+ <input id="msg" type="text" placeholder="Message for ship" />

320−type="button" onClick="doPoke()" >Submit</button> <p id="err"></p>

335+ <button id="submit" type="button" onClick="doPoke()" >Submit</button>

336+ <p id="err"></p>

337+ </body>

338+ <script>

321−</body> <script> document.getElementById("msg") .addEventListener("keyup",

339+ document.getElementById("msg")

340+ .addEventListener("keyup", function(event) {

322−function(event) { if (event.keyCode === 13) {

341+ if (event.keyCode === 13) {

323−document.getElementById("submit").click(); } }) const api = new

342+ document.getElementById("submit").click();

343+ }

344+ })

345+ const api = new UrbitHttpApi.Urbit("");

324−UrbitHttpApi.Urbit(""); api.ship = window.ship; function doPoke() { const msg =

346+ api.ship = window.ship;

347+ function doPoke() {

325−document.getElementById("msg").value; api.poke({ app: "hood", mark: "helm-hi",

348+ const msg = document.getElementById("msg").value;

349+ api.poke({

350+ app: "hood",

351+ mark: "helm-hi",

352+ json: msg,

326−json: msg, onSuccess: success, onError: error }); } function success() {

353+ onSuccess: success,

354+ onError: error

355+ });

356+ }

357+ function success() {

327−document.getElementById("msg").value = "";

358+ document.getElementById("msg").value = "";

328−document.getElementById("err").innerHTML = ""; } function error() {

359+ document.getElementById("err").innerHTML = "";

360+ }

361+ function error() {

329−document.getElementById("msg").value = "";

362+ document.getElementById("msg").value = "";

330−document.getElementById("err").innerHTML = "Poke failed!"; } </script>

363+ document.getElementById("err").innerHTML = "Poke failed!";

364+ }

365+ </script>

331</html>

366</html>

332```

367```

333

368

@@ -365,22 +400,47 @@ This example will, upon clicking the "Subscribe" button, subscribe to the

365update it receives. You can test it by doing something like posting a message in

400update it receives. You can test it by doing something like posting a message in

366a chat. You can also unsubscribe by clicking the "Unsubscribe" button.

401a chat. You can also unsubscribe by clicking the "Unsubscribe" button.

367

402

368−```html

403+```

369−<html> <head> <script

404+<html>

405+ <head>

370−src="https://unpkg.com/@urbit/http-api"></script> <script

406+ <script src="https://unpkg.com/@urbit/http-api"></script>

371−src="/session.js"></script> </head> <body> <button id="toggle"

407+ <script src="/session.js"></script>

408+ </head>

409+ <body>

372−type="button" onClick="doSub()" >Subscribe</button> <pre

410+ <button id="toggle" type="button" onClick="doSub()" >Subscribe</button>

373−id="event"></pre> </body> <script> const api = new

411+ <pre id="event"></pre>

412+ </body>

413+ <script>

414+ const api = new UrbitHttpApi.Urbit("");

374−UrbitHttpApi.Urbit(""); api.ship = window.ship; const toggle =

415+ api.ship = window.ship;

375−document.getElementById("toggle"); const event =

416+ const toggle = document.getElementById("toggle");

376−document.getElementById("event"); function doSub() { window.id = api.subscribe({

417+ const event = document.getElementById("event");

418+ function doSub() {

419+ window.id = api.subscribe({

420+ app: "graph-store",

421+ path: "/updates",

377−app: "graph-store", path: "/updates", event: printEvent, quit: doSub, err:

422+ event: printEvent,

423+ quit: doSub,

424+ err: subFail

425+ });

378−subFail }); toggle.innerHTML = "Unsubscribe"; toggle.onclick = doUnsub;

426+ toggle.innerHTML = "Unsubscribe";

427+ toggle.onclick = doUnsub;

379−event.innerHTML = "Awaiting event"; }; function doUnsub() {

428+ event.innerHTML = "Awaiting event";

429+ };

430+ function doUnsub() {

431+ api.unsubscribe(window.id);

380−api.unsubscribe(window.id); toggle.innerHTML = "Subscribe"; toggle.onclick =

432+ toggle.innerHTML = "Subscribe";

433+ toggle.onclick = doSub;

381−doSub; event.innerHTML = "Subscription closed"; }; function printEvent(update) {

434+ event.innerHTML = "Subscription closed";

435+ };

436+ function printEvent(update) {

382−event.innerHTML = JSON.stringify(update, null, 2); }; function subFail() {

437+ event.innerHTML = JSON.stringify(update, null, 2);

438+ };

439+ function subFail() {

383−event.innerHTML = "Subscription failed!"; }; </script> </html>

440+ event.innerHTML = "Subscription failed!";

441+ };

442+ </script>

443+</html>

384```

444```

385

445

386### Subscribe Once

446### Subscribe Once

@@ -417,17 +477,33 @@ printing every `graph-store` update it receives, it will instead just print the

417first one it receives and close the subscription. Additionally, it sets a five

477first one it receives and close the subscription. Additionally, it sets a five

418second timeout, and prints an error message if it times out.

478second timeout, and prints an error message if it times out.

419

479

420−```html

480+```

421−<html> <head> <script

481+<html>

482+ <head>

422−src="https://unpkg.com/@urbit/http-api"></script> <script

483+ <script src="https://unpkg.com/@urbit/http-api"></script>

423−src="/session.js"></script> </head> <body> <button type="button"

484+ <script src="/session.js"></script>

485+ </head>

486+ <body>

424−onClick="doSub()" >Subscribe Once</button> <pre id="event"></pre>

487+ <button type="button" onClick="doSub()" >Subscribe Once</button>

488+ <pre id="event"></pre>

489+ </body>

490+ <script>

425−</body> <script> const api = new UrbitHttpApi.Urbit(""); api.ship =

491+ const api = new UrbitHttpApi.Urbit("");

492+ api.ship = window.ship;

426−window.ship; const event = document.getElementById("event"); function doSub() {

493+ const event = document.getElementById("event");

494+ function doSub() {

495+ event.innerHTML = "";

427−event.innerHTML = ""; api.subscribeOnce("graph-store","/updates",5000)

496+ api.subscribeOnce("graph-store","/updates",5000)

497+ .then(printEvent, noEvent);

498+ };

428−.then(printEvent, noEvent); }; function printEvent(update) { event.innerHTML =

499+ function printEvent(update) {

500+ event.innerHTML = JSON.stringify(update, null, 2);

501+ };

429−JSON.stringify(update, null, 2); }; function noEvent(error) { event.innerHTML =

502+ function noEvent(error) {

503+ event.innerHTML = error;

504+ };

430−error; }; </script> </html>

505+ </script>

506+</html>

431```

507```

432

508

433### Scries

509### Scries

@@ -449,16 +525,26 @@ Upon pressing the "Scry Graphs" button, this example will scry the `graph-store`

449agent's `/keys` endpoint for the list of graphs, and print the resulting JSON

525agent's `/keys` endpoint for the list of graphs, and print the resulting JSON

450data.

526data.

451

527

452−```html

528+```

453−<html> <head> <script

529+<html>

530+ <head>

454−src="https://unpkg.com/@urbit/http-api"></script> <script

531+ <script src="https://unpkg.com/@urbit/http-api"></script>

455−src="/session.js"></script> </head> <body> <button id="scry"

532+ <script src="/session.js"></script>

533+ </head>

534+ <body>

456−type="button" onClick="doScry()" >Scry Graphs</button> <pre

535+ <button id="scry" type="button" onClick="doScry()" >Scry Graphs</button>

457−id="result"></pre> </body> <script> const api = new

536+ <pre id="result"></pre>

537+ </body>

538+ <script>

539+ const api = new UrbitHttpApi.Urbit("");

540+ api.ship = window.ship;

458−UrbitHttpApi.Urbit(""); api.ship = window.ship; async function doScry() { var

541+ async function doScry() {

459−groups = await api.scry({app: "graph-store", path: "/keys"});

542+ var groups = await api.scry({app: "graph-store", path: "/keys"});

543+ document.getElementById("result")

460−document.getElementById("result") .innerHTML = JSON.stringify(groups, null, 2);

544+ .innerHTML = JSON.stringify(groups, null, 2);

545+ }

461−} </script> </html>

546+ </script>

547+</html>

462```

548```

463

549

464### Thread

550### Thread

@@ -482,23 +568,44 @@ JSON result of the thread.

482This example takes a hoon expression (such as `(add 1 1)`), evalutes it with the

568This example takes a hoon expression (such as `(add 1 1)`), evalutes it with the

483`graph-eval` thread in the `landscape` desk, and prints the result.

569`graph-eval` thread in the `landscape` desk, and prints the result.

484

570

485−```html

571+```

486−<html> <head> <script

572+<html>

573+ <head>

487−src="https://unpkg.com/@urbit/http-api"></script> <script

574+ <script src="https://unpkg.com/@urbit/http-api"></script>

488−src="/session.js"></script> </head> <body> <input id="hoon"

575+ <script src="/session.js"></script>

576+ </head>

577+ <body>

489−type="text" placeholder="Hoon to evaluate" /> <button id="submit"

578+ <input id="hoon" type="text" placeholder="Hoon to evaluate" />

490−type="button" onClick="runThread()" >Submit</button> <pre

579+ <button id="submit" type="button" onClick="runThread()" >Submit</button>

580+ <pre id="expr"></pre>

491−id="expr"></pre> <pre id="result"></pre> </body> <script>

581+ <pre id="result"></pre>

582+ </body>

583+ <script>

584+ document.getElementById("hoon")

492−document.getElementById("hoon") .addEventListener("keyup", function(event) { if

585+ .addEventListener("keyup", function(event) {

586+ if (event.keyCode === 13) {

493−(event.keyCode === 13) { document.getElementById("submit").click(); } }); const

587+ document.getElementById("submit").click();

588+ }

589+ });

494−hoon = document.getElementById("hoon"); const expr =

590+ const hoon = document.getElementById("hoon");

495−document.getElementById("expr"); const result =

591+ const expr = document.getElementById("expr");

496−document.getElementById("result"); const desk = "landscape"; const api = new

592+ const result = document.getElementById("result");

593+ const desk = "landscape";

497−UrbitHttpApi.Urbit("", "", desk); api.ship = window.ship; async function

594+ const api = new UrbitHttpApi.Urbit("", "", desk);

595+ api.ship = window.ship;

596+ async function runThread() {

498−runThread() { const threadResult = await api.thread({ inputMark:

597+ const threadResult = await api.thread({

598+ inputMark: "graph-view-action",

599+ outputMark: "tang",

499−"graph-view-action", outputMark: "tang", threadName: "graph-eval", body: {eval:

600+ threadName: "graph-eval",

601+ body: {eval: hoon.value}

602+ });

500−hoon.value} }); result.innerHTML = threadResult[0].join("\n"); expr.innerHTML =

603+ result.innerHTML = threadResult[0].join("\n");

604+ expr.innerHTML = hoon.value;

501−hoon.value; hoon.value = ""; }; </script> </html>

605+ hoon.value = "";

606+ };

607+ </script>

608+</html>

502```

609```

503

610

504### Delete Channel

611### Delete Channel

@@ -526,13 +633,10 @@ discarded and a fresh channel ID will be generated.

526- [Eyre Guide][eyre-guide] - Lower-level examples of using Eyre's external API

633- [Eyre Guide][eyre-guide] - Lower-level examples of using Eyre's external API

527 with `curl`.

634 with `curl`.

528- [`http-api` on Github][http-api-src] - The source code for `@urbit/http-api`.

635- [`http-api` on Github][http-api-src] - The source code for `@urbit/http-api`.

529−- [Software Distribution][dist] - This section of documentation explains how to

530− distribute apps in Urbit, including how to package and serve front-end files.

531

636

532[eyre-ext-ref]: /docs/arvo/eyre/external-api-ref

637[eyre-ext-ref]: /docs/arvo/eyre/external-api-ref

533[eyre-guide]: /docs/arvo/eyre/guide

638[eyre-guide]: /docs/arvo/eyre/guide

534[http-api-src]: https://github.com/urbit/urbit/tree/master/pkg/npm/http-api

639[http-api-src]: https://github.com/urbit/urbit/tree/master/pkg/npm/http-api

535−[dist]: /docs/userspace/dist/dist

536[eyre]: /docs/glossary/eyre

640[eyre]: /docs/glossary/eyre

537[vane]: /docs/glossary/vane

641[vane]: /docs/glossary/vane

538[arvo]: /docs/glossary/arvo

642[arvo]: /docs/glossary/arvo