nodeSocket React Native Client

React Native client library for connecting to nodeSocket servers.

Installation

npm install nodesocket-react-native
npm install react-native-tcp-socket

TypeScript Usage

import NodeSocketClient from 'nodesocket-react-native';

const client = new NodeSocketClient('192.168.1.100', 3000);

// Type-safe event listeners
client.on('connect', () => {
    console.log('Connected to server');
});

client.on('message', (message: string) => {
    console.log('Received:', message);
});

client.on('error', (error: Error) => {
    console.error('Error:', error.message);
});

// Async/await with proper typing
const connectToServer = async (): Promise<void> => {
    try {
        await client.connect();
        const success: boolean = client.send('Hello from TypeScript!');
        console.log('Message sent:', success);
    } catch (error) {
        console.error('Connection failed:', error);
    }
};

JavaScript Usage

import NodeSocketClient from 'nodesocket-react-native';

const client = new NodeSocketClient('192.168.1.100', 3000);

// Event listeners
client.on('connect', () => {
    console.log('Connected to server');
});

client.on('message', (message) => {
    console.log('Received:', message);
});

client.on('disconnect', () => {
    console.log('Disconnected');
});

client.on('error', (error) => {
    console.error('Error:', error);
});

// Connect and send messages
async function connectToServer() {
    try {
        await client.connect();
        client.send('Hello from React Native!');
    } catch (error) {
        console.error('Connection failed:', error);
    }
}

connectToServer();

TypeScript Chat Example

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, ScrollView, StyleSheet } from 'react-native';
import NodeSocketClient from 'nodesocket-react-native';

interface Message {
  id: number;
  text: string;
}

const ChatApp: React.FC = () => {
  const [client] = useState<NodeSocketClient>(new NodeSocketClient('192.168.1.100', 3000));
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputText, setInputText] = useState<string>('');
  const [connected, setConnected] = useState<boolean>(false);

  useEffect(() => {
    client.on('connect', () => {
      setConnected(true);
      client.send('login:TypeScriptUser');
    });

    client.on('message', (message: string) => {
      setMessages(prev => [...prev, { id: Date.now(), text: message }]);
    });

    client.on('disconnect', () => {
      setConnected(false);
    });

    client.on('error', (error: Error) => {
      console.error('Socket error:', error.message);
    });

    client.connect().catch(console.error);

    return () => client.disconnect();
  }, [client]);

  const sendMessage = (): void => {
    if (inputText.trim() && connected) {
      client.send(inputText);
      setInputText('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        Status: {connected ? 'Connected' : 'Disconnected'}
      </Text>
      
      <ScrollView style={styles.messages}>
        {messages.map((msg) => (
          <Text key={msg.id} style={styles.message}>{msg.text}</Text>
        ))}
      </ScrollView>
      
      <TextInput
        value={inputText}
        onChangeText={setInputText}
        placeholder="Type message..."
        style={styles.input}
      />
      
      <Button title="Send" onPress={sendMessage} disabled={!connected} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  status: { fontSize: 16, marginBottom: 10 },
  messages: { flex: 1, marginVertical: 10 },
  message: { padding: 5 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10 }
});

export default ChatApp;

Chat Example

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, ScrollView } from 'react-native';
import NodeSocketClient from 'nodesocket-react-native';

export default function ChatApp() {
    const [client] = useState(new NodeSocketClient('192.168.1.100', 3000));
    const [messages, setMessages] = useState([]);
    const [inputText, setInputText] = useState('');
    const [connected, setConnected] = useState(false);

    useEffect(() => {
        client.on('connect', () => {
            setConnected(true);
            client.send('login:ReactNativeUser');
        });

        client.on('message', (message) => {
            setMessages(prev => [...prev, message]);
        });

        client.on('disconnect', () => {
            setConnected(false);
        });

        client.connect();

        return () => client.disconnect();
    }, []);

    const sendMessage = () => {
        if (inputText.trim() && connected) {
            client.send(inputText);
            setInputText('');
        }
    };

    return (
        <View style={{flex: 1, padding: 20}}>
            <Text>Status: {connected ? 'Connected' : 'Disconnected'}</Text>
            
            <ScrollView style={{flex: 1, marginVertical: 10}}>
                {messages.map((msg, index) => (
                    <Text key={index}>{msg}</Text>
                ))}
            </ScrollView>
            
            <TextInput
                value={inputText}
                onChangeText={setInputText}
                placeholder="Type message..."
                style={{borderWidth: 1, padding: 10, marginBottom: 10}}
            />
            
            <Button title="Send" onPress={sendMessage} disabled={!connected} />
        </View>
    );
}

API

Constructor

new NodeSocketClient(host, port)

Methods

• connect() - Connect to server (returns Promise)
• send(message) - Send message to server
• disconnect() - Close connection
• on(event, callback) - Add event listener
• isConnected() - Check connection status

Events

• connect - Connected to server
• message - Received message from server
• disconnect - Disconnected from server
• error - Connection error

Requirements

• react-native-tcp-socket: ^6.0.0
• React Native 0.60+