Flutter直播互动插件liveroom的使用

Flutter直播互动插件LiveRoom的使用

https://pub.dev/packages/liveroom

1. 服务器端设置

1.1 安装 Deno

# Mac
$ curl -fsSL https://deno.land/x/install/install.sh | sh

# Windows PowerShell
$ irm https://deno.land/install.ps1 | iex

1.2 运行快速服务器

$ deno run --allow-net https://deno.land/x/liveroom/quick.ts

2. Flutter应用

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

void main() {
  runApp(LiveroomQuickApp());
}

简单接口

final liveroom = Liveroom();

// 创建房间
liveroom.create(roomId: '0001');

// 加入房间
liveroom.join(roomId: '0001');

// 发送消息
liveroom.send(message: 'Hello');

// 接收消息
liveroom.receive((userId, message) {});

// 退出房间
liveroom.exit();

🎉 如有任何问题、需求或贡献欢迎提出！

示例代码

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

// 请只阅读标记为"*"的部分

// 运行多个应用并检查消息
void main() {
  runApp(const MyApp());
}

// LiveRoom实例
final liveroom = Liveroom();

/// 主页
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 跳转到消息页面
  void pushToMessagePage(BuildContext context) {
    final route = MaterialPageRoute(
      builder: (context) => _MessagePage(),
    );
    Navigator.of(context).push(route);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final layout = _HomePageLayout(
      onTapCreate: () {
        // 创建房间
        liveroom.create(roomId: '0001');
      },
      onTapJoin: () {
        // 加入房间
        liveroom.join(roomId: '0001');
      },
    );

    // LiveRoomView可以接收事件
    return LiveroomView(
      liveroom: liveroom,
      onJoin: (userId) {
        // 有人加入
        if (liveroom.myUserId == userId) {
          pushToMessagePage(context);
        }
      },
      child: layout,
    );
  }
}

/// 消息页面
class _MessagePage extends StatefulWidget {
  [@override](/user/override)
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<_MessagePage> {
  final List<String> messages = [];

  void printMessage(String message) {
    setState(() {
      messages.add(message);
    });
  }

  void popPage(BuildContext context) {
    Navigator.of(context).pop();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final layout = _MessagePageLayout(
      messages: messages,
      onTapExit: (() {
        // 退出房间
        liveroom.exit();
        popPage(context);
      }),
      onTapSend: ((text) {
        liveroom.send(message: text);
      }),
    );

    // LiveRoomView可以接收事件
    return LiveroomView(
      liveroom: liveroom,
      onJoin: (seatId) {
        // 有人加入
        printMessage('--- JOIN ---');
      },
      onReceive: ((seatId, message) {
        // 收到消息
        printMessage(message);
      }),
      onExit: ((seatId) {
        // 有人退出
        printMessage('--- EXIT ---');
      }),
      child: layout,
    );
  }
}

/// 主页布局
class _HomePageLayout extends StatelessWidget {
  const _HomePageLayout({
    required this.onTapCreate,
    required this.onTapJoin,
  });

  final void Function() onTapCreate;
  final void Function() onTapJoin;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: onTapCreate,
              child: const Text('创建\n房间'),
            ),
            ElevatedButton(
              onPressed: onTapJoin,
              child: const Text('加入\n房间'),
            ),
          ],
        ),
      ),
    );
  }
}

/// 消息页面布局
class _MessagePageLayout extends StatelessWidget {
  const _MessagePageLayout({
    required this.messages,
    required this.onTapExit,
    required this.onTapSend,
  });

  final List<String> messages;
  final void Function() onTapExit;
  final void Function(String text) onTapSend;

  Widget itemBuilder(BuildContext context, int index) {
    return Text(messages[index]);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final textController = TextEditingController();
    final topBar = Container(
      width: double.infinity,
      height: 100,
      color: Colors.grey[300],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const SizedBox(width: 50, height: 50),
          ElevatedButton(
            onPressed: onTapExit,
            child: const Text('退出房间'),
          ),
        ],
      ),
    );
    final bottomBar = Container(
      width: double.infinity,
      height: 100,
      color: Colors.grey[300],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          SizedBox(
            width: 300,
            height: 50,
            child: TextField(
              decoration: const InputDecoration(
                fillColor: Colors.white,
                filled: true,
              ),
              controller: textController,
            ),
          ),
          ElevatedButton(
            onPressed: () => onTapSend(textController.text),
            child: const Text('发送'),
          ),
        ],
      ),
    );

    final messageListView = Expanded(
      child: ListView.builder(
        itemBuilder: itemBuilder,
        itemCount: messages.length,
      ),
    );

    return Scaffold(
      body: Column(
        children: [
          topBar,
          messageListView,
          bottomBar,
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      theme: ThemeData(
        textTheme: const TextTheme(
          bodyLarge: TextStyle(fontSize: 24.0),
          bodyMedium: TextStyle(fontSize: 24.0),
          labelLarge: TextStyle(fontSize: 24.0),
          titleMedium: TextStyle(fontSize: 24.0),
          titleSmall: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}