index.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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(frontendDiv, `command finished with code ${data.code} and signal ${data.signal}`)
  37. })
  38. command.on('error', error => addMessage(frontendDiv, `command error: "${error}"`))
  39. command.stdout.on('data', line => addMessage(frontendDiv, `command stdout: "${line}"`))
  40. command.stderr.on('data', line => addMessage(frontendDiv, `command stderr: "${line}"`))
  41. command.spawn()
  42. </script>
  43. </body>
  44. </html>