WebSocket example using local sandbox

Technical Discussion Getting Started
#1

So I’m an absolute noob and I’m trying to call a simple hello-world app from the browser.

I put together this code pen which basically does the following:

import { connect } from "https://cdn.skypack.dev/@holochain/hc-web-client@0.5.3";

const { callZome, onSignal, close } = await connect({
  url: "ws://localhost:41141",
});

const result = await callZome("test-app", "whoami", "whoami")({
  "arg": "value",
});

console.log(result);

close();

Then I run a sandbox locally, like so:

$ nix-shell https://nightly.holochain.love
[nix-shell:~]$ git clone git@github.com:holochain/holochain-dna-build-tutorial
[nix-shell:~]$ cd holochain-dna-build-tutorial/workdir/dna
[nix-shell:~/holochain-dna-build-tutorial/workdir/dna]$ hc sandbox create
hc-sandbox: Creating 1 conductor sandboxes with same settings
[…]
[nix-shell:~/holochain-dna-build-tutorial/workdir/dna]$ hc sandbox list
hc-sandbox: 
Sandboxes contained in `.hc`
0: /tmp/tmp.bFPCTdnwBX/jQMNS4PUfFBYOWQ1DWCM-
[nix-shell:~/holochain-dna-build-tutorial/workdir/dna]$ hc sandbox run -l
Conductor ready.
hc-sandbox: Running conductor on admin port 41141
hc-sandbox: Connected successfully to a running holochain

The WebSocket client can connect to the sandbox, but it is unclear to me what should be the first argument to callZome(…). The documentation on https://github.com/holochain/hc-web-client suggests it is the “instance ID” but I don’t know how should I get my instance ID, or how this would even work in practice.

For a browser application, ideally I’d like to load all assets as well through the websocket connection (I guess I’d package those into some static DNA?).

Another question: I’m actually connecting to the admin interface, which doesn’t sound like something I’d want to expose to the internet. How do I set up a network interface (e.g. a websocket port) that I can use but that does not give admin access to the sandbox?

Here is the auto-generated conductor-config.yaml:

---
environment_path: /tmp/tmp.bFPCTdnwBX/jQMNS4PUfFBYOWQ1DWCM-
use_dangerous_test_keystore: false
signing_service_uri: ~
encryption_service_uri: ~
decryption_service_uri: ~
dpki: ~
keystore_path: /tmp/tmp.bFPCTdnwBX/jQMNS4PUfFBYOWQ1DWCM-/keystore
passphrase_service: ~
admin_interfaces:
  - driver:
      type: websocket
      port: 0
network: ~

I have a feeling I’m missing something very obvious here. I might have skipped some important part of the tutorial — I was eager to put together an end-to-end hello-world :slight_smile:

Thanks for helping.

2 Likes
#2

As a side note, I find it somewhat annoying that hc sandbox run will fork a holochain but apparently eat its logs — is there any easy way to find the stdout of the holochain process?

1 Like
#3

Adding more updates as I figure things out. It turns out I can add a websocket port to the running conductor instance like so:

[nix-shell:~]$ hc sandbox call --running=41141 add-app-ws 8888

This opens the WebSocket port 8888, and I can connect to it from the browser — still I haven’t found a way to call my Rust function.

I also install the pre-compiled .happ (or I can build it myself — tried both):

 [nix-shell:~/holochain-dna-build-tutorial/workdir/happ] hc sandbox call --running=38271 install-app-bundle --app-id=demo-app ./demo-happ.happ

The DNA is in the sandbox, I can see the hApp and the WebSocket port is open and functional. But I don’t get any response through my WebSocket callZome(…) call, and I still don’t see the logs from the holochain process.

1 Like
#4

Hi @attilaolah,

So you are on the right track, although not really with hc-web-client. That was the js library used in the previous holochain version, and is now deprecated. We need to use holochain conductor-api now.

Also, to run your app in the most simple way you have to generate a sandbox and tell it which port to attach the app interface to: https://github.com/holochain/holochain-dna-build-tutorial#5-running-your-happ.

To get back the logs you need to add the RUST_LOG flag:

RUST_LOG=info hc s generate workdir/happ/profiles-test.happ --run=8888

You have working examples with UI in the holochain-open-dev org: https://github.com/holochain-open-dev/profiles.

1 Like
#5

Cool! Thanks a lot for these pointers. I didn’t notice the Storybook example, nor that hc-web-client was deprecated.

This is definitely going in the right direction though. I like the new @holochain/conductor-api package, and the new examples that use HTML5 custom elements are really neat.

Also thanks for pointing to the RUST_LOG env var. And I was also missing the --run=8888 flag, although I did add the port later using add-app-ws 8888, but the flag is way neater.

2 Likes
#6

For anyone else wondering, here is a minimalistic working example of calling a zome from TypeScript:

import { AppWebsocket } from "https://cdn.skypack.dev/@holochain/conductor-api@0.0.4";

const appSocket = await AppWebsocket.connect(
  "ws://localhost:8888",
  12000  // 12s
);

const appInfo = await appSocket.appInfo({
  installed_app_id: "test-app",
});
const cellId = appInfo.cell_data[0].cell_id;

const result = await appSocket.callZome({
  cap: null as any,
  cell_id: cellId,
  zome_name: "whoami",
  fn_name: "whoami",
  payload: null as any,
  provenance: cellId[1],
});

console.log(result);
1 Like