socket.io-client-react-hook
v1.0.0
Published
React hooks using socket.io-client v2.3.0
Downloads
37
Maintainers
Readme
socket.io client for @nestjs/platform-socket.io v7 with react hooks
socket.io-client v2.3.0
Installation
yarn add socket.io-client-react-hook
Usage
import { useEffect, useState, useRef } from 'react';
import useSocketClient from 'socket.io-client-react-hook';
const wsUrl = 'ws://localhost:3000';
const Index: React.FC = () => {
const room = `chat-room-001`;
const chatsRef = useRef([]);
const [chats, setChats] = useState([]);
const { client, connected } = useSocketClient(wsUrl, {
transports: ['websocket'],
});
useEffect(() => {
if (connected && client) client.emit('join-room', room);
return () => {
if (client) client.emit('leave-room', room);
};
}, [connected, client]);
useEffect(() => {
if (!client) return;
client.on('event:message_received', (val: any) => {
onChatReceived(val || 'new message');
});
}, [client]);
useEffect(() => {
chatsRef.current = chats;
}, [chats]);
const onChatReceived = (val: string) => {
const ary = Array.from(chatsRef.current);
ary.push(val);
setChats(ary);
};
return (
<div>
<h1>React Socket.IO Client Hook</h1>
<div>
<span>
Connection Status:
<span style={{ margin: '0 20px', color: connected ? 'green' : 'gray' }}>
{connected ? 'Connected' : 'Disconnected'}
</span>
</span>
</div>
<h4>Messages</h4>
<div style={{ border: '1px solid black', width: 500, minHeight: 300 }}>
{chats.map((msg, index) => (
<div key={index}>
{index + 1}: {msg}
</div>
))}
</div>
</div>
);
};
export default Index;