socket.io-react-hook icon indicating copy to clipboard operation
socket.io-react-hook copied to clipboard

useSocketEvent could send other types of events

Open niekvenlo opened this issue 6 months ago • 1 comments

I like this hook a lot, but I need to separate sendable and receivable events, so I don't like having to do this:

const { sendMessage } = useSocketEvent('sendable-event');
// lastMessage would always be undefined
// and I can't TS type my events as easily.

I would rather be able to send an event without registering a listener for that same event.

What about something like this:

const { sendMessage, sendAnyMessage } = useSocketEvent();
// sendMessage won't do anything in this case since no event is 'registered'.

<button onClick={() => sendAnyEvent('button-clicked', payload)}>
  click me
</button>

Issue 38

Together with my previous suggestion, this is what using the hook could look like:

//Socket stuff
const { sendAnyMessage } = useSocketEvent();
useSocketEvent('chat-message-received', (message) => setMessages(messages => [...messages, message]);
useSocketEvent('star-received', (message) => setStarCount(count = count++);

// Form stuff
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
<button type="submit" onClick={() => sendAnyEvent('chat-message-sent', { text })}>
  send message
</button>

niekvenlo avatar Jul 10 '25 07:07 niekvenlo

This works:

  const { socket, connected, error } = useSocket();
  socket.emit('eventName', data);

See readme.md https://github.com/nitedani/socket.io-react-hook

nitedani avatar Jul 10 '25 07:07 nitedani