react-native-tcp-windows

TCP sockets communication for React Native Windows (RNW).

Supports multiple concurrent connections. Every connection is identified by a connectionId ("address:port" for clients, "server:port" for servers) returned by connectToServer/startServer; all other calls and every event are keyed by it. Connect, write, and close run off the JS thread — a slow or stalled peer cannot block the UI — and writes fail with false after a deadline instead of hanging.

Installation

npm install react-native-tcp-windows

Usage

import React, { useEffect, useState } from 'react';
import {
  connectToServer,
  closeConnection,
  writeString,
  bytesToString,
  makeConnectionId,
  eventEmitter,
  TCP_SOCKET_EVENTS,
  type DataReceivedEvent,
} from 'react-native-tcp-windows';

const SERVER_ADDRESS = '127.0.0.1';
const SERVER_PORT = 5000;
const CONNECTION_ID = makeConnectionId(SERVER_ADDRESS, SERVER_PORT);

export default function App() {
  const [log, setLog] = useState<string[]>([]);

  useEffect(() => {
    const connect = async () => {
      try {
        const connectionId = await connectToServer(SERVER_ADDRESS, SERVER_PORT);
        appendLog(`✅ Connected: ${connectionId}`);
      } catch (error: any) {
        appendLog(`❌ Connection failed: ${error.message || error}`);
      }
    };

    connect();

    const subscription = eventEmitter.addListener(
      TCP_SOCKET_EVENTS.DATA_RECEIVED,
      (event: DataReceivedEvent) => {
        // Events from every open connection arrive here — filter on the id.
        if (event.connectionId !== CONNECTION_ID) return;
        const text = bytesToString(event.data);
        appendLog(`📥 Received: ${text}`);
      }
    );

    return () => {
      subscription.remove();
      closeConnection(CONNECTION_ID).then(() => appendLog('🔌 Connection closed'));
    };
  }, []);

  const appendLog = (message: string) => {
    setLog((logs) => [...logs, message]);
  };

  const sendMessage = async (message: string) => {
    const success = await writeString(CONNECTION_ID, message);
    if (success) appendLog(`📤 Sent: ${message}`);
    else appendLog(`⚠️ Failed to send message`);
  };

  return (
    // Your UI components here
  );
}

API

| Function | Description | Returns | | ------------------------ | -------------------------------------------------------- | ------------------ | | connectToServer | Connect as a TCP client; resolves with the connectionId. Reconnecting to the same address:port replaces the existing connection. | Promise<string> | | startServer | Start a TCP server; resolves with the connectionId | Promise<string> | | closeConnection | Close the given connection | Promise<string> | | write | Send raw bytes (number array) on a connection | Promise<boolean> | | writeString | Send UTF-8 string data on a connection | Promise<boolean> | | writeJson | Send JSON data as UTF-8 string on a connection | Promise<boolean> | | getConnectionStatus | Get status of the given connection | Promise<boolean> | | makeConnectionId | Compute a client connectionId without connecting | string | | makeServerConnectionId | Compute a server connectionId without starting it | string | | bytesToString | Convert received byte array to string | string | | bytesToJson | Convert received byte array to parsed JSON object | any |

write resolves false (rather than rejecting) when the send fails or the peer stalls past the internal deadline; it rejects only when the connection does not exist.

Events

You can listen to socket events via the exported eventEmitter. Every event payload includes the connectionId it belongs to:

| Event Name | Event Data Type | Description | | --------------------------------------------- | ------------------------------ | ------------------------------------ | | TCP_SOCKET_EVENTS.DATA_RECEIVED | DataReceivedEvent | Fired when data is received | | TCP_SOCKET_EVENTS.CLIENT_CONNECTED | ClientConnectedEvent | Fired when a client connects | | TCP_SOCKET_EVENTS.CLIENT_DISCONNECTED | ClientDisconnectedEvent | Fired when a client disconnects | | TCP_SOCKET_EVENTS.CONNECTION_STATUS_CHANGED | ConnectionStatusChangedEvent | Fired when connection status changes |

Types

export interface DataReceivedEvent {
  connectionId: string;
  data: number[];
}

export interface ClientConnectedEvent {
  connectionId: string;
  clientAddress: string;
}

export interface ClientDisconnectedEvent {
  connectionId: string;
  clientAddress: string;
}

export interface ConnectionStatusChangedEvent {
  connectionId: string;
  connected: boolean;
  message: string;
}

Migrating from 0.2.x

1.0.0 is a breaking change: the module went from a single implicit connection to a keyed registry.

• closeConnection(), write(data), getConnectionStatus() now take a connectionId as their first argument.
• connectToServer/startServer resolve with the connectionId instead of a message; keep it (or recompute it with makeConnectionId).
• Event payloads gained connectionId; filter on it if you open more than one connection.

Contributing

See the CONTRIBUTING.md for contribution guidelines.

License

MIT

Made with create-react-native-library