Cannot JSON.parse received data when using socket.io

When using socket.io, I am emitting a message from the server:

io.emit('test', 'hello, world!')

but on the client (in the received MessageEvent), it results in:

data: "42["test","hello, world!"]"

or, in case of using an actual JSON payload:

io.emit('test', { message: 'hello, world!' })

on the client:

data: "42["test",{"message":"hello, world!"}]"

(Also, in case of using send instead of emit, the result is the same.)

which are both none-parseable as a JSON object. Is this expected or is this a a user error? My test setup is very minimal with the following config:

const Test = () => {
    const options = useMemo(
        () => ({
            share: true,
            fromSocketIO: true,
            onMessage: (_event: MessageEvent) => {},
            onClose: (_event: MessageEvent) => {},
            onOpen: (_event: MessageEvent) => {},
            onError: console.error,
        }),
        [],
    )

    const [sendMessage, lastMessage, readyState] = useWebSocket(
        'ws://localhost:3000',
        options,
    )

    console.log(lastMessage)

    return (
        <div />
    )
}

Thanks in advance, AS

[robtaussig]

I like it. If you are interested, this can potentially be a useful add-on that a developer can import into their component instead of the core hook, so they don’t have to think about socketIO parsing.

[GGAlanSmithee]

@robtaussig thanks for the explanation and additional work. What you say makes sense, and I actually ended up doing something in the lines of what you do:

I created an abstraction hook over the on you provide out of the box, where I handle message parsing, updates, memoization etc.

import { useMemo } from 'react'
import useWebSocket from 'react-use-websocket'

interface ISocketIOEvent {
    type: string
    payload: any
}

const emptyEvent: ISocketIOEvent = {
    type: 'empty',
    payload: null,
}

const getSocketData = (event: MessageEvent) => {
    if (!event || !event.data) {
        return emptyEvent
    }

    const match = event.data.match(/\[.*]/)

    if (!match) {
        return emptyEvent
    }

    const data = JSON.parse(match)

    if (!Array.isArray(data) || !data[1]) {
        return emptyEvent
    }

    return {
        type: data[0],
        payload: data[1],
    }
}

const useSocketIO = (): ISocketIOEvent => {
    const options = useMemo(
        () => ({
            share: true,
            fromSocketIO: true,
            onMessage: (_event: MessageEvent) => {},
            onClose: (_event: MessageEvent) => {},
            onOpen: (_event: MessageEvent) => {},
            onError: console.error,
        }),
        [],
    )

    const [, lastMessage] = useWebSocket(
        'ws://localhost:3000', // todo - use secure wss
        options,
    )

    return useMemo(() => getSocketData(lastMessage), [lastMessage])
}

export { ISocketIOEvent, useSocketIO }

(since I’m only interested in the last data for the time being, I don’t return sendMessage or readyState, but that could be added ofcourse.)