Hono supports Socket.io?

[PatricioPoncini]

Hello everyone, I would like to know if Hono supports Socket.io, as I want to set up a socket service with Socket.io but I'm having issues with the ServerType. Since Socket.io only accepts one of these types: http.Server | HTTPSServer | Http2SecureServer | number

And when I start a server with Hono, it returns the type ServerType so the Socket.io library gives me problems because it does not accept that typing. Does anyone know how I can set up the server with Hono and pass it as an argument to Socket.io?

[azharalifauzi]

Hi @PatricioPoncini ,

So I came across to this problem as well last week. But, if you take a look at hono ServerType , under the hood the value of it actually Server | Http2Server | Http2SecureServer. So you can do this to solve the type error like this

import { Server } from 'socket.io'
import { Server as HttpServer } from 'http'
import { Hono } from 'hono'

const app = new Hono()
const server = serve(app)

const io = new Server(server as HttpServer)

Note that the type cast depends on the option you pass to serve function. If you pass createServer option using node:https than you should use Http2Server instead.

Hope this helps :)

[aslammac]

can you provide full code?

[czfadmin]

// server
import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { Server } from 'socket.io';
import { Server as HttpServer } from 'http';
const app = new Hono();

app.get('/', (c) => {
  return c.text('Hello Hono!');
});

const server = serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running: http://${info.address}:${info.port}`);
  }
);

const ioServer = new Server(server as HttpServer, {
  path: '/ws',
  serveClient: false,
});
ioServer.on("error", (err) => {
  console.log(err)
})

ioServer.on("connection", (socket) => {
  console.log("client connected")
})

setInterval(() => {
  ioServer.emit("hello", "world")
},1000)

[andrewk604]

Is there a way to do this in Bun?

[onemahmoudadel]

thx

[czfadmin]

Is there a way to do this in Bun?

Bun is not written this way.

[oyal]

@czfadmin May I ask how to use socket.io in a separate routing file?

I don't know how to implement similar functions in hono.

I implemented it in Express like this:

// server.ts
import express from 'express'
import http from 'http'

const app = express()
const server = http.createServer(app)

const io = new Server(server, {
  cors: {
    origin: '*',
  },
})


io.on('connection', (socket) => {
  console.log('a user connected')
})

app.set('io', io)

app.use('/messages', authenticate, messageRouter)

// messages.ts
import express from 'express'

const router = express.Router()

router.get('/', (
  req: express.Request,
  res: express.Response,
) => {
  const io = req.app.get('io')
  io.emit('message', 'hello1')
 // ...
})

[czfadmin]

@oyal I create middleware and then use the set method to mount io to the var variable in the request context every time I request it.

我是通过创建中间件的方法, 然后再每次请求时通过set方法,将io挂载到请求上下文中的var的变量中

// message.ts
import { Server as HttpServer } from 'http';
import { Server } from 'socket.io';

import { createMiddleware } from 'hono/factory';

let io: Server | null;

export function initWebsocket(server: any) {
    io = new Server(server as HttpServer, {
        path: '/ws',
        serveClient: false,
    });

    io.on('error', (err) => {
        console.log(err);
    });

    io.on('connection', (socket) => {
        console.log(`${socket.id}: connected`);
        socket.on('data', (arg, callback) => {
            console.log(arg);
        });
    });
}

const ioMiddleware = createMiddleware<{
    Variables: {
        io: Server;
    };
}>(async (c, next) => {
    if (!c.var.io && io) {
        c.set('io', io);
    }
    await next();
});

export default ioMiddleware;

• index.ts

import { serve } from '@hono/node-server';
import { logger } from 'hono/logger';
import ioMiddleware from './messages';
import { Env } from './types';
import { initWebsocket } from './messages';
import { Hono } from 'hono';
const app = new Hono<Env>();
export const server = serve(
    {
        fetch: app.fetch,
        port: 3000,
    },
    (info) => {
        console.log(`Server is running: http://${info.address}:${info.port}`);
    }
);

initWebsocket(server);

app.use(logger());
app.use(ioMiddleware);

app.get('/', (c) => {
    c.var.io.emit('hello', 'world');
    return c.text('Hono!');
});

export default app;

• types.ts

import { Server } from 'socket.io';

export type Env = {
    Variables: {
        io: Server;
    };
    Bindings: {};
};

import { io } from 'socket.io-client';
const socket = io('http://127.0.0.1:3000', {
    path: '/ws',
    autoConnect: true,
});
// client-side
socket.on('connect', () => {
    console.log(socket.id);
});

socket.on('disconnect', () => {
    console.log(socket.id); // undefined
});

socket.on('hello', (data) => {
    console.log(data);
});

setInterval(() => {
    socket.emit('data', 'hi, server!');
}, 300);

[oyal]

@czfadmin 谢谢，我最后差不多也是这样写的，把 server 放到路由前面，然后通过 c.set 和 c.get 来使用。
Thank you. I wrote it like this in the end, putting the server before the route and using c.set and c.get.

const server = serve({
  fetch: app.fetch,
  port,
}, (info) => {
  console.log(`Server is running on port ${info.port}`)
})

