react-native-tcp-windows

TCP sockets communication for React Native Windows (RNW).

Installation

npm install react-native-tcp-windows

Usage

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

const SERVER_ADDRESS = '127.0.0.1';
const SERVER_PORT = 5000;

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

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

    connect();

    const subscription = eventEmitter.addListener(
      TCP_SOCKET_EVENTS.DATA_RECEIVED,
      (event: DataReceivedEvent) => {
        const text = bytesToString(event.data);
        appendLog(`📥 Received: ${text}`);
      }
    );

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

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

  const sendMessage = async (message: string) => {
    const success = await writeString(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 to a server | Promise<string> | | startServer | Start a TCP server listening on a port | Promise<string> | | closeConnection | Close current client or server connection | Promise<string> | | write | Send raw bytes (number array) | Promise<boolean> | | writeString | Send UTF-8 string data | Promise<boolean> | | writeJson | Send JSON data as UTF-8 string | Promise<boolean> | | getConnectionStatus | Get connection status | Promise<boolean> | | bytesToString | Convert received byte array to string | string | | bytesToJson | Convert received byte array to parsed JSON object | any |

Events

You can listen to socket events via the exported eventEmitter:

| 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 {
  data: number[];
}

export interface ClientConnectedEvent {
  clientAddress: string;
}

export interface ClientDisconnectedEvent {
  clientAddress: string;
}

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

Contributing

See the CONTRIBUTING.md for contribution guidelines.

License

MIT

Made with create-react-native-library