flutter 自定义websocket路由的实现

在 flutter websocket 中 服务端推送数据给客户端后 很多人的处理居然都是 if / switch; 感觉这样的写法不咋好!

自己想的一个办法:

在 lib 目录下新建一个 socket 目录 里面创建两个文件main.dart和router.dart;
main.dart : 主要控制websocket的连接 断开 和收到消息的处理;
router.dart 则为websocket 服务端返回的消息做路由处理;

router.dart

import 'package:lee/logic/user.dart';

typedef void RouteHandle(Map params);

var wsRouter = new WsRouter();

class WsRouter {
 static Map<String, RouteHandle> _routers = new Map();

 init() {
  routers.forEach((route) {
   route.forEach((name, value) {
    this.add(name, value);
   });
  });
 }

 // 增加路由
 void add(String name, RouteHandle handle) {
  WsRouter._routers[name] = handle;
 }

 // 路由处理
 Future<void> handle(String name, Map params) async {
  RouteHandle handle = WsRouter._routers[name];
  if (handle == null) {
   print("路由不存在");
   return;
  }
  handle(params);
 }
}

List<Map<String, RouteHandle>> routers = [
 {"login": UserLogic.login},
 {"kick": UserLogic.kick},
];

main.dart

import 'package:lee/socket/router.dart';
import 'package:web_socket_channel/io.dart';
import 'dart:convert';

var webSocket = new WebSocket();

class WebSocket {
 // webSocket连接
 IOWebSocketChannel webSocketChannel;

 factory WebSocket() => _webSocket();

 static WebSocket _instance;

 // 构造函数
 WebSocket._() {
  // 初始化webSocket路由
  wsRouter.init();
 }

 static WebSocket _webSocket() {
  if (_instance == null) {
   _instance = WebSocket._();
  }
  return _instance;
 }

 conn() {
  IOWebSocketChannel channel = new IOWebSocketChannel.connect(
    "ws://127.0.0.1:8080/ws",
    pingInterval: Duration(milliseconds: 100));

  channel.stream
    .listen((data) => onMessage(data), onError: onError, onDone: onDone);

  this.webSocketChannel = channel;
 }

 onMessage(response) async {
  // 例如服务端返回的大概是这样一个json
  // {"cmd":"kick","data":{}}
  // {"cmd":"login","data":{}}
  Map params = json.decode(response);
  wsRouter.handle(params["cmd"], params["data"]);
 }

 onError(err) async {}

 onDone() async {}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Flutter 局部路由实现详解

    Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>. 当然Flutter也有类似的Widget,那就是Navigator,不过是以router的形式实现(像<router-view></router-view>???). Navigator的使用无非3个属性 initialRoute: 初始路由 onGenerateRoute: 匹配路由 onUnknown

  • Flutter开发之路由与导航的实现

    如果说构成视图元素的基本单位是组件,那么构成应用程序的基本单位就是页面.对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,是技术框架需要考虑的问题. 在前端开发中,可以使用路由框架来统一管理页面及它们之间的跳转.在Android中路由指的是一个Activity,在iOS中指的是一个ViewController,可以通过startActivity或pushViewController来打开一个新的路由.在Flutter中,路由的管理和导航借鉴了前端和客户端的设计思路,需要使用R

  • Flutter利用注解生成可自定义的路由的实现

    route_generator是什么 这是一个简单的 Flutter 路由生成库,只需要少量的代码,然后利用注解配合源代码生成,自动生成路由表,省去手工管理路由代码的烦恼. 特性 自定义路由名称 自定义路由动画 自定义路由参数 自定义路由逻辑 依赖 dependencies: # Your other regular dependencies here route_annotation: ^0.1.0 dev_dependencies: # Your other dev_dependencies

  • Flutter上线项目实战记录之路由篇

    1. 应用场景 开发中经常遇到 路由跳转时拿不到context怎么办,eg: token失效/异地登录跳转登录页面. 获取不到当前路由名称怎么办,eg: 点击push推送跳转指定路由,如果已经在当前页面就replace,如果不在就push. 注册监听路由跳转,做一些想做的事情 ,eg:不同路由,显示不同状态栏颜色. 等等... 2. 解决方案 解决思路: MaterialApp 的routes属性赋值路由数组,navigatorObservers属性赋值路由监听对象NavigatorManage

  • Flutter路由的跳转、动画和传参详解（最简单）

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • flutter 自定义websocket路由的实现

