React Native與WebSockets通信

React Native 可以通過 WebSocket 與服務器進行實時通信。WebSocket 是一種在單個 TCP 連接上進行全雙工通信的協議，它允許服務器主動向客戶端推送數據，從而實現實時交互。

要在 React Native 中使用 WebSocket，你可以使用第三方庫，如 react-native-websocket。以下是一個簡單的示例，展示了如何在 React Native 應用中使用 react-native-websocket 庫進行 WebSocket 通信：

1. 首先，安裝 react-native-websocket 庫：

npm install react-native-websocket --save

2. 然后，在你的 React Native 項目中創建一個 WebSocket 客戶端：

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import WebSocket from 'react-native-websocket';

const App = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // 創建一個 WebSocket 連接
    const ws = new WebSocket('ws://your-websocket-server-url');

    // 監聽連接打開事件
    ws.addEventListener('open', () => {
      console.log('WebSocket 連接已打開');

      // 向服務器發送一條消息
      ws.send('Hello, WebSocket Server!');
    });

    // 監聽接收到的消息事件
    ws.addEventListener('message', (event) => {
      console.log(`收到服務器消息: ${event.data}`);
      setMessage(event.data);
    });

    // 監聽連接關閉事件
    ws.addEventListener('close', () => {
      console.log('WebSocket 連接已關閉');
    });

    // 監聽錯誤事件
    ws.addEventListener('error', (error) => {
      console.error(`WebSocket 錯誤: ${error}`);
    });

    // 返回一個清理函數，用于關閉 WebSocket 連接
    return () => {
      ws.close();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{message}</Text>
    </View>
  );
};

export default App;

請注意，你需要將 your-websocket-server-url 替換為你的 WebSocket 服務器 URL。

以上示例展示了如何在 React Native 應用中創建一個簡單的 WebSocket 客戶端，用于與服務器進行實時通信。你可以根據自己的需求修改這個示例，以實現更復雜的通信邏輯。