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