index.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Sidecar</title>
  7. <style>
  8. .container {
  9. display: flex;
  10. }
  11. .container > div {
  12. flex: 1;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="container">
  18. <div id="backend"></div>
  19. <div id="frontend"></div>
  20. </div>
  21. <script>
  22. function addMessage(div, message) {
  23. const p = document.createElement('p')
  24. p.innerText = message
  25. div.appendChild(p)
  26. }
  27. const backendDiv = document.getElementById('backend')
  28. window.__TAURI__.event.listen('message', (event) => {
  29. addMessage(backendDiv, event.payload)
  30. })
  31. const frontendDiv = document.getElementById('frontend')
  32. const { Command } = window.__TAURI__.shell
  33. const command = Command.sidecar('binaries/app')
  34. command.on('close', (data) => {
  35. addMessage(
  36. frontendDiv,
  37. `command finished with code ${data.code} and signal ${data.signal}`
  38. )
  39. })
  40. command.on('error', (error) =>
  41. addMessage(frontendDiv, `command error: "${error}"`)
  42. )
  43. command.stdout.on('data', (line) =>
  44. addMessage(frontendDiv, `command stdout: "${line}"`)
  45. )
  46. command.stderr.on('data', (line) =>
  47. addMessage(frontendDiv, `command stderr: "${line}"`)
  48. )
  49. command.spawn()
  50. </script>
  51. </body>
  52. </html>