Socket.io

Socket.IO is the most popular library on NodeJS when working with WebSocket, it enables low-latency, bidirectional and event-based communication between a client and a server. Socket.IO supports both client and server, one of its best features is the capability to fallback to HTTP long-polling or automatic reconnection.

Socket.io Server

To install Socket.io, run the following command

npm install socket.io

Simple Server

import { Server } from 'socket.io'

const io = new Server({
  /* options */
})

io.on('connection', (socket) => {
  // ...
})

io.listen(3000)

With HTTP Server

import { createServer } from 'http'
import { Server } from 'socket.io'

const httpServer = createServer()
const io = new Server(httpServer, {
  /* options */
})

io.on('connection', (socket) => {
  socket.on('data', (data) => {
    if (data === 'Hi') {
      socket.emit('data', 'Hello')
    }
  })
})

httpServer.listen(3000)

Socket.io Client

If you use Socket.io to create the WebSocket Server, then you should also use Socket.io-client for the client side for compatibility.

Installation

To install Socket.io-client you can use the either of the following methods:

• use the client bundle from server package which by default is at /socket.io/socket.io.js
• use the client bundle from a CDN:

<script
  src="https://cdn.socket.io/4.5.3/socket.io.min.js"
  integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi"
  crossorigin="anonymous"
></script>

• install socket.io-client by using npm

npm install socket.io-client

Basic Usage

Basically, the socket.io-client usage is quite similar to the native WebSocket API. But still, there are some differences:

• The open, close and error events from native WebSocket API will be mapped to connect, disconnect and connect_error events in socket.io-client
• socket.io-client is event-based and uses EventEmitter under the hood, so you should use on() method for adding event listeners and emit() method to trigger an event. Also, socket.io-client has wrapped the message event to implement the event-based system, so instead of using message for exchanging messages, you can define and use any event name you want, just make sure the server is also listening to the same event which emitted by the client.

Check out the following React example, both the client and the server are listening and emitting on the data event to exchange messages

You can check the server-side code for the below example at With HTTP Server

function WebSocketClient() {
  const [messages, setMessages] = useState([])

  const handleConnect = () => {
    let connection = null
    if (!('io' in window)) {
      return console.warn('Socket.io client is not installed yet')
    }

    connection = new io(`${WebSocketURI}`)

    connection.on('data', (data) => {
      setTimeout(() => {
        try {
          setMessages((m) => [...m, `Received: ${data}`])
          connection.close()
        } catch (error) {
          console.log(error.message)
        }
      }, 1000)
    })

    connection.on('connect', () => {
      setMessages((m) => [...m, 'Connection established'])
      setTimeout(() => {
        connection.emit('data', 'Hi')
        setMessages((m) => [...m, 'Sent: Hi'])
      }, 1000)
    })

    connection.on('disconnect', () => {
      setMessages((m) => [...m, 'Connection closed'])
    })

    connection.on('connect_error', (err) => {
      setMessages((m) => [...m, `Error: ${err.message}`])
    })
  }

  return (
    <div>
      <Script src="/socket.io/socket.io.js" />
      <Button onClick={handleConnect}>Connect</Button>
      <div>
        {messages.map((m) => (
          <div key={m}>{m}</div>
        ))}
      </div>
    </div>
  )
}