    在 flutter websocket 中 服务端推送数据给客户端后 很多人的处理居然都是 if / switch; 感觉这样的写法不咋好! 自己想的一个办法: 在 lib 目录下新建一个 socket 目录 里面创建两个文件main.dart和router.dart; main.dart : 主要控制websocket的连接 断开 和收到消息的处理; router.dart 则为websocket 服务端返回的消息做路由处理; router.dart import 'package:lee/l

  • Android Flutter基于WebSocket实现即时通讯功能

    Android Flutter基于WebSocket实现即时通讯功能

    目录 前言 联系人界面构建 聊天界面的实现 消息界面的 MultiProvider 运行效果 前言 我们在前面花了很大篇幅介绍 Provider 状态管理,这是因为在 Flutter 中,Provider 是众多状态管理插件的首选.本篇以即时聊天为例,来讲述 Provider 的综合应用,也算是 Provider 状态管理系列的终结篇.本篇涉及的内容如下: 联系人界面的构建: 聊天界面的简单实现; StreamProvider 接收 Socket流数据并自动通知界面刷新; MultiProvid

  • Flutter自定义弹窗Dialog效果

    本文实例为大家分享了Flutter自定义弹窗Dialog效果的具体代码,供大家参考,具体内容如下 主要是基于系统的dialog机制做一些使用限制和自定义UI的优化 核心代码: class CustomDialog {     static void show(BuildContext context, Widget Function(BuildContext ctx, void Function() dismiss)builder, {bool cancellable = false}) {  

  • flutter 自定义card阴影效果及card使用

    最近在用flutter写web程序,简直是炼狱模式..然后遇到个需求,原本的Card阴影无法满足产品需求,需要像IOS 那种超级高大上的,似影非影的效果..(简直分分钟想打死产品) 一开始,当然都是百度了,于是百度到了一个方法:BoxShadow! 于是高高兴兴开干了,代码如下 嗯...看上去好像没啥毛病,Y轴方向偏移7,blurRadius:模糊延申14,spreadRadius:不模糊的不要延申,为0 跑到安卓的浏览器上 简直Perfect!!!完工交差...(just我以为) 看到测试淫笑

  • Flutter 自定义Drawer 滑出位置的大小实例代码详解

    Flutter开发过程中,Drawer控件的使用频率也是比较高的,其实有过移动端开发经验的人来说,Flutter中的Drawer控件就相当于ios开发或者Android开发中的"抽屉"效果,从侧边栏滑出导航菜单.对于Flutter中的Drawer控件的常规用法就不多介绍,网上大把的教程. 那么本篇博文分享一个网上教程不多的一个知识点,那就是自定义Drawer的滑出位置的大小,自定义Drawer滑出位置就需要修改一个double的widthPercent属性,widthPercent一般

  • Flutter app页面路由以及路由拦截的实现

    Flutter app页面路由以及路由拦截的实现

    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builder: (context) => LoginPage()), ); 在开发过程中,随着页面的增加,如果继续使用这种方式会有如下缺陷: 代码耦合严重:涉及到页面跳转的地方就需要插入页面的构造函数,意味着需要知道其他页面的构建方式. 不易维护:一旦某个页面发生了变化,需要将涉及到该页面的跳转全部改变. 权限控制不方便:假设某些页面需

  • 100 行代码实现Flutter自定义TabBar的示例代码

    100 行代码实现Flutter自定义TabBar的示例代码

    Flutter 的确很强大,但美中不足的是生态还有待完善,没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库. 由此带来的直接影响是开发效率提不上去,需要耗费大量的时间精力在基础组件的封装上. 官方的 TabBar 不满足需求,又没有合适的轮子,只好自己造轮子啦.接下来带你一步步实现自定义 TabBar-- 一.目标和效果 需求目标是: 这个页面不要 material 左侧统一的返回键和 Title 在右侧有取消按钮,点取消即返回 点击 Tab 可以实现 content 切

  • Flutter如何完成路由拦截,实现权限管理

    之前几篇介绍了 fluro 的路由管理和转场动画,本篇介绍如何完成路由拦截,进而实现权限管理."此路是我开,此树是我栽.若是没权限,403到来!" 相关文章 若想了解 flutter 的路由相关篇章,请查阅下面的篇章: //www.jb51.net/article/215167.htm //www.jb51.net/article/214856.htm //www.jb51.net/article/215564.htm //www.jb51.net/article/215549.htm

随机推荐