Skip to content

Commit

Permalink
update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
rphlmr committed Nov 30, 2024
1 parent ba317be commit 6e32dea
Showing 1 changed file with 70 additions and 11 deletions.
81 changes: 70 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ Ok, by default it works, but you may want to customize the server and use some m
#### Node
> [!TIP]
> Check this [example](./examples/react-router) to see how to use it.
> Check this [example](./examples/node/simple/) to see how to use it.
```ts
// vite.config.ts
Expand All @@ -121,7 +121,7 @@ export default defineConfig({

#### Bun
> [!TIP]
> Check this [example](./examples/react-router-bun) to see how to use it.
> Check this [example](./examples/bun/simple/) to see how to use it.
```ts
// vite.config.ts
Expand All @@ -141,7 +141,7 @@ export default defineConfig({

#### Cloudflare Workers
> [!TIP]
> Check this [example](./examples/react-router-cloudflare) to see how to use it.
> Check this [example](./examples/cloudflare/simple/) to see how to use it.
> [!IMPORTANT]
> You need to add the `cloudflareDevProxy` plugin to use the Cloudflare Workers runtime on dev.
Expand Down Expand Up @@ -313,6 +313,12 @@ type ReactRouterHonoServerPluginOptions = {
##### All adapters
```ts
export type HonoServerOptions<E extends Env = BlankEnv> = {
/**
* Hono app to use
*
* {@link Hono}
*/
app?: Hono<E>;
/**
* Enable the default logger
*
Expand Down Expand Up @@ -360,12 +366,6 @@ export type HonoServerOptions<E extends Env = BlankEnv> = {
* Defaults log the port
*/
listeningListener?: (info: AddressInfo) => void;
/**
* Hono constructor options
*
* {@link HonoOptions}
*/
honoOptions?: HonoOptions<E>;
};
```
Expand Down Expand Up @@ -434,6 +434,14 @@ export interface HonoServerOptions<E extends Env = BlankEnv> extends HonoServerO
* {@link https://hono.dev/docs/getting-started/nodejs#http2}
*/
customNodeServer?: CreateNodeServerOptions;
/**
* Callback executed just after `serve` from `@hono/node-server`
*
* **Only applied to production mode**
*
* For example, you can use this to bind `@hono/node-ws`'s `injectWebSocket`
*/
onServe?: (server: ServerType) => void;
}
```
Expand Down Expand Up @@ -533,6 +541,57 @@ export default await createHonoServer({
});
```
### Using WebSockets with Node
You can use `@hono/node-ws` with this package!
> [!TIP]
> Check this [example](./examples/node/websocket/) to see how to use it.
```ts
import { createNodeWebSocket } from "@hono/node-ws";
import { Hono } from "hono";
import { WSContext } from "hono/ws";
import { createHonoServer } from "react-router-hono-server/node";
const app = new Hono();
const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });
// Store connected clients
const clients = new Set<WSContext>();
export default await createHonoServer({
app,
onServe(server) {
injectWebSocket(server);
},
configure(app) {
app.get(
"/ws",
upgradeWebSocket(() => ({
// https://hono.dev/helpers/websocket
onOpen(_, ws) {
console.log("New connection ");
clients.add(ws);
},
onMessage(event, ws) {
console.log(`Message from client: ${event.data}`);
// Broadcast to all clients except sender
clients.forEach((client) => {
if (client.readyState === 1) {
client.send(`${event.data}`);
}
});
},
onClose(_, ws) {
console.log("Connection closed");
clients.delete(ws);
},
}))
);
},
});
```
### Migrate from v1
_You should not expect any breaking changes._
Expand Down Expand Up @@ -594,9 +653,9 @@ Many options are gone or have changed.
##### You used `buildEnd` from `remix()` plugin or a custom `buildDirectory` option
You may know that it has been moved to `react-router.config.ts` (see [here](https://reactrouter.com/upgrading/remix#5-add-a-react-router-config) for more information).
If you used this hook for Sentry, check this [example](./examples/react-router-sentry/react-router.config.ts) to see how to migrate.
If you used this hook for Sentry, check this [example](./examples/node/with-sentry/react-router.config.ts) to see how to migrate.
If you used a custom `buildDirectory` option, check this [example](./examples/react-router-custom-build/react-router.config.ts) to see how to migrate.
If you used a custom `buildDirectory` option, check this [example](./examples/node/custom-build/react-router.config.ts) to see how to migrate.
#### Update your package.json scripts
```json
Expand Down

0 comments on commit 6e32dea

Please sign in to comment.