ReactJS

    Socket Options in socket.io-client


    When using Socket from the socket.io-client package, you may use various options to customize its behavior. The options are set at connection initialization and provide a good amount of control over how the client connects to and acts upon the server.

    Basic Setup

    import { io, Socket } from 'socket.io-client';const socket: Socket = io("http://localhost:3000", { // Socket options go here});

    Key Socket Options

    path

    • Description: Defines the server path for the connection.

    • Default: "/socket.io"

    Example:

    path: "/custom-path"

    autoConnect

    • Description: Indicates whether the client should connect automatically upon initialization.

    • Default: true

    Example: autoConnect: false

    reconnection

    • Description: Enables or disables automatic reconnection.

    • Default: true

    Example: reconnection: false

    reconnectionAttempts

    • Description: Sets a limit on the number of reconnection attempts.

    • Default: Infinity

    Example: reconnectionAttempts: 5

    reconnectionDelay

    • Description: The initial delay (in ms) before attempting to reconnect.

    • Default: 1000

    Example: reconnectionDelay: 2000

    reconnectionDelayMax

    • Description: The maximum delay (in ms) for reconnections.

    • Default: 5000

    Example: reconnectionDelayMax: 10000

    timeout

    • Description: The duration of the connection timeout (in ms).

    • Default: 20000

    Example: timeout: 30000

    query

    • Description: Sends additional query parameters with the connection request.

    • Default: {}

    Example: 

    query: { token: "your-auth-token" }

     

    extraHeaders

    • Description: Adds custom headers to the connection request.

    • Default: {}

    Example: 

    extraHeaders: {    Authorization: "Bearer your-token"}

     

    forceNew

    • Description: Forces a new connection instance instead of reusing an existing one.

    • Default: false

    Example: forceNew: true

    Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.

    Contact Us

    Comment

    Share

    facebook
    LinkedIn
    Twitter
    Mail
    React

    Related Center Of Excellence