[Feature]: Add Server Reference to FetchEvent Type for WebSocket Communication with Socket.IO in

[aronmal]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I propose enhancing the FetchEvent type in Solid.js to include a reference to the viteServer (similar to an HTTP server), enabling WebSocket communication using libraries like Socket.IO. This enhancement would enable seamless integration of real-time features and dynamic updates into Solid.js applications.

Examples 🌈

NextJS application implementation from this blog post:

import { Server } from 'Socket.IO'

const SocketHandler = (req, res) => {
  if (res.socket.server.io) {
    console.log('Socket is already running')
  } else {
    console.log('Socket is initializing')
    const io = new Server(res.socket.server)
    res.socket.server.io = io
  }
  res.end()
}

export default SocketHandler

I could replicate this implementation in a test project, but when migrating to solid, this turned out to be a hassle.

Possible Solid server implementation:

return await entry({
      request,
      server: viteServer, // Addeding this line in packages/start/dev/server.js
      env: devEnv,
      clientAddress,
      locals,
      fetch: internalFetch
    });

Possible Solid application implementation:

import { Server } from 'Socket.IO'
import { APIEvent } from "solid-start"
import type { Server as HTTPServer } from "http"
import type { Server as IOServer } from "socket.io"
import { ViteDevServer } from "vite"

interface SocketServer extends HTTPServer {
  io?: IOServer
}

export interface ServerWithIO extends ViteDevServer {
  httpServer: SocketServer | null
}

export const GET = ({ request, viteServer }: APIEvent & { viteServer: ServerWithIO }) => {
  if (!viteServer.httpServer) return
  if (viteServer.httpServer.io) {
    console.log('Socket is already running')
  } else {
    console.log('Socket is initializing')
    const io = new Server(server)
    viteServer.httpServer.io = io
  }
}

Motivation 🔦

What are you trying to accomplish?

I am seeking to enable WebSocket communication using libraries like Socket.IO in Solid.js applications. The current lack of a server reference within the FetchEvent type makes it challenging to establish WebSocket connections within Solid.js components.

How has the lack of this feature affected you?

The absence of a server reference within the FetchEvent type hinders developers from integrating WebSocket communication libraries, such as Socket.IO, smoothly into Solid.js applications. Developers often have to resort to workarounds or third-party solutions that may not fully align with Solid.js's reactivity and performance benefits.

Proposed Enhancement

The enhancement involves adding a reference to the viteServer (similar to an HTTP server) in the FetchEvent type. This addition would enable developers to access the server instance directly and establish WebSocket communication using libraries like Socket.IO.

[aronmal]

Implemented for now.