制作 Laravel Echo for Flutter 的多个实例

Question

我正在尝试使用此包在 flutter 应用程序中添加 websockets：laravel_echo: ^0.2.9。

我的应用程序中有通知和消息，所以如果我只为两者创建 websocket，它就可以正常工作。但是，如果我添加第二个 websocket，它们都会停止工作。

代码片段：

pusher_socket.dart


class PusherSocket {
  
   Echo socket({ String authToken }){

        PusherAuth _auth = PusherAuth(
          'https://api.example.com/broadcasting/auth',
          headers: {
            'Authorization': '$authToken',
          },
        );
        

      PusherOptions options = PusherOptions(
        host: "api.example.com",
        port: 6003,
        encrypted: true,
        auth: _auth,
        cluster: "CLT",
      );

      FlutterPusher pusher = FlutterPusher("MY_KEY", options, enableLogging: false );

      return new Echo({
        'broadcaster': 'pusher',
        'client': pusher,
      });
  }
}

在页面中收听

注意：我想在不同的页面中使用此代码

Echo echo = new PusherSocket().socket(authToken: conversationProvider.authToken);

echo
    .join("conversation.${conversationProvider.conversation.id}")
    .listen('NewMessage', (data) {
    print(data);
    try {
        final message = data;

        Message _message = Message.fromJson(message);

        conversationProvider.addMessage(message: _message);
    } catch (error) {
        
    }
});

我有什么地方做错了吗？

Answer 1

基本上您不需要为此创建两个 websockets 实例。您可以创建一个全局 websocket 然后在整个应用程序中使用它。

示例。

这里我在 AuthProvider 中实例化了 websocket 因为我知道 AuthProvider 将包含在应用程序的根目录中，使其可供所有子 Widgets 使用:

pusher_socket.dart

class PusherSocket {
  
   Echo socket({ String authToken }){

        PusherAuth _auth = PusherAuth(
          'https://api.example.com/broadcasting/auth',
          headers: {
            'Authorization': '$authToken',
          },
        );
        

      PusherOptions options = PusherOptions(
        host: "api.example.com",
        port: 6003,
        encrypted: true,
        auth: _auth,
        cluster: "CLT",
      );

      FlutterPusher pusher = FlutterPusher("MY_KEY", options, enableLogging: false );

      return new Echo({
        'broadcaster': 'pusher',
        'client': pusher,
      });
  }
}

auth_provider.dart


class AuthProvider with ChangeNotifier {
  String authToken;
  Echo echo;

  
  Future<void> sigin({@required email, @required password}) async {

      /**
       * the logic for login
       * goes here
       */

      // Set echo if not set
      if (echo == null && authToken != null) {
        echo = PusherSocket().socket(authToken: authToken);
        print("Prepare echo");
      }

      //notify others
      notifyListeners();
  }

conversation_page.dart


final authProvider = Provider.of<AuthProvider>(context);

authProvider.echo
    .join("conversation.${conversationProvider.conversation.id}")
    .listen('NewMessage', (data) {
    print(data);
    try {
        final message = data;

        Message _message = Message.fromJson(message);

        conversationProvider.addMessage(message: _message);
    } catch (error) {
        
    }
});

制作 Laravel Echo for Flutter 的多个实例

Make multiple instances of Laravel Echo for Flutter

websocket

dart

flutter

laravel-echo

代码片段：

在页面中收听

我有什么地方做错了吗？

示例。