React Native客户端与Raspberry Pi Pico W服务器连接异常排查

核心问题分析 #

1. 协议不匹配：你的服务器是普通HTTP Socket服务器，仅处理单次HTTP请求后就关闭连接，完全没有实现WebSocket或Socket.IO协议；而React Native客户端用的是Socket.IO客户端，Socket.IO基于WebSocket但有专属的握手和通信协议，服务器无法响应Socket.IO的连接请求，导致客户端不断重试建立连接，产生大量新连接日志。
2. 数据传输失败：服务器发送的是HTTP响应内容，客户端却是用Socket.IO的事件监听来接收，两者的通信格式完全不兼容，自然无法正常传输数据。

浏览器能收到"Hello"是因为浏览器发起的是标准HTTP请求，和服务器的HTTP响应逻辑匹配，但这和你计划的WebSocket实时传输无关。

解决方案 #

1. 将服务器修改为WebSocket服务器（MicroPython） #

Pico W可以通过micropython-websocket库实现WebSocket服务，先通过upip安装该库：

upip install micropython-websocket

修改后的服务器代码：

import socket
import time
from websocket import websocket

def handle_websocket_client(client_socket):
    ws = websocket(client_socket)
    try:
        print("WebSocket连接已建立")
        # 发送初始消息
        ws.send("Hello from Pico W WebSocket Server")
        
        # 持续监听客户端消息
        while True:
            received_data = ws.recv()
            if received_data:
                print(f"收到客户端消息: {received_data}")
                # 回声响应
                ws.send(f"已收到: {received_data}")
            time.sleep(0.1)
    except Exception as e:
        print(f"连接关闭: {str(e)}")
    finally:
        ws.close()

# 初始化Socket
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
server_socket = socket.socket()
server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
server_socket.bind(addr)
server_socket.listen(1)

print(f"等待WebSocket连接，地址: {addr}")

while True:
    try:
        client_conn, client_addr = server_socket.accept()
        print(f"客户端已连接: {client_addr}")
        handle_websocket_client(client_conn)
    except Exception as e:
        print(f"连接接受失败: {str(e)}")
        if 'client_conn' in locals():
            client_conn.close()

2. 客户端改用原生WebSocket（React Native） #

React Native支持原生WebSocket API，无需额外安装Socket.IO库，直接和服务器的WebSocket协议匹配：

import { useEffect } from 'react';
import { View, Text } from 'react-native';

export default function App() {
  useEffect(() => {
    // 替换为你的Pico W的IP地址
    const socket = new WebSocket('ws://<你的Pico_W_IP>:80');

    socket.onopen = () => {
      console.log('WebSocket连接成功');
      // 向服务器发送消息
      socket.send('来自React Native的消息');
    };

    socket.onmessage = (event) => {
      console.log('收到服务器消息:', event.data);
    };

    socket.onclose = () => {
      console.log('WebSocket连接关闭');
    };

    socket.onerror = (error) => {
      console.error('WebSocket错误:', error);
    };

    // 组件卸载时关闭连接
    return () => {
      socket.close();
    };
  }, []);

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

关键说明 #

• 如果一定要使用Socket.IO，需要在服务器端部署Socket.IO服务，但MicroPython对Socket.IO的支持有限，更适合用轻量的原生WebSocket实现IoT设备的实时通信。
• 确保Pico W和React Native设备处于同一局域网，且Pico W的80端口未被防火墙或路由限制。

内容的提问来源于stack exchange，提问作者shilleh