Working with TypeScript, Next.js, and Socket.io

Question

I'm starting a small project that uses TypeScript, Next.js, and Socket.io. I don't understand how to tell TypeScript that I am kind of "merging" these two. For example, here are my files.

/api/socket.ts:

import { NextApiRequest, NextApiResponse } from 'next'
import { Server } from 'socket.io'

const SocketHandler = (req: NextApiRequest, res: NextApiResponse) => {
  if (res.socket.server.io) {
    console.log('Socket is already running.')
  } else {
    console.log('Socket is initializing...')

    const io = new Server(res.socket.server)
    res.socket.server.io = io

    io.on('connection', (socket) => {
      socket.on('input-change', (msg) => {
        socket.broadcast.emit('update-input', msg)
      })
    })
  }

  res.end()
}

export default SocketHandler

/components/client.tsx:

import { useEffect, useState } from 'react'
import io from 'socket.io-client'

import type { ChangeEvent } from 'react'
import type { Socket } from 'socket.io-client'

let socket: undefined | Socket

export default function Client() {
  const [input, setInput] = useState('')
  useEffect(() => {
    socketInitializer()
  }, [])

  const socketInitializer = async () => {
    fetch('/api/socket')
    socket = io()

    socket.on('connect', () => {
      console.log('connected')
    })

    socket.on('update-input', (msg) => {
      setInput(msg)
    })
  }

  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value)

    if (socket !== undefined) {
      socket.emit('input-change', e.target.value)
    }
  }

  return (
    <input
      placeholder="Type something"
      value={input}
      onChange={onChangeHandler}
    />
  )
}

And this code is working. But I'm getting all kinds of warnings / errors, like "Property 'server' does not exist on type 'Socket'", "Object is possibly 'null'." (on res itself).

I understand the main issue is TypeScript does not know I am adding .io on the res.socket.server object. But what I don't understand is A) how to tell it that I am adding that .io, B) why res and socket are possibly null, and C) why .server does not exist on res.socket, according to TypeScript.

I just need some direction and possibly higher-level explanation of how to tackle this. I think I need a .d.ts file, or maybe I just a new interface, but I am not really sure how to properly write a new interface without over-riding types that are already in place.

socket = io() wouldn't work for me because i had to change the import for io to: import { io } from 'socket.io-client'; — iBobb
– iBobb, Commented Jul 2, 2023 at 14:35

graysonlee123 · Accepted Answer · 2022-10-13 19:08:12Z

20

I found an answer. I don't know if it is the correct way of going about it, but this is what I did.

First I made new TypeScript interfaces, starting with the .io property, and moved up all the way back to res. All of these extend what NextApiResponse already is, and just add new properties.

import type { Server as HTTPServer } from 'http'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { Socket as NetSocket } from 'net'
import type { Server as IOServer } from 'socket.io'

interface SocketServer extends HTTPServer {
  io?: IOServer | undefined
}

interface SocketWithIO extends NetSocket {
  server: SocketServer
}

interface NextApiResponseWithSocket extends NextApiResponse {
  socket: SocketWithIO
}

Then I just assigned my new NextApiResponseWithSocket to the res parameter.

const SocketHandler = (_: NextApiRequest, res: NextApiResponseWithSocket) => { ... }

If there is a better way to do this, I would love to know.

answered Oct 13, 2022 at 19:08

graysonlee123

2992 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blitva Over a year ago

Which versions of 'socket.io' and 'socket.io-client' are you using? I'm trying to resolve this myself and there seem to be some compatibility issues.

graysonlee123 Over a year ago

@Blitva I'm using socket.io, socket.io-client: 4.5.2, next: 12.3.1. Hope that helps.

Niels Thiebosch · Accepted Answer · 2024-04-17 15:22:26Z

0

First would it be better to do socket " io('/api/socket') to initialize the connection.

The fetch is aSync and it could be that your change is going before the connection is really up.

It also makes no sense to do the socket.on('input-change') in the on('connect') they all need to be defined before the connection is made.

Otherwise they gets recreated each time a connection is made.

Maybe these tips helps you a bit.

answered Apr 17, 2024 at 15:22

Niels Thiebosch

1478 bronze badges

Comments

miorey · Accepted Answer · 2023-05-18 12:54:08Z

-1

If you're looking for a shorter alternative, you can use a type assertion with the as any syntax:

const socket = req.socket as any;

edited May 18, 2023 at 12:54

miorey

1,0008 silver badges22 bronze badges

answered May 17, 2023 at 16:32

gabrielsalvador

1011 silver badge6 bronze badges

Collectives™ on Stack Overflow

Working with TypeScript, Next.js, and Socket.io

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related