const io = new Server(server, {
  cors: {
    origin: '*',
  },
})

app.use(async (c, next) => {
  c.set('io', io)
  await next()
})

// app.route...

[corazoan]

Great work!. can you tell me. How to initialize io variable if i am using cloudflare worker with hono. because in cloudflare worker i am using wrangler to start a local server.

[markwitt1]

Hey any update if it now fully supports Socket.io with Bun?

[LeulAria]

Any update till now ?

[fruitdrawing]

any update ?

[LeulAria]

not sure bro

[fruitdrawing]

+1 for bun with socket.io support.

[markwitt1]

Related issue: socketio/socket.io#4969

[LeulAria]

any work around ? any one

[darrachequesne]

With Node.js:

import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { Server } from "socket.io";

const app = new Hono();

const httpServer = serve({
    fetch: app.fetch,
    port: 3000,
});

const io = new Server(httpServer, {
    /* options */
});

io.on("connection", (socket) => {
    // ...
});

Reference: https://socket.io/docs/v4/server-initialization/#with-hono-nodejs

With Bun:

import { Server as Engine } from "@socket.io/bun-engine";
import { Server } from "socket.io";
import { Hono } from "hono";

const io = new Server();

const engine = new Engine();

io.bind(engine);

io.on("connection", (socket) => {
  // ...
});

const app = new Hono();

const { websocket } = engine.handler();

export default {
  port: 3000,
  idleTimeout: 30, // must be greater than the "pingInterval" option of the engine, which defaults to 25 seconds

  fetch(req, server) {
    const url = new URL(req.url);

    if (url.pathname === "/socket.io/") {
      return engine.handleRequest(req, server);
    } else {
      return app.fetch(req, server);
    }
  },

  websocket
}

Reference: https://socket.io/docs/v4/server-initialization/#with-hono--bun

Source here: https://github.com/socketio/bun-engine

[ovftank]

@hafidzlvm it working good
read this docs
https://socket.io/docs/v4/server-initialization/#with-hono-nodejs
here is my code snippets

import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { Server } from 'socket.io';

const app = new Hono();
const io = new Server();

io.on('connection', (socket) => {
    console.log(`Client connected: ${socket.id}`);
});

const server = serve(
    {
        fetch: app.fetch,
        port: 3000
    },
    (info) => {
        console.log(`server is running on http://localhost:${info.port}`);
    }
);

io.attach(server);

[hafidzlvm]

im using hono bun btw, but thanks for your response, appreciate it

[hafidzlvm]

im still get stuck cause cant connect by using socketio.client hono bun socket.io server

[ovftank]

@hafidzlvm you install @socket.io/bun-engine and socket.io or not?
this code gen from claude-code, and it work

import { Server as Engine } from '@socket.io/bun-engine';
import { Server } from 'socket.io';
import { Hono } from 'hono';
import { html } from 'hono/html';

const io = new Server();
const engine = new Engine();

io.bind(engine);

io.on('connection', (socket) => {
	console.log(`socket id: ${socket.id}`);
	io.emit('sid', socket.id);
});

const app = new Hono();

app.get('/', (c) => {
	return c.html(html`<!DOCTYPE html>
		<html lang="en">
			<head>
				<title>test bun socketio</title>
				<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
			</head>
			<body>
				<div>
					your sid is
					<span id="sid"></span>
				</div>
				<script>
					const sidElement = document.getElementById('sid');
					const socket = io();
					socket.on('sid', (socketId) => {
						sidElement.textContent = socketId;
					});
				</script>
			</body>
		</html>`);
});

const { websocket } = engine.handler();

export default {
	port: 3000,
	fetch(req: Request, server: any) {
		const url = new URL(req.url);
		if (url.pathname.startsWith('/socket.io/')) {
			return engine.handleRequest(req, server);
		} else {
			return app.fetch(req, server);
		}
	},
	websocket,
};

[hafidzlvm]

Thank you mate ovftank, its work but what im actualy use is

export default {

  port: PORT,
  fetch(req: Request, server: any) {
    const url = new URL(req.url);
    const forwardedProto = req.headers.get("x-forwarded-proto");
    if (forwardedProto) {
      url.protocol = forwardedProto;
    }

    // reference : https://hono.dev/examples/behind-reverse-proxy
    if (url.pathname.startsWith("/socket.io/")) {
         // Create new request with updated URL for Socket.IO
         const socketReq = new Request(url.toString(), req);
         return engine.handleRequest(socketReq, server);
       } else {
         // Create new request with updated URL for regular app routes
         const appReq = new Request(url.toString(), req);
         return app.fetch(appReq, server);
       }
  },
  idleTimeout: 30,
  websocket,
};

This what i've done, its not work if im using this, idk why, but if im uisng from your code which is

export default {
	port: 3000,
	fetch(req: Request, server: any) {
		const url = new URL(req.url);
		if (url.pathname.startsWith('/socket.io/')) {
			return engine.handleRequest(req, server);
		} else {
			return app.fetch(req, server);
		}
	},
	websocket,
};

there is no issue,

I just want to find out how to use nginx reverse proxy and socketio+hono, overall thanks again