{"id":19856806,"url":"https://github.com/yomorun/webtransport-polyfill","last_synced_at":"2025-08-08T05:34:04.803Z","repository":{"id":77106616,"uuid":"571863572","full_name":"yomorun/webtransport-polyfill","owner":"yomorun","description":"WebTransport implementation to fallback to WebSocket if browser does not support it","archived":false,"fork":false,"pushed_at":"2023-09-25T05:06:55.000Z","size":176,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-08-03T10:43:28.556Z","etag":null,"topics":["javascript","polyfill","websocket","webtransport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yomorun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-11-29T03:27:28.000Z","updated_at":"2025-03-21T08:32:51.000Z","dependencies_parsed_at":"2023-09-24T12:11:09.601Z","dependency_job_id":null,"html_url":"https://github.com/yomorun/webtransport-polyfill","commit_stats":{"total_commits":20,"total_committers":3,"mean_commits":6.666666666666667,"dds":"0.44999999999999996","last_synced_commit":"30547259179cd84a6931fe3472e86b59b1782d4a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yomorun/webtransport-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yomorun%2Fwebtransport-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yomorun%2Fwebtransport-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yomorun%2Fwebtransport-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yomorun%2Fwebtransport-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yomorun","download_url":"https://codeload.github.com/yomorun/webtransport-polyfill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yomorun%2Fwebtransport-polyfill/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269330440,"owners_count":24399115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","polyfill","websocket","webtransport"],"created_at":"2024-11-12T14:16:38.729Z","updated_at":"2025-08-08T05:34:04.769Z","avatar_url":"https://github.com/yomorun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webtransport-polyfill ![NPM](https://badgen.net/npm/v/@yomo/webtransport-polyfill) [![MIT](https://badgen.net/npm/license/@yomo/webtransport-polyfill)](https://codecov.io/gh/yomorun/yomo) [![Discord](https://img.shields.io/discord/770589787404369930.svg?label=discord\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=6A7EC2)](https://discord.gg/RMtNhx7vds)\n\nThe WebTransport Polyfill is a library that allows you to use the WebTransport\nAPI in browsers that do not support it natively by fallback to WebSocket.\n\n## 🍱 WebTransport\n\n[WebTransport](https://web.dev/webtransport) is a web API that uses the HTTP/3\nprotocol as a bi-directional transport. It's intended for two-way communication\nbetween a web client and an HTTP/3 server. It supports sending data both\nunreliably via its datagram APIs, and reliably via its streams APIs.\n\nWebTransport enables low-latency, high-throughput communication between clients\nand servers, which is useful for applications such as SaaS with real-time\ncollaboration feature, gaming, live streaming, video conferencing, and more.\n\n\u003e Try it out The best way to experiment with WebTransport is to start up a\n\u003e compatible HTTP/3 server. You can then use this page with a basic JavaScript\n\u003e client to try out client/server communications.\n\u003e\n\u003e Additionally, a community-maintained echo server is available at\n\u003e [webtransport.day](https://webtransport.day).\n\n_Link:_ https://web.dev/webtransport#try-it-out\n\nHowever, WebTransport is not widely supported by browsers yet:\n\n\u003cimg width=\"1367\" alt=\"image\" src=\"https://user-images.githubusercontent.com/65603/220812476-a384468a-39ab-4d7f-b9ad-645ec4e3c6fe.png\"\u003e\n\n_Link:_ https://caniuse.com/?search=webtransport\n\nFrontend developers have to spend time and effort between high performance\nnetworking and browser compatibility. This polyfill project allows developers to\nuse the WebTransport API in browsers that do not support it natively by\nproviding a fallback transport mechanism and implementing the WebTransport\nprotocol on top of it.\n\n## 🍜 Getting Started\n\n### Installation\n\nYou can install the WebTransport polyfill using npm:\n\n```bash\nnpm install @yomo/webtransport-polyfill\n```\n\nfor browser:\n\n```html\n\u003cscript src=\"https://unpkg.com/@yomo/webtransport-polyfill@latest/dist/index.global.js\" async\u003e\u003c/script\u003e\n```\n\n### Usage\n\nTo use the WebTransport polyfill, you need to import it into your JavaScript\ncode:\n\n```javascript\nimport { WebTransportPolyfill } from \"@yomo/webtransport-polyfill\";\n```\n\nCreate a connection:\n\n```javascript\nconst url = `https://wsss.deno.dev/`;\nconst transport = new WebTransport(url);\n\n// Optionally, set up functions to respond to the connection closing:\ntransport.closed\n  .then(() =\u003e {\n    console.log(`The HTTP/3 connection to ${url} closed gracefully.`);\n  })\n  .catch((error) =\u003e {\n    console.error(`The HTTP/3 connection to ${url} closed due to `, error);\n  });\n\n// Once .ready fulfilled, the connection can be used\nawait transport.ready;\n\n// Sending datagrams to the server\nconst writer = transport.datagrams.writable.getWriter();\nconst data1 = new Uint8Array([65, 66, 67]);\nconst data2 = new Uint8Array([68, 69, 70, 71]);\nwriter.write(data1);\nsetTimeout(() =\u003e {\n  writer.write(data2);\n}, 1e3);\n\nsetTimeout(() =\u003e {\n  // close the connection\n  transport.close({\n    closeCode: 3000,\n    reason: \"close connection by setTimeout\",\n  });\n}, 3e3);\n\n// Read datagrams from the server.\nconst reader = transport.datagrams.readable.getReader();\nwhile (true) {\n  const { value, done } = await reader.read();\n  if (done) {\n    break;\n  }\n  console.log(value);\n}\n```\n\nmore examples can be found here: [test/write.html](./test/write.html)\n\n### Test\n\n```bash\npnpm run test\n```\n\n### Limitations\n\nThe WebTransport polyfill is not a full implementation of the WebTransport API,\nand APIs may change as this project is following\n[W3C Working Draft](https://www.w3.org/TR/webtransport/)\n\nThe polyfill consists of two parts: a client-side JavaScript library that\nexposes the WebTransport API to your web app, and a server-side backend that\nhandles WebSocket and WebTransport connections simultaneously, the source code\ncan be found here: https://github.com/yomorun/presencejs.\n\nTo use this polyfill, you need to install and run the server component on your\nown machine or cloud service. You will also need to include the client-side\nlibrary in your web app and create a WebTransport object with your server's URL.\nThe polyfill will automatically detect wether the browser supports WebTransport\nnatively or not, and use the appropriate transport layer accordingly. You can\nthen use the WebTransport object as you would normally do with the native API.\n\n## 🥑 WebTransport vs WebSocket: Comparison\n\nWebTransport and WebSocket are both technologies that enable real-time\ncommunication between clients and servers over the web. However, there are some\nkey differences between them.\n\n### Protocol\n\nWebSocket uses a single underlying protocol (WebSocket protocol) for both\ntransport and application layer, while WebTransport uses a separate transport\nprotocol (QUIC) and application protocols (e.g., HTTP, WebSocket, and HTTP/3).\n\n### Multiplexing\n\nWebTransport allows for multiplexing of multiple streams over a single\nconnection, which enables better resource utilization and lower latency.\nWebSocket does not support multiplexing by default, but it can be achieved using\nvarious techniques such as sub-protocols.\n\n### Security\n\nWebTransport provides built-in security features such as encrypted transport and\norigin authentication. WebSocket does not provide built-in security features,\nbut it can be secured using SSL/TLS.\n\n### Flexibility\n\nWebTransport is designed to be more flexible than WebSocket, as it can support\ndifferent application protocols, including WebSocket, HTTP/3, and others.\nWebSocket is limited to the WebSocket protocol only.\n\n### Performance\n\nWebTransport is designed to be faster and more efficient than WebSocket,\nespecially in high-latency and low-bandwidth environments. This is due to the\nuse of the QUIC transport protocol, which is optimized for performance in these\ntypes of environments.\n\n### Conclusion\n\nWebTransport and WebSocket are two web APIs that offer different trade-offs\nbetween performance, flexibility, reliability, and compatibility. WebTransport\nmay be a better choice for applications that require low-latency, event-driven\ncommunication . While WebSocket is a well-established technology that has been\nwidely adopted for real-time communication over the web, WebTransport is a newer\ntechnology that offers several advantages in terms of flexibility, security, and\nperformance through multiple streams per connection and unreliable datagrams.\nHowever, WebTransport is not yet widely supported by browsers and servers,\nhopefully this project helped.\n\n## 🍻 Contributing\n\nIf you would like to contribute to the WebTransport polyfill, please fork the\nrepository and submit a pull request. You can also submit issues or feature\nrequests on the GitHub page.\n\nBuild:\n\n```bash\nbun run build\n```\n\nTest:\n\n```bash\nbun run test\n```\n\ne2e:\n\n```bash\nbunx serve out\n```\n\nVerify Publish:\n\n```bash\nnpm pack dry-run\n```\n\nPublish:\n\n```bash\nnpm publish\n```\n\n### Public WebSocket Test Server\n\nWe deploy a public WebSocket server on [Deno](https://deno.com/deploy) for\ntesting the WebTransport polyfill: `https://wsss.deno.dev`.\n\nsource code:\n\n```typescript\nimport { serve } from \"https://deno.land/std@0.180.0/http/server.ts\";\n\nvar a = 0;\n\nserve((_req) =\u003e {\n  console.log(\"\u003e got a _req!\");\n  const upgrade = _req.headers.get(\"upgrade\") || \"\";\n  if (upgrade.toLowerCase() != \"websocket\") {\n    return new Response(\"request isn't trying to upgrade to websocket.\");\n  }\n  const { socket, response } = Deno.upgradeWebSocket(_req);\n  socket.onopen = () =\u003e console.log(\"socket opened\", (new Date()).valueOf());\n  socket.onmessage = (e) =\u003e {\n    console.log(\"\u003e[\" + ++a + \"] socket message:\", Deno.inspect(e.data));\n    socket.send(\n      \"received length=\" + e.data.byteLength + \" timestamp:\" + new Date(),\n    );\n  };\n  socket.onerror = (e) =\u003e console.log(\"socket errored:\", e.message);\n  socket.onclose = () =\u003e console.log(\"socket closed\");\n  return response;\n}, { port: 6000 });\n\nconsole.log(\"working\");\n```\n\n### Test on your local dev machine\n\nwe set domain `lo.yomo.dev` to `127.0.0.1` for development purpose, frontend\ndevelopers can use this domain to test WebTransport polyfill on their local dev.\n\n```bash\n$ dig +all @8.8.8.8 lo.yomo.dev\n\n; \u003c\u003c\u003e\u003e DiG 9.10.6 \u003c\u003c\u003e\u003e +all @8.8.8.8 lo.yomo.dev\n; (1 server found)\n;; global options: +cmd\n;; Got answer:\n;; -\u003e\u003eHEADER\u003c\u003c- opcode: QUERY, status: NOERROR, id: 19969\n;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1\n\n;; OPT PSEUDOSECTION:\n; EDNS: version: 0, flags:; udp: 512\n;; QUESTION SECTION:\n;lo.yomo.dev.\t\t\tIN\tA\n\n;; ANSWER SECTION:\nlo.yomo.dev.\t\t600\tIN\tA\t127.0.0.1\n\n;; Query time: 65 msec\n;; SERVER: 8.8.8.8#53(8.8.8.8)\n;; WHEN: Sun Mar 19 12:34:09 CST 2023\n;; MSG SIZE  rcvd: 56\n```\n\n## 🥡 License\n\nThe WebTransport Polyfill is licensed under the MIT License. See the\n[LICENSE](./LICENSE) file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyomorun%2Fwebtransport-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyomorun%2Fwebtransport-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyomorun%2Fwebtransport-polyfill/lists"}