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
更多关于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. 处理连接状态
你可以通过 CIMWebSocket
的 isConnected
属性来检查连接状态:
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'),
),
],
),
),
);
}
}