Flutter Laravel Echo集成插件laravel_echo_null的使用

Getting started

Important information before using

laravel_echo_null 包依赖以下包：

将这些依赖添加到 pubspec.yaml 文件中：

dependencies:
  socket_io_client: ^3.0.2
  pusher_client_socket: ^0.0.3

请注意，laravel_echo_null 包需要 socket_io_client 版本 2.0.2。此外，为了确保与包的兼容性，请使用 fixed-laravel-echo-server 版本 0.0.1，它可以在 npm 上找到。可以通过运行以下命令全局安装：

npm i -g [@abdopr](/user/abdopr)/fixed-laravel-echo-server

更多详细信息请参阅 fixed-laravel-echo-server 的官方文档。

确保正确添加这些依赖并按照说明将其包含在项目中。

Importing

导入 laravel_echo_null 包：

import 'package:laravel_echo_null/laravel_echo_null.dart';

Initializing

使用连接器进行初始化

Socket IO

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

Echo<IO.Socket, SocketIoChannel> echo = Echo<IO.Socket, SocketIoChannel>(SocketIoConnector(
  'http://localhost:6001', // String: host
  nameSpace: 'nameSpace', // String?: namespace
  autoConnect: false, // bool: client connection automatically
  authHeaders: {
    'Authorization': 'Bearer token'
  },
  moreOptions: {// Map: more io options
    'transports': ['websocket']
  },
));

Pusher

import 'package:pusher_client_socket/pusher_client_socket.dart' as PUSHER;

Echo<PUSHER.PusherClient, PusherChannel> echo = Echo<PUSHER.PusherClient, PusherChannel>(PusherConnector(
  'PUSHER_APP_KEY',
  authEndPoint: 'http://localhost/broadcasting/auth', // String?: auth host
  authHeaders: { // authenticate headers
    'Authorization': 'Bearer $token',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  cluster: 'PUSHER_CLUSTER', // String?: pusher cluster
  wsPort: 80,
  wssPort: 443,
  encrypted: true,
  activityTimeout: 120000,
  pongTimeout: 30000,
  maxReconnectionAttempts: 6,
  reconnectGap: Duration(seconds: 2),
  enableLogging: true,
  autoConnect: false, // bool: client connection automatically
  nameSpace: 'nameSpace',
));

Pusher With Laravel/Reverb

import 'package:pusher_client_socket/pusher_client_socket.dart' as PUSHER;

Echo<PUSHER.PusherClient, PusherChannel> echo = Echo<PUSHER.PusherClient, PusherChannel>(PusherConnector(
  'PUSHER_APP_KEY',
  authEndPoint: 'http://localhost/broadcasting/auth', // String?: auth host
  authHeaders: { // authenticate headers
    'Authorization': 'Bearer $token',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  host: 'localhost',
  wsPort: 6001,
  encrypted: false,
  activityTimeout: 120000,
  pongTimeout: 30000,
  enableLogging: true,
  autoConnect: false, // bool: client connection automatically
  nameSpace: 'nameSpace',
));

简单初始化

Socket IO

import 'package:socket_io_client/socket_io_client.dart';

Echo<IO.Socket, SocketIoChannel> echo = Echo.socket(
  'http://localhost:6001', // String: host
  nameSpace: 'nameSpace', // String?: namespace
  autoConnect: false, // bool: client connection automatically
  authHeaders: {
    'Authorization': 'Bearer token'
  },
  moreOptions: {// Map: more io options
    'transports': ['websocket']
  },
);

Pusher

import 'package:pusher_client_socket/pusher_client_socket.dart';

Echo<PUSHER.PusherClient, PusherChannel> echo = Echo.pusher(
  'PUSHER_APP_KEY',
  authEndPoint: 'http://localhost/broadcasting/auth', // String?: auth host
  authHeaders: { // authenticate headers
    'Authorization': 'Bearer $token',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  cluster: 'PUSHER_CLUSTER', // String?: pusher cluster
  wsPort: 80,
  wssPort: 443,
  encrypted: true,
  activityTimeout: 120000,
  pongTimeout: 30000,
  maxReconnectionAttempts: 6,
  reconnectGap: Duration(seconds: 2),
  enableLogging: true,
  autoConnect: false, // bool: client connection automatically
  nameSpace: 'nameSpace',
);

Channels

// 公共频道
Channel publicChannel = echo.channel('my-channel');
publicChannel.listen('MyEvent', (data) {
  print(data);
});

// 私有频道
PrivateChannel privateChannel = echo.private('my-channel.1')
privateChannel.listen('MyEvent', (data) {
  print(data);
});

// 加密私有频道
PrivateEncryptedChannel privateEncryptedChannel = echo.privateEncrypted('my-channel.1')
privateEncryptedChannel.listen('MyEvent', (data) {
  print(data);
});

// 存在频道
PresenceChannel presenceChannel = echo.join('presence-channel');
presenceChannel.listen((data) {
  print(data);
});

示例代码

以下是一个简单的Flutter应用程序示例，演示如何使用 laravel_echo_null 包：

import 'package:flutter/material.dart';
import 'home.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: Home(),
      );
}

在 home.dart 文件中，您可以添加更多的逻辑来处理事件监听和频道连接：

import 'package:flutter/material.dart';
import 'package:laravel_echo_null/laravel_echo_null.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late Echo<IO.Socket, SocketIoChannel> echo;

  @override
  void initState() {
    super.initState();

    echo = Echo.socket(
      'http://localhost:6001',
      nameSpace: 'nameSpace',
      autoConnect: false,
      authHeaders: {
        'Authorization': 'Bearer token'
      },
      moreOptions: {
        'transports': ['websocket']
      },
    );

    echo.channel('my-channel').listen('MyEvent', (data) {
      print('Received data: $data');
    });

    echo.connect();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Laravel Echo Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发送事件或执行其他操作
          },
          child: const Text('Send Event'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    echo.disconnect();
    super.dispose();
  }
}

以上是关于 laravel_echo_null 包的基本使用指南和示例代码。希望对您有所帮助！