How to use @sap-devx/webview-rpc - 4 common examples

setupRpc() {
      if (this.isInVsCode()) {
        // eslint-disable-next-line
        window.vscode = acquireVsCodeApi()
        this.rpc = new RpcBrowser(window, window.vscode)
        this.initRpc()
      } else {
        const ws = new WebSocket("ws://127.0.0.1:8081")
        ws.onopen = () => {
          this.rpc = new RpcBrowserWebSockets(ws)
          this.initRpc()
        }
      }
    },
    initRpc() {

private constructor(panel: vscode.WebviewPanel, extensionPath: string) {
		this.questionsResolutions = new Map();
		this.panel = panel;
		this.extensionPath = extensionPath;
		this.rpc = new RpcExtension(this.panel.webview);
		const logger: YouiLog = new OutputChannelLog();
		
		this.yeomanui = new YeomanUI(this.rpc, logger, YeomanUIPanel.genFilter);

		// Set the webview's initial html content
		this._update();

		// Listen for when the panel is disposed
		// This happens when the user closes the panel or when the panel is closed programatically
		this.panel.onDidDispose(() => this.dispose(), null, this.disposables);

		// Update the content based on view changes
		this.panel.onDidChangeViewState(
			e => {
				if (this.panel.visible) {
					this._update();

wss.on('connection', (ws) => {
      console.log('new ws connection');

      this.rpc = new RpcExtensionWebSockets(ws);
      //TODO: Use RPC to send it to the browser log (as a collapsed pannel in Vue)
      const logger: YouiLog = new ServerLog(this.rpc);
      this.yeomanui = new YeomanUI(this.rpc, logger);
    });
  }

ws.onopen = () => {
          this.rpc = new RpcBrowserWebSockets(ws)
          this.initRpc()
        }
      }