Flutter - Pusher & EchoClient - 连接但未从通道接收事件

发布时间:2021-02-25 09:01

我正在尝试使用 Pusher 作为广播器将我的 Flutter 应用程序连接到 laravel websocket。

我能够使用以下Flutter 代码将我的 Flutter 应用程序连接到 laravel websocket:

Echo echoSetup(token, pusherClient) {
  return new Echo({
    'broadcaster': 'pusher',
    'client': pusherClient,
    "wsHost": 'laravel-server.test',
    "httpHost": 'laravel-server.test',
    "wsPort": 6001,
    'auth': {
      "headers": {'Authorization': 'Bearer $token'}
    },
    'authEndpoint': 'http://laravel-server.test/api/broadcasting/auth',
    "disableStats": true,
    "forceTLS": false,
    "enabledTransports": ['ws', 'wss']
  });
}

FlutterPusher getPusherClient(String token) {
  PusherOptions options = PusherOptions(
      encrypted: false,
      host: 'laravel-server.test',
      cluster: 'mt1',
      port: 6001,
      auth: PusherAuth('http://laravel-server.test/api/broadcasting/auth',
          headers: {'Authorization': 'Bearer $token'}));
  return FlutterPusher('********************', options, enableLogging: true);
}

void _setUpEcho() {
    final token = Prefer.prefs.getString('api_token');

    pusherClient = getPusherClient(token);
    echo = echoSetup(token, pusherClient);
    pusherClient.connect(onConnectionStateChange: onConnectionStateChange);
    echo.join("app")
      ..here((users) => print('users'))
      ..listenForWhisper("typing", (event) {
        // log(User.fromJson((event)['user']).username);
        // typingTimer.cancel();
        print("Typing");
      })
      ..listen("MessageSent", (event) {
        print("MessageSent");
        print(event);
      })
      ..listen("MessageRead", (event) {
        print("MessageRead");
      })
      ..joining((user) {
        print(user);
      })
      ..leaving((user) {
        print(user);
      });
  }

在 laravel 上,我通过运行以下命令使用 Beyondcode/laravel-websockets 包处理 websocket:

php artisan config:clear && php artisan websockets:clean && php artisan websockets:serve

成功接收到来自flutter应用的连接:

Starting the WebSocket server on port 6001...
New connection opened for app key d90a096cb11a24224e65.
Connection id 539868010.286231392 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"539868010.286231392\",\"activity_timeout\":30}"}

问题是,每当我发送事件时,Flutter 应用程序都不会收到该事件,但 Laravel 日志显示以下内容:

Connection id 522168000.296786193 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"08:53:23","details":"Channel: app, Event: MessageSent","data":"[]"}}

这是我在 laravel 上的 .env 文件:

APP_NAME=Doggo
APP_ENV=local
APP_KEY=base64:4McNATirACsK+TIbKd0mWTh3gYX14eF97iHW9lZTD6Q=
APP_DEBUG=true
APP_HOST=laravel-server.test
APP_URL=http://laravel-server.test/

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=******
PUSHER_APP_KEY=*********
PUSHER_APP_SECRET=********
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

API_PREFIX=api

为什么 Flutter 只能连接,不能接收事件?

回答1

您需要确保您的客户端订阅了与事件广播相同的频道,并且客户端还需要绑定到同名事件。