为 Flutter 制作多个 Laravel Echo 实例答案

【问题标题】：Make multiple instances of Laravel Echo for Flutter为 Flutter 制作多个 Laravel Echo 实例
【发布时间】：2021-04-23 22:30:31
【问题描述】：

我正在尝试使用此包在颤振应用程序中添加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) {
        
    }
});

我做错了什么吗？

【问题讨论】：

标签： flutter dart websocket laravel-echo

【解决方案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) {
        
    }
});

【讨论】：