Skip to main content

WebSocket or Socket io in react

The choice between using raw WebSockets or Socket.IO in a React application depends on the specific requirements of the project.
WebSockets:
  • Pros:
    • Provides a direct, low-level protocol for real-time communication, offering maximum control and flexibility.
    • Minimal overhead, leading to potentially higher performance in certain scenarios.
    • Broad interoperability with various WebSocket servers.
  • Cons:
    • Requires more boilerplate code for features like reconnection, error handling, and message buffering.
    • Steeper learning curve for managing connection states and potential issues.
  • Use Cases: 
    Simple, high-performance applications where fine-grained control over the connection is crucial, such as game data updates or stock tickers.
  • Pros:
    • Built on top of WebSockets, providing a higher-level abstraction with built-in features like automatic reconnection, event-based communication, and fallbacks (like HTTP long-polling) for environments where WebSockets are not supported.
    • Simplified development with a feature-rich API and abstractions for common real-time functionalities.
    • Easier to adopt, especially for developers familiar with Node.js.
  • Cons:
    • Adds some overhead due to its feature set and metadata, potentially leading to slightly larger message sizes.
    • Limited interoperability with non-Socket.IO WebSocket servers.
    • Not designed for global scale in the same way as raw WebSockets.
  • Use Cases: 
    Applications requiring robust real-time features like chat applications, collaborative editing, real-time analytics, and where ease of development and built-in reliability are priorities.
In React:
  • You can use the native browser WebSocket API directly or leverage libraries like react-use-websocket for simplified integration with React's lifecycle and hooks.
  • For Socket.IO, you can use the socket.io-client library and manage the connection within your React components, potentially using React Context or custom hooks for global access.
Conclusion:
  • Choose WebSockets if you need absolute control, minimal overhead, and are comfortable implementing features like reconnection and error handling yourself.
  • Choose Socket.IO if you prioritize ease of development, automatic handling of common real-time challenges, and built-in features like reconnection and event-based communication.

 

WebSocket Sample Code in React
Using the native WebSocket API in a React component:
Code
import React, { useEffect, useState } from 'react';

function WebSocketComponent() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [ws, setWs] = useState(null);

  useEffect(() => {
    const newWs = new WebSocket('ws://localhost:8080'); // Replace with your WebSocket server URL

    newWs.onopen = () => {
      console.log('WebSocket connected');
    };

    newWs.onmessage = (event) => {
      setMessages((prevMessages) => [...prevMessages, event.data]);
    };

    newWs.onclose = () => {
      console.log('WebSocket disconnected');
    };

    newWs.onerror = (error) => {
      console.error('WebSocket error:', error);
    };

    setWs(newWs);

    return () => {
      newWs.close();
    };
  }, []);

  const sendMessage = () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
      ws.send(inputValue);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>WebSocket Chat</h1>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default WebSocketComponent;
Socket.IO Sample Code in React
Using the Socket.IO client library in a React component:
Code
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client'; // Install with: npm install socket.io-client

const socket = io('http://localhost:3001'); // Replace with your Socket.IO server URL

function SocketIOComponent() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    socket.on('connect', () => {
      console.log('Socket.IO connected');
    });

    socket.on('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    socket.on('disconnect', () => {
      console.log('Socket.IO disconnected');
    });

    return () => {
      socket.off('connect');
      socket.off('message');
      socket.off('disconnect');
    };
  }, []);

  const sendMessage = () => {
    socket.emit('message', inputValue); // 'message' is the event name
    setInputValue('');
  };

  return (
    <div>
      <h1>Socket.IO Chat</h1>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default SocketIOComponent;
Back to top