Flutter WebSocket通信插件cim_flutter_websocket_sdk的使用

Flutter WebSocket通信插件cim_flutter_websocket_sdk的使用

开源通讯库 CIM 的 flutter版本 SDK 由于使用了 websocket 代替 Tcp长连接, 额外支持了 Web浏览器。

长连接版本

可以在 这里 找到。

如何在自己的项目中引用SDK

pubspec.yaml 中引入:

dependencies:
  cim_flutter_websocket_sdk: ^1.0.1

如何使用

以下是一个完整的示例代码,展示了如何使用 cim_flutter_websocket_sdk 插件进行 WebSocket 通信。

import 'package:cim_flutter_websocket_sdk/cim_socket.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late CIMSocket? cimSocket = null;

  late List<String> list = [];

  late String connectStatus = 'Disconnected';

  [@override](/user/override)
  void initState() {
    super.initState();
    cimSocket = CIMSocket(
      onMessageReceived: (value) {
        setState(() {
          list.add(value.toProto3Json().toString());
        });
      },
      onConnectionStatusChanged: (value) {
        setState(() {
          connectStatus = value;
        });
      },
    );
    cimSocket!.init('wss.hoxin.farsunset.com', 443, '16501516154949', true);
    cimSocket!.connect(
      devicename: "Windows 10 Pro",
      appVersion: "1.0.0",
      osVersion: "10.0.19042",
      packageName: "com.farsunset.cim",
      deviceid: "16501516154949",
      language: "zh-CN",
      channelName: "web",
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(connectStatus),
        ),
        body: ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Text(list[index]);
          },
        ),
      ),
    );
  }
}

代码解释

  • 导入包

    import 'package:cim_flutter_websocket_sdk/cim_socket.dart';
    import 'package:flutter/material.dart';
    
  • 初始化状态

    [@override](/user/override)
    void initState() {
      super.initState();
      cimSocket = CIMSocket(
        onMessageReceived: (value) {
          setState(() {
            list.add(value.toProto3Json().toString());
          });
        },
        onConnectionStatusChanged: (value) {
          setState(() {
            connectStatus = value;
          });
        },
      );
      cimSocket!.init('wss.hoxin.farsunset.com', 443, '16501516154949', true);
      cimSocket!.connect(
        devicename: "Windows 10 Pro",
        appVersion: "1.0.0",
        osVersion: "10.0.19042",
        packageName: "com.farsunset.cim",
        deviceid: "16501516154949",
        language: "zh-CN",
        channelName: "web",
      );
    }
    
  • 构建UI

    [@override](/user/override)
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text(connectStatus),
          ),
          body: ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
              return Text(list[index]);
            },
          ),
        ),
      );
    }
    

更多关于Flutter WebSocket通信插件cim_flutter_websocket_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter WebSocket通信插件cim_flutter_websocket_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


cim_flutter_websocket_sdk 是一个用于在 Flutter 应用中实现 WebSocket 通信的插件。以下是如何使用该插件的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 cim_flutter_websocket_sdk 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  cim_flutter_websocket_sdk: ^版本号  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件:

import 'package:cim_flutter_websocket_sdk/cim_flutter_websocket_sdk.dart';

3. 初始化 WebSocket 连接

使用 CIMWebSocket 类来初始化和管理 WebSocket 连接:

CIMWebSocket cimWebSocket = CIMWebSocket();

4. 连接到 WebSocket 服务器

使用 connect 方法连接到 WebSocket 服务器:

cimWebSocket.connect(
  url: 'wss://your.websocket.server.url', // WebSocket 服务器地址
  onOpen: () {
    print('WebSocket connected');
  },
  onMessage: (message) {
    print('Received message: $message');
  },
  onError: (error) {
    print('WebSocket error: $error');
  },
  onClose: () {
    print('WebSocket closed');
  },
);

5. 发送消息

使用 send 方法向服务器发送消息:

cimWebSocket.send('Hello, WebSocket!');

6. 关闭连接

当你不再需要 WebSocket 连接时,可以使用 close 方法关闭连接:

cimWebSocket.close();

7. 处理连接状态

你可以通过 CIMWebSocketisConnected 属性来检查连接状态:

if (cimWebSocket.isConnected) {
  print('WebSocket is connected');
} else {
  print('WebSocket is not connected');
}

8. 处理接收到的消息

onMessage 回调中处理从服务器接收到的消息:

cimWebSocket.connect(
  url: 'wss://your.websocket.server.url',
  onMessage: (message) {
    print('Received message: $message');
    // 在这里处理消息
  },
  // 其他回调
);

9. 错误处理

onError 回调中处理 WebSocket 错误:

cimWebSocket.connect(
  url: 'wss://your.websocket.server.url',
  onError: (error) {
    print('WebSocket error: $error');
    // 在这里处理错误
  },
  // 其他回调
);

10. 关闭回调

onClose 回调中处理 WebSocket 关闭事件:

cimWebSocket.connect(
  url: 'wss://your.websocket.server.url',
  onClose: () {
    print('WebSocket closed');
    // 在这里处理关闭事件
  },
  // 其他回调
);

完整示例

以下是一个完整的示例,展示了如何使用 cim_flutter_websocket_sdk 插件进行 WebSocket 通信:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebSocketExample(),
    );
  }
}

class WebSocketExample extends StatefulWidget {
  [@override](/user/override)
  _WebSocketExampleState createState() => _WebSocketExampleState();
}

class _WebSocketExampleState extends State<WebSocketExample> {
  CIMWebSocket cimWebSocket = CIMWebSocket();
  TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    cimWebSocket.connect(
      url: 'wss://your.websocket.server.url',
      onOpen: () {
        print('WebSocket connected');
      },
      onMessage: (message) {
        print('Received message: $message');
        // 在这里处理消息
      },
      onError: (error) {
        print('WebSocket error: $error');
        // 在这里处理错误
      },
      onClose: () {
        print('WebSocket closed');
        // 在这里处理关闭事件
      },
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      cimWebSocket.send(_controller.text);
      _controller.clear();
    }
  }

  [@override](/user/override)
  void dispose() {
    cimWebSocket.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter a message'),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: _sendMessage,
              child: Text('Send'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部