mirror of
https://github.com/LukeHagar/crossws.git
synced 2025-12-06 12:27:46 +00:00
chore: initial docs
This commit is contained in:
4
docs/.gitignore
vendored
Normal file
4
docs/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
.nuxt
|
||||
.output
|
||||
dist
|
||||
2
docs/.npmrc
Normal file
2
docs/.npmrc
Normal file
@@ -0,0 +1,2 @@
|
||||
shamefully-hoist=true
|
||||
ignore-workspace-root-check=true
|
||||
33
docs/content/1.getting-started/1.index.md
Normal file
33
docs/content/1.getting-started/1.index.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Getting Started
|
||||
|
||||
CrossWS provides a cross-platform API to define well-typed WebSocket apps that can then be integrated into various WebSocket servers using built-in adapters.
|
||||
|
||||
Writing a realtime WebSocket server that can work in different javascript and WebSocket runtimes is challenging because there is no single standard for WebSocket servers. You often need to go into many details of diffrent API implementations and it also makes switching from one runtime costly. CrossWS is a solution to this!
|
||||
|
||||
## Installing Package
|
||||
|
||||
You can install crossws from [npm](https://npmjs.com/crossws):
|
||||
|
||||
::code-group
|
||||
|
||||
```sh [auto]
|
||||
npx nypm i crossws
|
||||
```
|
||||
|
||||
```sh [npm]
|
||||
npm install crossws
|
||||
```
|
||||
|
||||
```sh [Yarn]
|
||||
yarn add crossws
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
pnpm add crossws
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
bun add crossws
|
||||
```
|
||||
|
||||
::
|
||||
35
docs/content/1.getting-started/2.hooks.md
Normal file
35
docs/content/1.getting-started/2.hooks.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# WebSocket Hooks
|
||||
|
||||
Using WebSocket hooks API, you can define a WebSocket server that works across runtimes with same synax.
|
||||
|
||||
CrossWS provides a cross-platform API to define WebSocket servers. An implementation with these hooks works across runtimes without needing you to go into details of any of them (while you always have the power to control low-level hooks). You can only define the life-cycle hooks that you only need and only those will be called on runtime.
|
||||
|
||||
```ts
|
||||
import { defineWebSocketHooks } from "crossws";
|
||||
|
||||
const websocketHooks = defineWebSocketHooks({
|
||||
open(peer) {
|
||||
console.log("[ws] open", peer);
|
||||
},
|
||||
|
||||
message(peer, message) {
|
||||
console.log("[ws] message", peer, message);
|
||||
if (message.text().includes("ping")) {
|
||||
peer.send("pong");
|
||||
}
|
||||
},
|
||||
|
||||
close(peer, event) {
|
||||
console.log("[ws] close", peer, event);
|
||||
},
|
||||
|
||||
error(peer, error) {
|
||||
console.log("[ws] error", peer, error);
|
||||
},
|
||||
|
||||
// ... platform hooks such as bun:drain ...
|
||||
});
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Using `defineWebSocketHooks` to define hooks, we have type support and IDE auto-completion even if not using typescript. This utility does nothing more and you can use a plain object as well if you prefer to.
|
||||
31
docs/content/1.getting-started/3.peer.md
Normal file
31
docs/content/1.getting-started/3.peer.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# WebSocket Peer
|
||||
|
||||
Peer object allows easily interacting with connected clients.
|
||||
|
||||
Almost all Websocket hooks accept a peer instance as their first argument. You can use peer object to get information about each connected client or a message to them.
|
||||
|
||||
> [!TIP]
|
||||
> You can safely log a peer instance to the console using `console.log` it will be automatically stringified with useful information including the remote address and connection status!
|
||||
|
||||
## API Reference
|
||||
|
||||
### `peer.send(message, compress)`
|
||||
|
||||
Send a message to the connected client
|
||||
|
||||
### `peer.id`
|
||||
|
||||
The peer address or unique id (might be `undefined`)
|
||||
|
||||
### `peer.readyState`
|
||||
|
||||
Client connection status (might be `undefined`)
|
||||
|
||||
(read more in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState))
|
||||
|
||||
### `peer.ctx`
|
||||
|
||||
`peer.ctx` is an object that holds adapter specific context. It is scoped with `peer.ctx.[name]`.
|
||||
|
||||
> [!NOTE]
|
||||
> This is an advanced namespace and API changes might happen, so don't rely on it as much aspossible!
|
||||
20
docs/content/1.getting-started/4.message.md
Normal file
20
docs/content/1.getting-started/4.message.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# WebSocket Message
|
||||
|
||||
On `message` hook, you receive a message object containing an incoming message from the client.
|
||||
|
||||
> [!TIP]
|
||||
> You can safely log `message` object to the console using `console.log` it will be automatically stringified!
|
||||
|
||||
## API Reference
|
||||
|
||||
### `message.text()`
|
||||
|
||||
Get stringified text version of the message
|
||||
|
||||
### `message.rawData`
|
||||
|
||||
Raw message data
|
||||
|
||||
### `message.isBinary`
|
||||
|
||||
Indicates if the message is binary (might be `undefined`)
|
||||
14
docs/content/1.getting-started/5.client.md
Normal file
14
docs/content/1.getting-started/5.client.md
Normal file
@@ -0,0 +1,14 @@
|
||||
# WebSocket Client
|
||||
|
||||
Universal WebSocket API to connect to WebSocket servers from clients.
|
||||
|
||||
CrossWS exposes [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) in order to connect to the server.
|
||||
|
||||
For all runtimes, except Node.js, native implementation is used, and for Node.js, a bundled version of [`ws.WebSocket`](https://www.npmjs.com/package/ws) is bundled.
|
||||
|
||||
```js
|
||||
import WebSocket from "crossws/websocket";
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> Using export conditions, the correct version will be always used so you don't have to worry about picking the right build!
|
||||
11
docs/content/1.getting-started/99.adapters.md
Normal file
11
docs/content/1.getting-started/99.adapters.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# Runtime Adapters
|
||||
|
||||
CrossWS allows integrating your WebSocket hooks with different runtimes and platforms using built-in adapters. Each runtime has a specific method of integrating WebSocket. Once integrated, will work consistently even if you change the runtime.
|
||||
|
||||
See Adapters section to learn more about all available built-in adapters
|
||||
|
||||
## Integration with other runtimes
|
||||
|
||||
You can define your custom adapters using `defineWebSocketAdapter` wrapper.
|
||||
|
||||
See other adapter implementations in [`src/adapters`](https://github.com/unjs/crossws/tree/main/src/adapters/) to get an idea of how adapters can be implemented and feel free to directly make a Pull Request to support your environment in CrossWS!
|
||||
39
docs/content/3.adapters/bun.md
Normal file
39
docs/content/3.adapters/bun.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Bun
|
||||
|
||||
Integrate CrossWS with Bun.
|
||||
|
||||
To integrate CrossWS with your Bun server, you need to check for `server.upgrade` and also pass the `websocket` object returned from the adapter to server options. CrossWS leverages native Bun WebSocket API.
|
||||
|
||||
```ts
|
||||
import wsAdapter from "./dist/adapters/bun";
|
||||
|
||||
const { websocket } = wsAdapter({ message: console.log });
|
||||
|
||||
Bun.serve({
|
||||
port: 3000,
|
||||
websocket,
|
||||
fetch(req, server) {
|
||||
if (server.upgrade(req)) {
|
||||
return;
|
||||
}
|
||||
return new Response(
|
||||
`<script>new WebSocket("ws://localhost:3000").addEventListener('open', (e) => e.target.send("Hello from client!"));</script>`,
|
||||
{ headers: { "content-type": "text/html" } },
|
||||
);
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## Adapter Hooks
|
||||
|
||||
- `bun:message (peer, ws, message)`
|
||||
- `bun:open (peer, ws)`
|
||||
- `bun:close (peer, ws)`
|
||||
- `bun:drain (peer)`
|
||||
- `bun:error (peer, ws, error)`
|
||||
- `bun:ping (peer, ws, data)`
|
||||
- `bun:pong (peer, ws, data)`
|
||||
|
||||
## Learn More
|
||||
|
||||
See [`playground/bun.ts`](https://github.com/unjs/crossws/tree/main/playground/bun.ts) for demo and [`src/adapters/bun.ts`](https://github.com/unjs/crossws/tree/main/src/adapters/bun.ts) for implementation.
|
||||
34
docs/content/3.adapters/cloudflare.md
Normal file
34
docs/content/3.adapters/cloudflare.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Cloudflare
|
||||
|
||||
Integrate CrossWS with Cloudflare Workers.
|
||||
|
||||
To integrate CrossWS with your Cloudflare Workers, you need to check for the `upgrade` header.
|
||||
|
||||
```ts
|
||||
import wsAdapter from "crossws/adapters/cloudflare";
|
||||
|
||||
const { handleUpgrade } = wsAdapter({ message: console.log });
|
||||
|
||||
export default {
|
||||
async fetch(request, env, context) {
|
||||
if (request.headers.get("upgrade") === "websocket") {
|
||||
return handleUpgrade(request, env, context);
|
||||
}
|
||||
return new Response(
|
||||
`<script>new WebSocket("ws://localhost:3000").addEventListener("open", (e) => e.target.send("Hello from client!"));</script>`,
|
||||
{ headers: { "content-type": "text/html" } },
|
||||
);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Adapter Hooks
|
||||
|
||||
- `cloudflare:accept (peer)`
|
||||
- `cloudflare:message (peer, event)`
|
||||
- `cloudflare:error (peer, event)`
|
||||
- `cloudflare:close (peer, event)`
|
||||
|
||||
## Learn More
|
||||
|
||||
See [`playground/cloudflare.ts`](https://github.com/unjs/crossws/tree/main/playground/cloudflare.ts) for demo and [`src/adapters/cloudflare.ts`](https://github.com/unjs/crossws/tree/main/src/adapters/cloudflare.ts) for implementation.
|
||||
32
docs/content/3.adapters/deno.md
Normal file
32
docs/content/3.adapters/deno.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Deno
|
||||
|
||||
Integrate CrossWS with Deno.
|
||||
|
||||
To integrate CrossWS with your Deno server, you need to check for the `upgrade` header and then call `handleUpgrade` method from the adapter passing the incoming request object. The returned value is the server upgrade response.
|
||||
|
||||
```ts
|
||||
import wsAdapter from "crossws/adapters/deno";
|
||||
|
||||
const { handleUpgrade } = wsAdapter({ message: console.log });
|
||||
|
||||
Deno.serve({ port: 3000 }, (request) => {
|
||||
if (request.headers.get("upgrade") === "websocket") {
|
||||
return handleUpgrade(request);
|
||||
}
|
||||
return new Response(
|
||||
`<script>new WebSocket("ws://localhost:3000").addEventListener("open", (e) => e.target.send("Hello from client!"));</script>`,
|
||||
{ headers: { "content-type": "text/html" } },
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
## Adapter Hooks
|
||||
|
||||
- `deno:open (peer)`
|
||||
- `deno:message (peer, event)`
|
||||
- `deno:close (peer)`
|
||||
- `deno:error (peer, error)`
|
||||
|
||||
## Learn More
|
||||
|
||||
See [`playground/deno.ts`](./playground/deno.ts) for demo and [`src/adapters/deno.ts`](./src/adapters/deno.ts) for implementation.
|
||||
40
docs/content/3.adapters/node-uws.md
Normal file
40
docs/content/3.adapters/node-uws.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# Node.js (uWebSockets)
|
||||
|
||||
Integrate CrossWS with Node.js using uWebSockets.js.
|
||||
|
||||
Instead of [using `ws`](/adapters/node-ws) you can use [uWebSockets.js](https://github.com/uNetworking/uWebSockets.js) for Node.js servers.
|
||||
|
||||
```ts
|
||||
import { App } from "uWebSockets.js";
|
||||
import wsAdapter from "crossws/adapters/node-uws";
|
||||
|
||||
const { websocket } = wsAdapter({ message: console.log });
|
||||
|
||||
const server = App().ws("/*", websocket);
|
||||
|
||||
server.get("/*", (res, req) => {
|
||||
res.writeStatus("200 OK").writeHeader("Content-Type", "text/html");
|
||||
res.end(
|
||||
`<script>new WebSocket("ws://localhost:3000").addEventListener('open', (e) => e.target.send("Hello from client!"));</script>`,
|
||||
);
|
||||
});
|
||||
|
||||
server.listen(3001, () => {
|
||||
console.log("Listening to port 3001");
|
||||
});
|
||||
```
|
||||
|
||||
## Adapter Hooks
|
||||
|
||||
- `uws:open (ws)`
|
||||
- `uws:message (ws, message, isBinary)`
|
||||
- `uws:close (ws, code, message)`
|
||||
- `uws:ping (ws, message)`
|
||||
- `uws:pong (ws, message)`
|
||||
- `uws:drain (ws)`
|
||||
- `uws:upgrade (res, req, context)`
|
||||
- `uws:subscription (ws, topic, newCount, oldCount)`
|
||||
|
||||
## Learn More
|
||||
|
||||
See [`playground/node-uws.ts`](https://github.com/unjs/crossws/tree/main/playground/node-uws.ts) for demo and [`src/adapters/node-uws.ts`](https://github.com/unjs/crossws/tree/main/src/adapters/node-uws.ts) for implementation.
|
||||
34
docs/content/3.adapters/node-ws.md
Normal file
34
docs/content/3.adapters/node-ws.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Node.js (ws)
|
||||
|
||||
Integrate CrossWS with Node.js using ws.
|
||||
|
||||
To integrate CrossWS with your Node.js HTTP server, you need to connect the `upgrade` event to the `handleUpgrade` method returned from the adapter. CrossWS uses a prebundled version of [ws](https://github.com/websockets/ws).
|
||||
|
||||
```ts
|
||||
import { createServer } from "node:http";
|
||||
import wsAdapter from "crossws/adapters/node";
|
||||
|
||||
const server = createServer((req, res) => {
|
||||
res.end(
|
||||
`<script>new WebSocket("ws://localhost:3000").addEventListener('open', (e) => e.target.send("Hello from client!"));</script>`,
|
||||
);
|
||||
}).listen(3000);
|
||||
|
||||
const { handleUpgrade } = wsAdapter({ message: console.log });
|
||||
server.on("upgrade", handleUpgrade);
|
||||
```
|
||||
|
||||
## Adapter Hooks
|
||||
|
||||
- `node:open (peer)`
|
||||
- `node:message (peer, data, isBinary)`
|
||||
- `node:close (peer, code, reason)`
|
||||
- `node:error (peer, error)`
|
||||
- `node:ping (peer)`
|
||||
- `node:pong (peer)`
|
||||
- `node:unexpected-response (peer, req, res)`
|
||||
- `node:upgrade (peer, req)`
|
||||
|
||||
## Learn More
|
||||
|
||||
See [`playground/node.ts`](https://github.com/unjs/crossws/tree/main/playground/node.ts) for demo and [`src/adapters/node.ts`](https://github.com/unjs/crossws/tree/main/src/adapters/node.ts) for implementation.
|
||||
41
docs/content/index.yml
Normal file
41
docs/content/index.yml
Normal file
@@ -0,0 +1,41 @@
|
||||
title: "CrossWS"
|
||||
description: "Cross-platform WebSocket Servers for Node.js, Deno, Bun and Cloudflare Workers."
|
||||
navigation: false
|
||||
hero:
|
||||
title: "[CrossWS]{.text-primary} :br [Cross-platform WebSockets]{.text-4xl}"
|
||||
description: "One code for Node.js, Deno, Bun and Cloudflare Workers"
|
||||
orientation: horizontal
|
||||
links:
|
||||
- label: "Get Started"
|
||||
icon: "i-heroicons-rocket-launch"
|
||||
to: "/getting-started"
|
||||
size: lg
|
||||
- label: "Contribute on GitHub"
|
||||
icon: "i-simple-icons-github"
|
||||
color: "white"
|
||||
to: "https://github.com/unjs/crossws"
|
||||
target: "_blank"
|
||||
size: lg
|
||||
# code:
|
||||
features:
|
||||
title: "WebSockets, supercharged."
|
||||
links:
|
||||
- label: "Get started"
|
||||
icon: "i-heroicons-rocket-launch"
|
||||
trailingIcon: "i-heroicons-arrow-right-20-solid"
|
||||
color: "gray"
|
||||
to: "/getting-started"
|
||||
size: lg
|
||||
items:
|
||||
- title: "Runtime-Agnostic"
|
||||
description: "Seamlessly integrates with Bun, Deno, Cloudflare Workrs and Node.js (ws or uWebSockets.js)"
|
||||
icon: ""
|
||||
- title: "Made for Performance"
|
||||
description: "High-performance server hooks, avoiding heavy per-connection events API"
|
||||
icon: ""
|
||||
- title: "Lightweight"
|
||||
description: "Zero Dependency with bundled ws for Node.js support. Extremely lightweight and tree-shakable packaging with ESM and CJS support."
|
||||
icon: ""
|
||||
- title: "Developer-friendly"
|
||||
description: "Typed Hooks API and human friednly logging support."
|
||||
icon: ""
|
||||
9
docs/docs.config.ts
Normal file
9
docs/docs.config.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineDocsConfig } from "unjs-docs/config";
|
||||
|
||||
export default defineDocsConfig({
|
||||
name: "CrossWS",
|
||||
description:
|
||||
"Cross-platform WebSocket Servers for Node.js, Deno, Bun and Cloudflare Workers.",
|
||||
github: "unjs/crossws",
|
||||
themeColor: "#f7932a",
|
||||
});
|
||||
11
docs/package.json
Normal file
11
docs/package.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "docs",
|
||||
"scripts": {
|
||||
"dev": "unjs-docs dev",
|
||||
"build": "unjs-docs build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"unjs-docs": "latest"
|
||||
}
|
||||
}
|
||||
10039
docs/pnpm-lock.yaml
generated
Normal file
10039
docs/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
docs/public/icon.svg
Normal file
1
docs/public/icon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><path id="notoV1ElectricPlug0" d="M116.02 117.9c-.09-.87-.44-1.83-1.04-2.93a38.533 38.533 0 0 0-3.68-5.62c-8.16-10.36-22.5-14.6-35.18-12.03c-4.17.85-8.1 2.38-12.16 3.61c-5.28 1.6-10.27 3.11-15.23 3.77c-8.5 1.14-15.5.02-19.46-3.8c-8.79-8.48.75-20.09 11.76-21.86c9.05-1.45 12.57-.73 22.11 1.13c5.47 1.06 12.28 2.39 21.23 3.34c29.23 3.12 40.39-7.06 43.15-28.4c1.06-8.27-.79-15.31-5.35-20.37c-4.99-5.52-12.68-8.19-22.87-7.93c-1.13.03-23.18.24-23.18.24v11.89s22.43-.67 23.48-.7c4.6-.12 10.78.51 14.08 4.16c2.85 3.16 2.93 7.86 2.5 11.24c-2.54 20.03-17.31 19.89-30.58 18.48c-8.46-.9-14.72-2.12-20.26-3.19c-10.3-2-17.75-3.45-29.08-.71C21.84 71.71 12 83.84 13.37 96.44c.59 5.4 3.3 10.13 7.83 13.67c6.91 5.41 17.23 7.52 29.07 5.93c5.87-.79 11.53-2.5 17.01-4.17c4.62-1.4 9.25-3.57 14.13-3.83c5.43-.29 10.98.83 15.47 3.69c4.38 2.79 7.53 7.68 9.35 10.74c1.15 1.93 5.3 1.44 7.28.01c2.5-1.8 2.59-3.82 2.51-4.58"/></defs><use fill="#f79329" href="#notoV1ElectricPlug0"/><clipPath id="notoV1ElectricPlug1"><use href="#notoV1ElectricPlug0"/></clipPath><path fill="#ed6c30" d="M43.24 4.26s1.86 4.33.98 7.81c-.54 2.14-.66 4.35-.8 6.55c-.59 9.23-.81 18.69-.5 27.93c.14 4.23-1.59 10.76-1.59 10.76l1.91 4.01s11.78-.13 13.76-.27c11.51-.82 19.34-3.78 23.82-15.41c.14-.19.3-.37.55-.52c2.35-1.49 6.96-.03 9.18-1.9c2.5-2.1 2.39-7.04 2.52-8.78c.22-2.99-.13-6.33-1.44-9.14c-.52-1.12-1.42-2.53-2.65-2.91c-1.88-.59-3.15-.26-5.08-.61c-.68-.12-1.34-.34-1.84-.87c-.42-.44-1.9-3.13-2.33-4.1c-1.3-2.89-3.49-6.59-9.4-8.92c-8.06-3.17-27.09-3.63-27.09-3.63" clip-path="url(#notoV1ElectricPlug1)"/><path fill="#fcc21b" d="M36.57 4.26s1.86 4.33.98 7.81c-.54 2.14-.67 4.35-.8 6.55c-.59 9.23-.81 18.69-.5 27.93c.14 4.23-1.59 10.76-1.59 10.76l1.91 4.01s11.79-.13 13.75-.27c11.51-.82 19.35-3.78 23.83-15.41c.14-.19.31-.37.55-.52c2.35-1.49 6.96-.03 9.18-1.9c2.5-2.1 2.39-7.04 2.52-8.78c.23-2.99-.13-6.33-1.44-9.14c-.52-1.12-1.42-2.53-2.64-2.91c-1.88-.59-3.16-.26-5.08-.61c-.69-.12-1.35-.34-1.85-.87c-.42-.44-1.9-3.13-2.33-4.1c-1.29-2.89-3.49-6.59-9.4-8.92c-8.06-3.17-27.09-3.63-27.09-3.63"/><path fill="#fcc21b" d="M36.57 4.26H24.93c-4 0-7.25 3.25-7.25 7.25v42.56c0 4 3.25 7.25 7.25 7.25h11.64c4 0 7.25-3.25 7.25-7.25V11.51c0-4-3.25-7.25-7.25-7.25"/><path fill="#fff" d="M39.82 54.07c0 1.78-1.46 3.24-3.25 3.24H24.93c-1.78 0-3.24-1.46-3.24-3.24V11.51c0-1.78 1.46-3.24 3.24-3.24h11.64c1.78 0 3.25 1.46 3.25 3.24z"/><defs><path id="notoV1ElectricPlug2" d="M2.12 17.3c-1.07 0-1.94.88-1.94 1.95v2.69c0 1.07.88 1.94 1.94 1.94h33.9V17.3z"/></defs><use fill="#78a3ad" href="#notoV1ElectricPlug2"/><defs><path id="notoV1ElectricPlug3" d="M2.12 41c-1.07 0-1.94.88-1.94 1.95v2.69c0 1.07.88 1.94 1.94 1.94h33.9V41z"/></defs><use fill="#78a3ad" href="#notoV1ElectricPlug3"/></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user