Skip to content

Commit

Permalink
chore: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
pi0 committed Feb 24, 2024
1 parent 0bc29a8 commit 5f72d42
Show file tree
Hide file tree
Showing 17 changed files with 279 additions and 249 deletions.
28 changes: 28 additions & 0 deletions docs/.config/docs.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# yaml-language-server: $schema=https://unpkg.com/undocs/schema/config.json

name: CrossWS
shortDescription: runtime agnostic WebSockets
description: Unified WebSocket API for Node.js, Deno, Bun and Cloudflare
Workers.
github: unjs/crossws
landing:
heroLinks:
playOnline:
label: Play Online
icon: i-heroicons-play
to: https://stackblitz.com/github/unjs/crossws/tree/main/examples/h3?file=app.ts
features:
- title: Runtime Agnostic
description:
Seamlessly integrates with Bun, Deno, Cloudflare Workrs and Node.js
(ws or uWebSockets.js)
- title: Made for Performance
description:
High-performance server hooks API designed to avoid creating callbacks
per client but once.
- title: Lightweight
description:
Zero Dependency with bundled ws for Node.js support. Extremely lightweight
and tree-shakable packaging with ESM and CJS support.
- title: Developer Friendly
description: Typed Hooks API and human friednly logging support.
73 changes: 48 additions & 25 deletions docs/1.guide/1.index.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,64 @@
---
icon: ph:book-open-duotone
---

# 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.
> 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!

## Play Online
> [!IMPORTANT]
> CrossWS API is still under development and can change.
You can quickly try CrossWS online with [unjs/h3](https://h3.unjs.io) and [unjs/listhen](https://listhen.unjs.io):
## Quick Start

::callout{to="https://stackblitz.com/github/unjs/crossws/tree/main/examples/h3?file=app.ts"}
Play online in Stackblitz
::
> [!TIP]
> You can try CrossWS with [online playground](https://stackblitz.com/github/unjs/crossws/tree/main/examples/h3?file=app.ts) or using [unjs/h3](https://h3.unjs.io) + [unjs/listhen](https://listhen.unjs.io) or alternatively integrate it with your own framework.
A simple WebSocket implementation looks like this:

```ts
import { defineWebSocketHooks } from "crossws";

## Installing Package
websocket = defineWebSocketHooks({
open(peer) {
console.log("[ws] open", peer);
},

You can install crossws from [npm](https://npmjs.com/crossws):
message(peer, message) {
console.log("[ws] message", peer, message);
if (message.text().includes("ping")) {
peer.send("pong");
}
},

::code-group
close(peer, event) {
console.log("[ws] close", peer, event);
},

```sh [auto]
npx nypm i crossws
```
error(peer, error) {
console.log("[ws] error", peer, error);
},
});
```

::read-more{to="/guide/api" title="API Usage"}
See [API Usage](/guide/api) for more usage details.
::

::read-more{to="/adapters" title="Adapters"}
The universal handler can be easily integrated with different platforms and frameworks. See [Adapters](/adapters) for more details.
::

```sh [npm]
npm install crossws
```
## Using Package

```sh [Yarn]
yarn add crossws
```
You can install `crossws` from [npm](https://npmjs.com/crossws) in your project:

```sh [pnpm]
pnpm add crossws
```
:pm-install{name="crossws"}

```sh [bun]
bun add crossws
```
Alternatively you can import it from CDN:

::
```js
import { crossws } from "https://esm.sh/crossws";
```
95 changes: 95 additions & 0 deletions docs/1.guide/2.api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
icon: mynaui:api
---

# API

> 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.

> [!IMPORTANT]
> CrossWS API is still under development and can change.
```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 ...
});
```

> [!TIP]
> 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.
## Peer Object

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

#### `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{to="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState" title="readyState in MDN"}

#### `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!
## Message Object

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

#### `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`)
35 changes: 0 additions & 35 deletions docs/1.guide/2.hooks.md

This file was deleted.

31 changes: 0 additions & 31 deletions docs/1.guide/3.peer.md

This file was deleted.

20 changes: 0 additions & 20 deletions docs/1.guide/4.message.md

This file was deleted.

14 changes: 0 additions & 14 deletions docs/1.guide/5.client.md

This file was deleted.

6 changes: 5 additions & 1 deletion docs/2.adapters/0.index.md → docs/2.adapters/1.index.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
---
icon: emojione-monotone:electric-plug
---

# 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
See Adapters section to learn more about all available built-in adapters.

## Integration with other runtimes

Expand Down
10 changes: 7 additions & 3 deletions docs/2.adapters/bun.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
icon: simple-icons:bun
---

# Bun

Integrate CrossWS with 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.

Expand Down Expand Up @@ -34,6 +38,6 @@ Bun.serve({
- `bun:ping (peer, ws, data)`
- `bun:pong (peer, ws, data)`

## Learn More

::read-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.
::
10 changes: 7 additions & 3 deletions docs/2.adapters/cloudflare.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
icon: devicon-plain:cloudflareworkers
---

# Cloudflare

Integrate CrossWS with Cloudflare Workers.
> Integrate CrossWS with Cloudflare Workers.
To integrate CrossWS with your Cloudflare Workers, you need to check for the `upgrade` header.

Expand Down Expand Up @@ -29,6 +33,6 @@ export default {
- `cloudflare:error (peer, event)`
- `cloudflare:close (peer, event)`

## Learn More

::read-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.
::
10 changes: 7 additions & 3 deletions docs/2.adapters/deno.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
icon: teenyicons:deno-solid
---

# Deno

Integrate CrossWS with 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.

Expand All @@ -27,6 +31,6 @@ Deno.serve({ port: 3000 }, (request) => {
- `deno:close (peer)`
- `deno:error (peer, error)`

## Learn More

::read-more
See [`playground/deno.ts`](./playground/deno.ts) for demo and [`src/adapters/deno.ts`](./src/adapters/deno.ts) for implementation.
::
Loading

0 comments on commit 5f72d42

Please sign in to comment.