Flutter实时通信插件laravel_echo的使用

Flutter实时通信插件laravel_echo的使用

基本上，这个包是官方Laravel Echo JavaScript库的移植版本。它帮助订阅频道并监听从您的Laravel应用程序广播的事件。

API与官方Echo包相同，因此在官方文档中应该一切正常。

可用的连接器有：

• ✅ socket.io
• ✅ Pusher
• ✅ Null

开始使用

使用socket.io

要使用socket.io，您需要为您的Flutter应用安装socket_io_client。

在您的pubspec.yaml文件中：

dependencies:
  ...
  socket_io_client: ^0.9.1
  laravel_echo:

导入socket_io_client

import 'package:socket_io_client/socket_io_client.dart' as IO;

使用方法

// 创建Echo实例
Echo echo = new Echo({
  'broadcaster': 'socket.io',
  'client': IO.io,
});

// 监听公共频道
echo.channel('public-channel').listen('PublicEvent', (e) {
  print(e);
});

// 监听私有频道
// 需要认证。有关如何授权频道的详细信息，请参阅指南
echo.private('private-channel').listen('PrivateEvent', (e) {
  print(e);
});

// 监听存在频道
// 需要认证。有关如何授权频道的详细信息，请参阅指南
echo.join('presence-channel')
  .here((users) {
    print(users);
  }).joining((user) {
    print(user);
  }).leaving((user) {
    print(user);
  }).listen('PresenceEvent', (e) {
    print(e);
  });

// 访问socket实例
echo.socket.on('connect', (_) => print('connected'));
echo.socket.on('disconnect', (_) => print('disconnected'));

使用Pusher

要使用Pusher，您需要为您的Flutter应用安装flutter_pusher_client。

在您的pubspec.yaml文件中：

dependencies:
  ...
  flutter_pusher_client: ^0.3.1
  laravel_echo: ^0.2.5

导入flutter_pusher_client

import 'package:flutter_pusher_client/flutter_pusher.dart';

PusherOptions options = PusherOptions(
  host: '10.0.2.2',
  port: 6001,
  encrypted: false,
);
FlutterPusher pusher = FlutterPusher('app', options, enableLogging: true);

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

echo.channel('public-channel').listen('PublicEvent', (e) {
  print(e);
});

pusher.on('connect', (_) => print('connect'));
pusher.on('disconnect', (_) => print('disconnect'));

指南

选项

授权私有频道

为了授权频道请求，我们使用Laravel Passport。

在我们的BroadcastServiceProvider.php中，我们需要启用

Broadcast::routes(['middleware' => ['auth:api']]);

然后，在创建Echo实例时包含Authorization头，带有Bearer令牌

echo = new Echo({
  'broadcaster': 'socket.io',
  'client': socket,
  'auth': {
    'headers': {
        'Authorization': 'Bearer $token'
    }
  }
});

示例后端

用于示例应用的后端可以在Kakajan SH的echo-server找到。

包由Kakajan SH提供。

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用laravel_echo插件。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:example/pusher.dart';
import 'package:example/socketio.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _current = 'socketio';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        backgroundColor: Colors.white,
        middle: CupertinoSegmentedControl(
          children: {
            'socketio': Text(
              '  socket.io  ',
              style: TextStyle(fontSize: 14),
            ),
            'pusher': Text(
              'pusher',
              style: TextStyle(fontSize: 14),
            ),
          },
          onValueChanged: (value) {
            setState(() {
              _current = value;
            });
          },
          groupValue: _current,
        ),
      ),
      child: _current == 'socketio' ? SocketioPage() : PusherPage(),
    );
  }
}