https://github.com/edivados/nitro-spa

Vite SPA + Nitro Server with Socket.IO & WS in Node environment
https://github.com/edivados/nitro-spa

nitro socket-io spa unjs websocket ws

Last synced: 27 days ago
JSON representation

Vite SPA + Nitro Server with Socket.IO & WS in Node environment

• Host: GitHub
• URL: https://github.com/edivados/nitro-spa
• Owner: edivados
• Created: 2024-01-27T03:58:12.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-20T17:15:16.000Z (about 2 months ago)
• Last Synced: 2024-12-20T18:24:14.753Z (about 2 months ago)
• Topics: nitro, socket-io, spa, unjs, websocket, ws
• Language: JavaScript
• Homepage:
• Size: 228 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vite SPA + Nitro Server with Socket.IO & WS in Node environment

This repository demonstrates how to set up a Single Page Application (SPA) using Vite, integrated with a Nitro server, and demonstrates how to use [Socket.IO](https://github.com/socketio/socket.io) and [WebSockets (WS)](https://github.com/websockets/ws) for real-time communication.

## Overview

### Websocket upgrade handling

In development, the project overwrites Nitros dev preset and uses a custom Node preset in production to enable passing upgrade requests to route handlers. The built in websocket support with [crossws](https://github.com/unjs/crossws) is disabled.

#### Socket.IO with Nitro

Socket.IO is a bit tricky because it expects to be passed an http server instance. For production, it would be possible to make the server accessible, but there doesn't seem to be a way to do that in development because of the way Nitro works under the hood, with a listhen instance and worker running the actual server code.

A solution I settled with is to pass a Node HTTP server instance to Socket.IO without starting it, and manually emit the `request` and `upgrade` events on the server instance.

```ts

export default lazyEventHandler(() => {

  const { httpServer } = useSocketIOServer();

  return eventHandler(event => {

    event.headers.get("upgrade") === "websocket"

      ? httpServer.emit("upgrade", event.node.req, event.node.req.socket, Buffer.alloc(0))

      : httpServer.emit("request", event.node.req, event.node.res);

      event._handled = true;

  });

});

```

#### WS with Nitro

Nothing special here, using the `handleUpgrade` function of WS in the ws server route.

### Request handling

In development, the Nitro renderer proxies requests with [httpxy](https://github.com/unjs/httpxy) to Vite, while in production, it returns the content of `index.html`.

## Running the appplication

### Installation

Clone the repository and install the necessary dependencies:

```sh

git clone https://github.com/edivados/nitro-spa.git 

cd nitro-spa 

npm install

```

### Usage

#### Development

To start the development server, run the following command:

```sh

npm run dev

```

This will start the Vite server along with the Nitro server.

#### Production build and preview

```sh

npm run build

npm run preview

```