React Native无法连接Laravel Websocket 求可行配置方案

我没法从React Native应用连接到Laravel的WebSocket，几乎试遍了带“pusher”“websockets”关键词的npm包，全都不管用，已经卡壳很久了。

已安装的npm包：

"react-native-use-websocket": "^0.2.6",
"react-native-websocket": "^1.0.2",
"laravel-echo": "^1.15.0",
"pusher-js": "^8.0.1",
// 按官方文档配置均无效...

Laravel端完全正常：启动WebSocket服务器后，用Tinker测试，能在http://127.0.0.1:8000/laravel-websockets页面正常看到消息发送，但React Native端完全连不上。

Laravel 配置（已验证可用） #

.env 文件 #

BROADCAST_DRIVER=pusher
//...
PUSHER_APP_ID=12345
PUSHER_APP_KEY=ADDADD123123
PUSHER_APP_SECRET=ADASADAS123123
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

NewMessage.php 事件文件 #

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    /**
     * Create a new event instance.
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn()
    {
        // return [
        //     new PrivateChannel('channel-name'),
        // ];
        return new Channel('home');
    }
}

尝试过的无效方案 #

方案1：使用 pusher-js #

代码如下：

import Pusher from 'pusher-js/react-native';
import { SafeAreaView, Text, useState, useEffect } from 'react-native';

const PusherTest = () => {
  const [message, setMessage] = useState([]);
  useEffect(() => {
    const pusher = new Pusher('ADDADD123123', {
      cluster: 'mt1',
      encrypted: true,
      wsHost: '127.0.0.1',
      wsPort: 6001,      
    });

    const channel = pusher.subscribe('home');

    channel.bind('App\\Events\\TestEvent', (data) => {
      console.log('Received event:', data);
      setMessage(data);
    });

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

  return (
    <SafeAreaView>
      <Text>Hi</Text>
      <Text>{message}</Text>
    </SafeAreaView>
  )
};

export default PusherTest;

出现错误：

ReferenceError: Can't find variable: Buffer

方案2：使用 socket.io #

代码如下：

import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { io } from 'socket.io-client';

const SOCKET_SERVER_URL = 'http://localhost:6001'; // WebSocket服务器地址

const WebSocketTest = () => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const socket = io(SOCKET_SERVER_URL);
        
        socket.on('connect', () => {
            console.log('已连接到WebSocket服务器');
        });

        socket.on('disconnect', () => {
            console.log('已断开与WebSocket服务器的连接');
        });

        socket.on('message', (data) => {
            console.log('收到消息:', data);
            setMessages((messages) => [...messages, data]);
        });

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

    return (
        <SafeAreaView>
            <Text>Hi</Text>
            {messages.map((message, index) => (
                <Text key={index}>{message}</Text>
            ))}
        </SafeAreaView>
    );
};

export default WebSocketTest;

没有任何响应，且找不到指定订阅频道的相关文档。

只求能实现最基础的连接和消息接收，有没有可行的配置方案？

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