React Socket

Installing

npm i @choewy/react-socket

Uses

SocketClientStorage.create

import { SocketClientStorage } from '@choewy/react-socket';

/** @comment name(default : "default") */
SocketClientStorage.create({ url: 'ws://localhost:4000' });

/** @comment create socketClient with name */
SocketClientStorage.create({ name: 'choewy', url: 'ws://localhost:4000' });

/** @comment create socketClient with name and namespace */
SocketClientStorage.create({ name: 'choewy:alert', url: 'ws://localhost:4000', namespace: 'alert' });

SocketClientStorage.get

import { SocketClientStorage } from '@choewy/react-socket';

/** @comment name(default : "default") */
const defaultSocket = SocketClientStorage.get();

/** @comment name("choewy") */
const choewySocket = SocketClientStorage.get('choewy');

/** @comment name("choewy:alert") */
const choewyAlertSocket = SocketClientStorage.get('choewy:alert');

import { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
import { SocketClientStorage } from '@choewy/react-socket';

function SendMessageForm() {
  const socket = SocketClientStorage.get();
  const [message, setMessage] = useState<string>('');

  const onChangeMessage: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
    setMessage(e.target.value);
  }, []);

  const onSendMessage: FormEventHandler<HTMLFormElement> = useCallback(
    (e) => {
      e.preventDefault();

      if (socket === null || message === '') {
        return;
      }

      socket.emit('message', message);
      setMessage('');
    },
    [socket, message],
  );

  return (
    <form onSubmit={onSendMessage}>
      <input value={message} onChange={onChangeMessage} />
      <button type="submit">Send Message</button>
    </form>
  );
}

export default SendMessageForm;

SocketClient.useConnect

const socket = SocketClientStorage.create({ url: 'ws://localhost:4000' });

function App() {
  socket.useConnect();
}

export default App;

SocketClient.useOnEvent

import { useCallback, useState } from 'react';
import { SocketClientStorage, SocketConnectionHandler, SocketEventHandler } from '@choewy/react-socket';

const socket = SocketClientStorage.create({ url: 'ws://localhost:4000' });

function App() {
  const [connected, setConnected] = useState<boolean>(false);
  const [messages, setMessages] = useState<string[]>([]);

  const onConnect: SocketConnectionHandler = useCallback(() => setConnected(true), []);
  const onMessage: SocketEventHandler<[string]> = useCallback((message: string) => setMessages((prev) => [message, ...prev]), []);

  socket.useOnEvent('connect', onConnect);
  socket.useOnEvent('message', onMessage);
  socket.useConnect();

  return (
    <div className="App">
      <h1>connected : {connected ? 'connected' : 'disconnected'}</h1>
      <h1>Messages</h1>
      <ul>
        {messages.map((message, i) => (
          <li key={['message', i].join('-')}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;