Socket Listening
Listening to real-time events from your server is a cornerstone of building dynamic, interactive applications. With
Hyper-fetch, the useListener
hook provides a declarative and powerful way to subscribe to socket events directly
within your React components. It manages the entire lifecycle of the socket connection, from mounting to unmounting, and
gives you fine-grained control over how to respond to incoming data and connection state changes.
- How to use the
useListener
hook to subscribe to socket events. - How to update your component's state with data received from the socket.
- How to handle connection states like
connecting
anderror
. - How to use helper hooks like
onEvent
,onError
, andonReconnecting
for lifecycle management.
Basic Usage
The useListener
hook is designed for simplicity. You provide it with a listener request
from your backend setup, and
it gives you back the connection status and any data that arrives. Here's how you can set up a basic message listener.
In this example, we'll listen for chat messages and display them in a list. The onEvent
helper hook is the primary way
to access incoming data. It fires every time a new message arrives, allowing you to update your component's state.
function LiveChat() {
const [messages, setMessages] = React.useState([]);
// This is our listener, it will be automatically cleaned up on unmount
const { connected, connecting, error, onEvent, onError, onReconnecting } = useListener(onChatMessage);
// Here we can listen for incoming messages
onEvent(({ data }) => {
setMessages((prev) => [data, ...prev]);
});
// Optional: Handle errors
onError((err) => {
console.error("Connection error!", err);
});
// Optional: Handle reconnecting attempts
onReconnecting((attempt) => {
console.log("Attempting to reconnect...", attempt);
});
if (connecting) {
return <p>Connecting to the chat...</p>;
}
if (error) {
return <p className="text-red-500">Error: {error.message}</p>;
}
return (
<div className="w-full">
<p>Connection status: {connected ? "Connected" : "Disconnected"}</p>
<h3 className="text-lg font-bold mt-4">Messages:</h3>
{!messages.length && <p>No messages yet. Waiting for new messages...</p>}
<div className="flex flex-col-reverse mt-2 max-h-60 overflow-y-auto border p-2 rounded-md">
{messages.map((message, index) => (
<div key={index} className="bg-blue-100 p-2 my-1 rounded-md">
<p className="font-bold">{message.user}</p>
<p>{message.message}</p>
<p className="text-xs text-gray-500">{new Date(message.timestamp).toLocaleTimeString()}</p>
</div>
))}
</div>
</div>
);
}
In the example above, onChatMessage
is a pre-defined listener request. You can learn more about creating them in the
sockets guide.
You now know how to listen for socket events in your React applications!
- You can use
useListener
to subscribe to events when a component mounts. - You can react to incoming data using the
onEvent
helper hook. - You can monitor the connection status with the
connected
,connecting
, anderror
properties. - You can add additional logic for errors and reconnections with
onError
andonReconnecting
.