Example of Razzle with socket.io and HMR

[Xananax]

** Example here **

https://github.com/Xananax/razzle-socket.io

As I said on Twitter, I've made it work, but due to my relatively low knowledge of the node http module, socket.io, and the hot reloading process, I fear this is not as elegant or correct as it could be.

It also relies on a fundamental change in src/index.js , which I would rather avoid if I can.

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[ivan-shaban]

Hello, i'm stuck with the same issue and found simplest way to make it work. You don't need to restart your socket server, just reload connection handler, like it works with express.

index.ts:

import { createServer } from 'http'

import express from 'express'
import createSocketServer from 'socket.io'

// this require is necessary for server HMR to recover from error
// eslint-disable-next-line @typescript-eslint/no-var-requires
let app = require('./backend').default;
// eslint-disable-next-line @typescript-eslint/no-var-requires
let socketConnectionHandler = require('./backend/sockets').socketConnectionHandler;

if (module.hot) {
    module.hot.accept([
        './backend/index.ts',
        './backend/sockets/index.ts',
    ], (modules) => {
        console.log(`🔁  HMR Reloading \n${modules.join(',\n')}...`);
        try {
            app = require('./backend').default;
            socketConnectionHandler = require('./backend/sockets').socketConnectionHandler;
        } catch (error) {
            console.error(error);
        }
    });
    console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

const server = express()
    .use((req, res) => app.handle(req, res))

const http = createServer(server)
    .on('error', (err: Error) => {
        console.error(err);
    })
    .listen(port, () => {
        console.log(`> Started on port ${port}`);
    })

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const io = createSocketServer(http)
    .on('connection', (socket) => socketConnectionHandler(socket)) // << use `connection` callback

export default http;

[cskeogh]

@ivan-shaban method didn't hotload for me. Socket.io server io was created at start-up, but hotload didn't update io.

I performed some tweaks, here is my approach. It does hotload ok.

index.ts:

import express from 'express';
import * as http from 'http';

// eslint-disable-next-line @typescript-eslint/no-var-requires
let app = require('./server/Server').default;

// eslint-disable-next-line prefer-const
let httpServer: http.Server;

if (module.hot) {
	module.hot.accept([
		'./server/Server',
		'./server/SocketServer',
	], (modules) => {
		console.log(`🔁  HMR Reloading \n${modules.join(', \n')}...`);
		try {
			// eslint-disable-next-line @typescript-eslint/no-var-requires
			app = require('./server/Server').default;
			if (httpServer !== undefined) {
				// eslint-disable-next-line @typescript-eslint/no-var-requires
				require('./server/SocketServer').default(httpServer);
			}
		} catch (error) {
			console.error(error);
		}
	});
	console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

const expressServer = express()
	.use((req, res) => app.handle(req, res))

httpServer = http.createServer(expressServer)
	.on('error', (err: Error) => {
		console.error(err);
	})
	.listen(port, () => {
		console.log(`> Started at http://localhost:${port}`);
	})
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('./server/SocketServer').default(httpServer);

export default httpServer;

SocketServer.ts:

import * as socketio from 'socket.io';
import * as http from 'http';

const iorouter = (socket: socketio.Socket): void => {
	// Socket.io routing goes here:
};

export default function socketServer(httpServer: http.Server): void {
	const sock = new socketio.Server(httpServer);
	sock.on('connection', iorouter);
}