remix with websocket

[ggzy12345]

Just some thought:
I see this example: https://github.com/remix-run/examples/tree/main/socket.io
With this example, I can see the traffic via web-socket has to be client side rendering (via javascript). Is there a better way to move this part rendering to the server side rendering similar as loader via http?

[ggzy12345]

found this: #2622 and this: https://sergiodxa.com/articles/use-server-sent-events-with-remix

[na2hiro]

Nobody seems to be talking about this: how can we share objects between a custom server and Remix server side?

I have a working solution (before Vite) so let me share about it a bit.

Problem

Socket.io requires an instance of HTTP server, so it needs to be placed in server.js

// server.js
const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");
const defineSockets = require("./app/server/defineSockets");

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
defineSockets(io)

Let's have a module to hold sockets so we can use it from Remix

// app/server/defineSockets.js
let chat;
export default defineSockets = (io) => {
  chat = io.of("chat")
}
export const broadcastComment = (roomId, comment) => {
  chat.to(roomId).emit(comment)
}

However, this broadcastComment doesn't work from Remix code

// app/routes/chat.tsx
import { broadcastComment } from "~/server/defineSockets";
export const action = () => {
  // process request
  broadcastComment(comment); /* Error, `chat` is undefined!  */
}

This is because defineSockets.js imported from Remix code is different from one imported from server.js!

• server.js
  • --(require)-> app/server/defineSockets.js
  • --(require)-> build/index.js (Remix server bundle), which has app/routes/chat.tsx and app/server/defineSockets.js inlined in it

How we can make it work

Make app/server/defineSockets.js external to both server.js and Remix server bundle, so they will require the same thing

• server.js
  • --(require)-> app/server/defineSockets.js
  • --(require)-> build/index.js (Remix server bundle), which has app/routes/chat.tsx inlined in it
    • --(require)-> app/server/defineSockets.js (same thing as one imported from server.js)

Overview of my solution

I'm not very satisfied with how the code looks, so let me just share an overview

1. Since I use TS everywhere, I set up build script using esbuild to compile and bundle server.ts and app/server/defineSockets.ts. They'll be placed under dist/
2. Create following function and use it for importing defineSockets.ts so Remix won't bundle app/server/defineSockets.ts (externalize)

export const requireCommon = (moduleName: string) {
  return require(moduleName)
}

3. Add path correction logic to requireCommon using __dirname (one of the reasons why it could be broken is that compiled code is moved to inside dist) This bit is too ugly. You can refer to what it ended up looking like here https://gist.github.com/na2hiro/c3cac13dd4af0532504f652fcc3e0918

Future work

I'm trying to make it work with Vite but probably switching to Server-Side Events would be much easier

[sergiodxa]

I was gonna mention that, getLoadContext does basically that, but instead of sharing the socket.io instance I would share an pub/sub system (like EventEmitter or Redis) to communicate async

[alexanderson1993]

Yeah, I'm with Sergio here. I don't know much of what you're building, but I get the feeling you'll have a better time if you pass an abstraction of some kind - like an event emitter as Sergio recommends - instead of the io object directly.

[na2hiro]

I confirmed it works perfectly and I could get rid of complex setup of externalization etc. Thanks a lot!

Those advices totally make sense. It's my hobby project from 2010 and its real-time features are written that way today :)

(off topic, but I directly enjoyed the PHP-ishness of Remix with this project, because the most entirety of the site was originally written in PHP paired with a broadcast-only Node server, and I rewrote it with Remix last year, skipping the usually middle step of SPA-ish code. In some cases I felt like a php file could be translated sentence by sentence to a route file! And just to mention I do work with SPA-ish products in my profession)

[reconbot]

I do this in production as well, I made a wrapper for socket.io and inject that into the getLoadContext, that way in testing I can use a mock

[lambdaxyzt]

can we make vite that it bundle express and server code with remix js too ? so the context or others things on backend could integrate nicely with remix js , is it hard ?

[sostenesapollo]

Do someone managed to run last version remix with socket.io ?

[lambdaxyzt]

yes , I can , I use EventEmitter and create is in express and pass it by using getLoadContext to remix loaders or action , from remix action I pass EventEmitter to specific function that do some task but emit progress of task to EventEmmiter , form Event Emmiter I listen on progress event than broadcast progress with IO.emit to clients , I also manage to authenticate users with cookie for socket connections