Flutter WebSocket通信插件sm_websocket的使用

Flutter WebSocket通信插件sm_websocket的使用

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

开始使用

下面是一个简单的示例，演示如何使用 sm_websocket 插件来实现 WebSocket 通信。

导入插件

首先，在你的 pubspec.yaml 文件中添加 sm_websocket 依赖：

dependencies:
  sm_websocket: ^x.x.x

然后运行 flutter pub get 来安装插件。

初始化 WebSocket

接下来，我们需要初始化 WebSocket 实例并配置事件处理器。

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

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

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

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

class _WebSocketPageState extends State<WebSocketPage> {
  IWebSocket ws;

  [@override](/user/override)
  void initState() {
    super.initState();
    ws = WebSocket();
    
    // 设置连接成功的回调
    ws.onSuccess(() {
      print("连接成功");
    });

    // 设置连接失败的回调
    ws.onFailure(() {
      print("连接失败");
    });

    // 设置接收到消息的回调
    ws.onMessage((data) {
      print("接收到的消息: $data");
    });

    // 设置断开连接的回调
    ws.onClose(() {
      print("断开连接");
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    // 在页面销毁时关闭 WebSocket 连接
    ws.close();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket 示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开 WebSocket 连接
            ws.open("ws://127.0.0.1:6656/ws");
          },
          child: Text('打开 WebSocket'),
        ),
      ),
    );
  }
}

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

1 回复

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


sm_websocket 是一个用于在 Flutter 中进行 WebSocket 通信的插件。它提供了简单易用的 API，使得开发者可以轻松地在 Flutter 应用中实现 WebSocket 通信。以下是如何使用 sm_websocket 插件的详细步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 sm_websocket 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  sm_websocket: ^0.0.1  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 sm_websocket 包：

import 'package:sm_websocket/sm_websocket.dart';

3. 创建 WebSocket 连接

使用 SMWebSocket 类来创建和管理 WebSocket 连接。以下是一个简单的示例，展示了如何连接到 WebSocket 服务器并发送和接收消息。

class WebSocketExample extends StatefulWidget {
  @override
  _WebSocketExampleState createState() => _WebSocketExampleState();
}

class _WebSocketExampleState extends State<WebSocketExample> {
  SMWebSocket? _webSocket;
  String _message = '';

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

  void _connectWebSocket() {
    _webSocket = SMWebSocket(
      url: 'ws://your.websocket.server', // WebSocket 服务器地址
      onOpen: () {
        print('WebSocket连接已打开');
      },
      onMessage: (message) {
        setState(() {
          _message = message;
        });
        print('收到消息: $message');
      },
      onClose: () {
        print('WebSocket连接已关闭');
      },
      onError: (error) {
        print('WebSocket错误: $error');
      },
    );
  }

  void _sendMessage() {
    if (_webSocket != null) {
      _webSocket!.send('Hello, WebSocket!');
    }
  }

  @override
  void dispose() {
    _webSocket?.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('收到消息: $_message'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _sendMessage,
              child: Text('发送消息'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

运行你的 Flutter 应用，你将能够连接到 WebSocket 服务器，并发送和接收消息。

5. 断开连接

在不需要 WebSocket 连接时，记得调用 _webSocket.close() 来断开连接，以避免资源泄漏。

@override
void dispose() {
  _webSocket?.close();
  super.dispose();
}

6. 处理错误

sm_websocket 提供了 onError 回调来处理 WebSocket 连接中的错误。你可以在这个回调中处理错误，例如重新连接或显示错误信息。

7. 其他功能

sm_websocket 还支持其他功能，例如自动重连、心跳检测等。你可以根据需要在创建 SMWebSocket 时配置这些选项。

_webSocket = SMWebSocket(
  url: 'ws://your.websocket.server',
  autoReconnect: true, // 自动重连
  reconnectInterval: Duration(seconds: 5), // 重连间隔
  heartbeatInterval: Duration(seconds: 10), // 心跳间隔
  onOpen: () {
    print('WebSocket连接已打开');
  },
  onMessage: (message) {
    setState(() {
      _message = message;
    });
    print('收到消息: $message');
  },
  onClose: () {
    print('WebSocket连接已关闭');
  },
  onError: (error) {
    print('WebSocket错误: $error');
  },
);
回到顶部