Flutter WebSocket通信插件action_cable的使用

ActionCable 是 Rails 默认的实时 WebSocket 框架和协议。action_cable 插件为 Dart 提供了一个客户端实现，适用于 Web、DartVM 和 Flutter。

使用方法

连接到一个频道 🙌

首先，需要连接到 WebSocket 服务器：

import 'package:action_cable/action_cable.dart';

var cable = ActionCable.connect(
  "ws://10.0.2.2:3000/cable", // 替换为你的WebSocket地址
  headers: {
    "Authorization": "Some Token", // 可选的认证信息
  },
  onConnected: () {
    print("connected");
  },
  onConnectionLost: () {
    print("connection lost");
  },
  onCannotConnect: () {
    print("cannot connect");
  }
);

订阅一个频道 🎉

成功连接后，可以订阅特定的频道：

cable.subscribe(
  "Chat", // 频道名称，可以是 "Chat" 或 "ChatChannel"
  channelParams: { "room": "private" }, // 频道参数
  onSubscribed: (){
    print("subscribed to Chat channel");
  }, 
  onDisconnected: (){
    print("disconnected from Chat channel");
  },
  onMessage: (Map message) {
    print("Received message: $message");
  } // 接收到消息时调用
);

取消订阅一个频道 🎃

如果不再需要监听某个频道，可以取消订阅：

cable.unsubscribe(
  "Chat", // 频道名称
  {"room": "private"} // 频道参数
);

在 ActionCable 服务器上执行操作 🎇

你可以通过 performAction 方法在服务器上执行特定的操作：

cable.performAction(
  "Chat",
  action: "send_message", // 动作名称，需与服务器端定义的方法名一致
  channelParams: { "room": "private" },
  actionParams: { "message": "Hello private peeps! 😜" } // 发送的消息内容
);

注意：你需要在 Rails 的 Action Cable 通道中定义一个名为 send_message 的方法。

断开与 ActionCable 服务器的连接

当不再需要 WebSocket 连接时，可以断开连接：

cable.disconnect();

完整示例 Demo

下面是一个完整的 Flutter 示例，展示了如何使用 action_cable 插件进行 WebSocket 通信：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ActionCable Demo')),
        body: Center(child: WebSocketDemo()),
      ),
    );
  }
}

class WebSocketDemo extends StatefulWidget {
  @override
  _WebSocketDemoState createState() => _WebSocketDemoState();
}

class _WebSocketDemoState extends State<WebSocketDemo> {
  var cable;

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

    // 初始化 WebSocket 连接
    cable = ActionCable.connect(
      "ws://10.0.2.2:3000/cable",
      headers: {
        "Authorization": "Some Token",
      },
      onConnected: () {
        print("connected");
        subscribeToChannel();
      },
      onConnectionLost: () {
        print("connection lost");
      },
      onCannotConnect: () {
        print("cannot connect");
      }
    );
  }

  void subscribeToChannel() {
    cable.subscribe(
      "Chat",
      channelParams: { "room": "private" },
      onSubscribed: () {
        print("subscribed to Chat channel");
        sendMessage();
      },
      onDisconnected: () {
        print("disconnected from Chat channel");
      },
      onMessage: (Map message) {
        print("Received message: $message");
      }
    );
  }

  void sendMessage() {
    cable.performAction(
      "Chat",
      action: "send_message",
      channelParams: { "room": "private" },
      actionParams: { "message": "Hello private peeps! 😜" }
    );
  }

  @override
  void dispose() {
    cable.disconnect(); // 确保在组件销毁时断开连接
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Check the console for WebSocket messages!");
  }
}

此示例展示了如何在 Flutter 应用中集成 action_cable 插件，并通过 WebSocket 进行简单的消息发送和接收。

希望这个帖子能帮助你更好地理解和使用 Flutter 中的 WebSocket 通信！如果有任何问题或建议，请随时留言。