Phase 4.0: WebSocket chat and danmaku system implemented

2026-03-18 15:30:03 +08:00
parent d05ec7ccdf
commit 9c7261cbda
11 changed files with 507 additions and 44 deletions
--- a/frontend/lib/pages/home_page.dart
+++ b/frontend/lib/pages/home_page.dart
@@ -167,7 +167,16 @@ class _ExploreViewState extends State<_ExploreView> {
      child: InkWell(
        onTap: () {
          final rtmpUrl = "${settings.rtmpUrl}/${room['room_id']}";
-          Navigator.push(context, MaterialPageRoute(builder: (_) => PlayerPage(title: room['title'], rtmpUrl: rtmpUrl)));
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (_) => PlayerPage(
+                title: room['title'],
+                rtmpUrl: rtmpUrl,
+                roomId: room['room_id'].toString(),
+              ),
+            ),
+          );
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
--- a/frontend/lib/pages/player_page.dart
+++ b/frontend/lib/pages/player_page.dart
@@ -1,11 +1,21 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:video_player/video_player.dart';
+import '../providers/settings_provider.dart';
+import '../services/chat_service.dart';

 class PlayerPage extends StatefulWidget {
  final String title;
  final String rtmpUrl;
+  final String roomId;

-  const PlayerPage({Key? key, required this.title, required this.rtmpUrl}) : super(key: key);
+  const PlayerPage({
+    Key? key,
+    required this.title,
+    required this.rtmpUrl,
+    required this.roomId,
+  }) : super(key: key);

  @override
  _PlayerPageState createState() => _PlayerPageState();
@@ -13,6 +23,11 @@ class PlayerPage extends StatefulWidget {

 class _PlayerPageState extends State<PlayerPage> {
  late VideoPlayerController _controller;
+  final ChatService _chatService = ChatService();
+  final TextEditingController _msgController = TextEditingController();
+  final List<ChatMessage> _messages = [];
+  final List<Widget> _danmakus = []; // 为简单起见，这里存储弹幕 Widget
+  
  bool _isError = false;
  String? _errorMessage;

@@ -20,62 +35,189 @@ class _PlayerPageState extends State<PlayerPage> {
  void initState() {
    super.initState();
    _initializePlayer();
+    _initializeChat();
  }

  void _initializePlayer() async {
-    print("[INFO] Playing stream: ${widget.rtmpUrl}");
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.rtmpUrl));
-
    try {
      await _controller.initialize();
      _controller.play();
-      setState(() {}); // 更新状态以渲染画面
+      if (mounted) setState(() {});
    } catch (e) {
-      print("[ERROR] Player initialization failed: $e");
-      setState(() {
-        _isError = true;
-        _errorMessage = e.toString();
-      });
+      if (mounted) setState(() { _isError = true; _errorMessage = e.toString(); });
+    }
+  }
+
+  void _initializeChat() {
+    final settings = context.read<SettingsProvider>();
+    _chatService.connect(settings.baseUrl, widget.roomId, "User_${widget.roomId}"); // 暂定用户名
+
+    _chatService.messages.listen((msg) {
+      if (mounted) {
+        setState(() {
+          _messages.insert(0, msg);
+          if (msg.type == "chat" || msg.type == "danmaku") {
+            _addDanmaku(msg.content);
+          }
+        });
+      }
+    });
+  }
+
+  void _addDanmaku(String text) {
+    final id = DateTime.now().millisecondsSinceEpoch;
+    final top = 20.0 + (id % 5) * 30.0; // 简单的多轨道显示
+    
+    final danmaku = _DanmakuItem(
+      key: ValueKey(id),
+      text: text,
+      top: top,
+      onFinished: () {
+        if (mounted) setState(() => _danmakus.removeWhere((w) => w.key == ValueKey(id)));
+      },
+    );
+
+    setState(() => _danmakus.add(danmaku));
+  }
+
+  void _sendMsg() {
+    if (_msgController.text.isNotEmpty) {
+      _chatService.sendMessage(_msgController.text, "Me", widget.roomId);
+      _msgController.clear();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
+    _chatService.dispose();
+    _msgController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      backgroundColor: Colors.black,
-      appBar: AppBar(
-        title: Text(widget.title),
-        backgroundColor: Colors.transparent,
-        foregroundColor: Colors.white,
-      ),
-      body: Center(
-        child: _isError
-            ? Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(Icons.error_outline, color: Colors.red, size: 60),
-                  SizedBox(height: 16),
-                  Text(
-                    "Failed to load stream.",
-                    style: TextStyle(color: Colors.white, fontSize: 18),
+      appBar: AppBar(title: Text(widget.title)),
+      body: Column(
+        children: [
+          // 视频播放器 + 弹幕层
+          Container(
+            color: Colors.black,
+            width: double.infinity,
+            height: 250,
+            child: Stack(
+              children: [
+                Center(
+                  child: _isError
+                      ? Text("Error: $_errorMessage", style: TextStyle(color: Colors.white))
+                      : _controller.value.isInitialized
+                          ? AspectRatio(aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller))
+                          : CircularProgressIndicator(),
+                ),
+                // 弹幕层
+                ..._danmakus,
+              ],
+            ),
+          ),
+          // 评论区标题
+          Container(
+            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            color: Theme.of(context).colorScheme.surfaceVariant,
+            child: Row(
+              children: [
+                Icon(Icons.chat_bubble_outline, size: 16),
+                SizedBox(width: 8),
+                Text("Live Chat", style: TextStyle(fontWeight: FontWeight.bold)),
+              ],
+            ),
+          ),
+          // 消息列表
+          Expanded(
+            child: ListView.builder(
+              reverse: true,
+              itemCount: _messages.length,
+              itemBuilder: (context, index) {
+                final m = _messages[index];
+                return ListTile(
+                  dense: true,
+                  title: Text(
+                    "${m.username}: ${m.content}",
+                    style: TextStyle(color: m.type == "system" ? Colors.blue : null),
                  ),
-                  SizedBox(height: 8),
-                  Text(_errorMessage ?? "Unknown error", style: TextStyle(color: Colors.grey)),
-                  TextButton(onPressed: () => Navigator.pop(context), child: Text("Go Back")),
-                ],
-              )
-            : _controller.value.isInitialized
-                ? AspectRatio(
-                    aspectRatio: _controller.value.aspectRatio,
-                    child: VideoPlayer(_controller),
-                  )
-                : CircularProgressIndicator(color: Colors.white),
+                );
+              },
+            ),
+          ),
+          // 输入框
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: TextField(
+                    controller: _msgController,
+                    decoration: InputDecoration(
+                      hintText: "Say something...",
+                      border: OutlineInputBorder(borderRadius: BorderRadius.circular(20)),
+                      contentPadding: EdgeInsets.symmetric(horizontal: 16),
+                    ),
+                    onSubmitted: (_) => _sendMsg(),
+                  ),
+                ),
+                SizedBox(width: 8),
+                IconButton(icon: Icon(Icons.send, color: Colors.blue), onPressed: _sendMsg),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _DanmakuItem extends StatefulWidget {
+  final String text;
+  final double top;
+  final VoidCallback onFinished;
+
+  const _DanmakuItem({Key? key, required this.text, required this.top, required this.onFinished}) : super(key: key);
+
+  @override
+  __DanmakuItemState createState() => __DanmakuItemState();
+}
+
+class __DanmakuItemState extends State<_DanmakuItem> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<Offset> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(duration: const Duration(seconds: 8), vsync: this);
+    _animation = Tween<Offset>(begin: Offset(1.5, 0), end: Offset(-1.5, 0)).animate(_animationController);
+    
+    _animationController.forward().then((_) => widget.onFinished());
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: widget.top,
+      width: 300,
+      child: SlideTransition(
+        position: _animation,
+        child: Text(
+          widget.text,
+          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16, shadows: [Shadow(blurRadius: 2, color: Colors.black)]),
+        ),
      ),
    );
  }
--- a/frontend/lib/services/chat_service.dart
+++ b/frontend/lib/services/chat_service.dart
@@ -0,0 +1,61 @@
+import 'dart:async';
+import 'dart:convert';
+import 'package:web_socket_channel/web_socket_channel.dart';
+
+class ChatMessage {
+  final String type;
+  final String username;
+  final String content;
+  final String roomId;
+
+  ChatMessage({required this.type, required this.username, required this.content, required this.roomId});
+
+  factory ChatMessage.fromJson(Map<String, dynamic> json) {
+    return ChatMessage(
+      type: json['type'] ?? 'chat',
+      username: json['username'] ?? 'Anonymous',
+      content: json['content'] ?? '',
+      roomId: json['room_id'] ?? '',
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+    'type': type,
+    'username': username,
+    'content': content,
+    'room_id': roomId,
+  };
+}
+
+class ChatService {
+  WebSocketChannel? _channel;
+  final StreamController<ChatMessage> _messageController = StreamController<ChatMessage>.broadcast();
+
+  Stream<ChatMessage> get messages => _messageController.stream;
+
+  void connect(String baseUrl, String roomId, String username) {
+    final wsUri = Uri.parse(baseUrl).replace(scheme: 'ws', path: '/api/ws/room/$roomId', queryParameters: {'username': username});
+    _channel = WebSocketChannel.connect(wsUri);
+
+    _channel!.stream.listen((data) {
+      final json = jsonDecode(data);
+      _messageController.add(ChatMessage.fromJson(json));
+    }, onError: (err) {
+      print("[WS ERROR] $err");
+    }, onDone: () {
+      print("[WS DONE] Connection closed");
+    });
+  }
+
+  void sendMessage(String content, String username, String roomId, {String type = 'chat'}) {
+    if (_channel != null) {
+      final msg = ChatMessage(type: type, username: username, content: content, roomId: roomId);
+      _channel!.sink.add(jsonEncode(msg.toJson()));
+    }
+  }
+
+  void dispose() {
+    _channel?.sink.close();
+    _messageController.close();
+  }
+}
--- a/frontend/pubspec.lock
+++ b/frontend/pubspec.lock
@@ -525,6 +525,22 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.1.1"
+  web_socket:
+    dependency: transitive
+    description:
+      name: web_socket
+      sha256: "34d64019aa8e36bf9842ac014bb5d2f5586ca73df5e4d9bf5c936975cae6982c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  web_socket_channel:
+    dependency: "direct main"
+    description:
+      name: web_socket_channel
+      sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.3"
  xdg_directories:
    dependency: transitive
    description:
--- a/frontend/pubspec.yaml
+++ b/frontend/pubspec.yaml
@@ -39,6 +39,7 @@ dependencies:
  shared_preferences: ^2.5.4
  video_player: ^2.11.1
  fvp: ^0.35.2
+  web_socket_channel: ^3.0.3

 dev_dependencies:
  flutter_test: