Can you give an example of how to use this in a browser?

[TsMask]

I am using vue to parse pcap,how do I do it like your https://good.tools/packet-dissector

import {
  Wiregasm,
  WiregasmLibOverrides,
  WiregasmLib,
} from '@goodtools/wiregasm';
import loadWiregasm from '@goodtools/wiregasm/dist/wiregasm.js';

async function wgInit(name: string, fileC: any) {
  const wg = new Wiregasm();

  let lib: WiregasmLib = await loadWiregasm({
    locateFile: (path: string, prefix: string) => {
      console.log('path', path);
      console.log('prefix', prefix);
      if (path.endsWith('.data')) return '/wiregasm/wiregasm.data';
      if (path.endsWith('.wasm')) return '/wiregasm/wiregasm.wasm';
      return prefix + path;
    },
    handleStatus: (type: number, message: string) => {
      console.error('handleStatus', type, message);
    },
  } as WiregasmLibOverrides);
  lib.init();

  const s = wg.load(name, fileC);
  console.log(s);
}

[TsMask]

One more question, here's how the linkage effect on the graph is done

[dehydr8]

The ProtoTree object has all the values needed to compute this:

struct ProtoTree
{
  string label;
  string filter;
  string severity;
  string type;
  string url;
  unsigned int fnum;
  int start;   // start index
  int length; // length of the obj
  int data_source_idx;
  vector<ProtoTree> tree;
};

I'm enabling the source maps again on the good.tools website, so you should be able to see the sources for https://good.tools/packet-dissector to get an idea of how it's done there.

I would also suggest to use a web worker for all Wiregasm operations as using it on the main browser thread can block the UI.

[TsMask]

The ProtoTree object has all the values needed to compute this:

struct ProtoTree
{
  string label;
  string filter;
  string severity;
  string type;
  string url;
  unsigned int fnum;
  int start;   // start index
  int length; // length of the obj
  int data_source_idx;
  vector<ProtoTree> tree;
};

I'm enabling the source maps again on the good.tools website, so you should be able to see the sources for https://good.tools/packet-dissector to get an idea of how it's done there.

I would also suggest to use a web worker for all Wiregasm operations as using it on the main browser thread can block the UI.

Thanks, I'll look into how to implement it with vue. The display and click to link effect on your site

I plan to use gopacket for gopacket repo by Google capture sent to the page via websocket for parsing.

Is there a function available to parse packet data? It would be cool to be able to pass constructed packets into a function that parses the message!

[TsMask]

Thanks, I successfully called and loaded the pcap file through the example and site source view.

The file dist/wiregasm.js provides the function loadWiregasm that initializes wasm

The new Wiregasm() function requires a separate function in the package dist/main.js, but I encountered an error and re-converted the de through ts to get a working

wiregasm.zip

const wg = new Wiregasm();

wg.init(loadWiregasm, {
    wasmBinary: wasmBuffer,
    getPreloadedPackage() {
      return dataBuffer;
    },
    handleStatus: (type, status) => {
      postMessage({ type: 'status', code: type, status: status });
    },
    printErr: error => {
      postMessage({ type: 'error', error: error });
    },
  });

Thanks