index.html 1.5 KB

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