demo-123-worker.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!doctype html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
  7. <title>Hello, sqlite3</title>
  8. <style>
  9. .warning, .error {color: red}
  10. .error {background-color: yellow}
  11. body {
  12. display: flex;
  13. flex-direction: column;
  14. font-family: monospace;
  15. white-space: break-spaces;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>1-2-sqlite3 worker demo</h1>
  21. <script>(function(){
  22. const logHtml = function(cssClass,...args){
  23. const ln = document.createElement('div');
  24. if(cssClass) ln.classList.add(cssClass);
  25. ln.append(document.createTextNode(args.join(' ')));
  26. document.body.append(ln);
  27. };
  28. const w = new Worker("demo-123.js?sqlite3.dir=jswasm"
  29. /* Note the URL argument on that name. See
  30. the notes in demo-123.js (search for
  31. "importScripts") for why we need
  32. that. */);
  33. w.onmessage = function({data}){
  34. switch(data.type){
  35. case 'log':
  36. logHtml(data.payload.cssClass, ...data.payload.args);
  37. break;
  38. default:
  39. logHtml('error',"Unhandled message:",data.type);
  40. };
  41. };
  42. })();</script>
  43. </body>
  44. </html>