What is the vision for building realtime applications with Blitz?

[fritzblue]

The classic demo app for a realtime-ready framework is normally a chat application. You open up two windows, send a chat in one window, it shows up in both. Pure magic 🎩 ✨

I love so many concepts in Blitz, but try as I might I'm not seeing the answer for building a simple realtime application like this.

Rails has Action Cable, Django has Channels, Apollo Server has Subscriptions, Phoenix has Channels, Fiber has gofiber/websocket, actix has actix_web::ws. The list goes on.

If I want to build a real time chat app in Blitz, where do I start?

[flybayer]

Great question! As you noticed we currently don't have any built in solution for pushing from server to client. We want to add this, but we're still pre 1.0 and with limited time. My focus for 1.0 is stability and fixes, so will likely be some time before this gets added unless someone else steps up to lead the charge :)

Currently the recommendation is to use a third-party service like Pusher or Room Service.

Note: Currently you can use polling, which may satisfy many use cases. You can set the refetchInterval option in the third argument to all the useQuery hooks

[oyatek]

But what about socket.io? I understand how to use it but i can't understand how to implement it in the "custom server" feature of Blitz.js (I've read in the docs I have to use a custom server if I want to use websockets). When I try to add it in there, a new socket connection is getting created for every request to the server, including requests to static files: images, etc. Or should I move the socket.io server code to app/pages/... ? To app/core/layouts/Layout.tsx maybe?

[oyatek]

OK I have found a way to add socket.io initialization to custom server and _app.tsx, now the problem is - how can I emit socket.io events from blitz queries/mutations? I can't find a way to pass socket.io instance into those.

[beerose]

Hmm, maybe you can pass socket.io through middleware: https://blitzjs.com/docs/middleware?

[AmyYummy]

Hmm, maybe you can pass socket.io through middleware: https://blitzjs.com/docs/middleware?

good sugeestion !

[mkondel]

I used socket.io with blitz. You just need to define the socket in a separate file, then import it throughout in your code.

// server.js
const { sockets } = require('./server_modules/socketOps')
...
const sock = sockets()
console.log('server.js', sock.status, sock.id)

// server_modules/socketOps.js
const { io } = require('socket.io-client')
const { NEXT_PUBLIC_SOCKET_URL } = process.env
const socketClient = io(NEXT_PUBLIC_SOCKET_URL)
const { createServer } = require('http')
const socketServer = require('socket.io')
...

exports.deletedItem = (itemId) => socketClient.emit('foo', itemId)

exports.sockets = () => {
  const port = 8080
  const httpServer = createServer()
  httpServer.listen(port, (err) => console.error(err))

  const io = socketServer(httpServer, { cors: { origin: '*' } })

  io.on('connection', (socket) => {
    socket.on('foo', (data) => {
      const num = Math.random()
      io.emit('bar', num)
    })
  })

  return { status: 'socket.io server started on port ' + port }
}

// app/items/mutations/deletedItem.ts
import { deletedItem } from '../../../server_modules/socketOps'
...

export default resolver.pipe( async ({ id }) => deletedItem(id) )

[beerose]

Thanks for sharing this!