Flutter详细使用socketIo实现实时通讯

文章目录

  • 1. NodeJS
  • 2. SocketIo
  • 3. 服务端实现
    • 3.1 Express
  • 4 Flutter
  • 总结

1. NodeJS

  首先使用Node创建一个服务端,让Node来对所有接受到的数据进行一个获取和存储已经转发。通过在Node中编写接口来对数据进行一个具体的操作。不懂接口可以查看这篇文章。[接口](https://editor.csdn.net/md/?articleId=133947635)

2. SocketIo

Socket.io 是一个基于事件驱动的实时通信库,可以在浏览器和服务器之间建立持久连接,使得双向实时通信成为可能。它为开发者提供了简单易用的 API,支持跨平台、跨浏览器的实时通信。

3. 服务端实现

3.1 Express

	没有基础的去看一下Node,方便后续代码的学习。主要用来对各个接口的数据进行渲染和前端页面的展示。
var express=require('express');
var app=express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.set('view engine','ejs');
app.use(express.static('public'));
app.get('/',function(req,res){res.render('index');
})
server.listen(8000);
//socket.io 配置
io.on('connection', function (socket) {console.log('建立连接');socket.on('toServer',function(data){console.log(data);socket.emit('toClient',data);
})
});

4 Flutter


void initState() {
this.socket = IO.io('http://192.168.0.11:3000?roomid=1', <String, dynamic>{'transports': ['websocket'],'extraHeaders': {'foo': 'bar'} // optional
});
//建立连接的时候触发的方法
socket.on('connect', (_) {
print('connect');
socket.emit('toServer', 'test'); //给服务器发送消息
});
//接收到信息的时候触发的方法
socket.on('toClient', (data){
setState(() {
this._messageList.add({ "server":true,'title':data}
);
});
});
//断开连接的时候触发的方法
socket.on('disconnect', (_) => print('disconnect'));
super.initState();
}

总结

如果有不懂得 直接私信。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/39914.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何正确面对GPT-5技术突破

随着人工智能技术的快速发展&#xff0c;预训练语言模型在自然语言处理领域取得了显著的成果。其中&#xff0c;GPT系列模型作为代表之一&#xff0c;受到了广泛关注。2023年&#xff0c;GPT-5模型的发布引起了业界的热烈讨论。本文将从以下几个方面分析GPT-5的发布及其对人工智…

Spring Boot2.x教程:(四)Spring Boot2.6及之后版本整合Knife4j的问题

Spring Boot2.6及之后版本整合Knife4j的问题 1、概述2、问题出现原因及解决办法3、拓展3.1、为什么发生这种变化 4、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以扫描下方二维码关注我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、概述 今天在2.7…

java-迭代器

## Java中的迭代器 ### 1. 介绍 迭代器&#xff08;Iterator&#xff09;是Java集合框架中一个重要的接口&#xff0c;用于遍历集合中的元素。迭代器提供了一种通用的方法来访问集合中的每个元素&#xff0c;而不需要了解集合的底层实现。Java中的迭代器支持集合的顺序遍历&a…

文本生成模型API比拼!KimiGPT 和 GLM-4 哪个更适合你?

在当今信息时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展正以前所未有的速度和深度改变着我们的生活和工作方式。随着大数据、计算能力和算法的不断提升&#xff0c;各类大模型的涌现使得AI的应用领域日益广泛&#xff0c;从自然语言处理到图像识别&#…

标准卷积的初始化和详细计算步骤,在代码中哪一步开始更新卷积核(权重)

标准卷积的初始化和详细计算步骤&#xff0c;在代码中哪一步开始更新卷积核&#xff08;权重&#xff09; flyfish 卷积 - 感受野&#xff08;Receptive Field&#xff09; 在卷积神经网络&#xff08;CNN&#xff09;中为什么可以使用多个较小的卷积核替代一个较大的卷积核&…

互联网盲盒小程序的市场发展前景如何?

近几年来&#xff0c;盲盒成为了大众热衷的消费市场。盲盒是一个具有随机性和惊喜感&#xff0c;它能够激发消费者的好奇心&#xff0c;在拆盲盒的过程中给消费者带来巨大的愉悦感&#xff0c;在各种的吸引力下&#xff0c;消费者也愿意为各类盲盒买单。如今&#xff0c;随着盲…

VSCode里python代码不扩展/级联了的解决办法

如图 解决办法&#xff1a;重新下载新的扩展工具 步骤如下 1、在左边工具栏打开Extensions 2、搜索框输入python&#xff0c;选择别的扩展工具&#xff0c;点击Install - 3在扩展工具所在的目录下&#xff0c;新建一个文件&#xff0c;就可以用了

iis部署前后端分离项目(React前端,Node.js后端)

iis虽然已经有点过时&#xff0c;但不少用户还在用&#xff0c;故总结一下。 1. 安装iis 如果电脑没有自带iis管理器&#xff0c;打开控制面板->程序->启用或关闭Windows功能&#xff0c;勾选iis安装即可 2. 部署前端项目 打开iis&#xff0c;添加网站&#xff0c;物理…

Docker加速器配置指南:提升镜像下载速度的秘诀 加速安装Mysql Redis ES

在安装 Docker 镜像时&#xff0c;由于官方镜像下载速度较慢&#xff0c;我们可以使用阿里云的镜像加速器来提升下载速度。 使用阿里云镜像加速器 首先&#xff0c;找到并配置阿里云的镜像加速器。安装教程如下&#xff1a; 登录阿里云&#xff0c;进入容器镜像服务。直达链…

05 docker 镜像

目录 1. 镜像 2. 联合文件系统 3. docker镜像加载原理 4. 镜像分层 镜像分层的优势 5. 容器层 1. 镜像 镜像是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好行程一个可交付的运行环境&#xf…

AMEYA360代理:海凌科60G客流量统计雷达模块 4T4R出入口绊数计数

数字化时代&#xff0c;不管是大型商城还是各种连锁店&#xff0c;客流统计分析都可以帮助企业更加精准地了解顾客需求和消费行为。 海凌科推出一款专用于客流量统计的60G雷达模块&#xff0c;4T4R&#xff0c;可以实时进行固定范围内的人体运动轨迹检测&#xff0c;根据人体的…

聊一聊领域驱动和贫血

写在前面 前段时间跟领导讨论技术债概念时不可避免地提到了代码的质量&#xff0c;而影响代码质量的因素向来都不是单一的&#xff0c;诸如项目因素、管理因素、技术选型、人员素质等等&#xff0c;因为是技术债务&#xff0c;自然就从技术角度来分析&#xff0c;单纯从技术角…

亚马逊跟卖僵尸选品采集,批量多站点,多关键词同时采集获取!

今天给卖家分享下亚马逊跟卖选择僵尸链接&#xff0c;现在很多卖家&#xff0c;找僵尸链接是不是都是通过亚马逊前端页面找或者是通过搜索&#xff0c;这样不但费时费力&#xff0c;还找不出几个僵尸链接&#xff0c;而且就算是找到了&#xff0c;也需要各种检查&#xff0c;非…

Electron、Win11静默打印与PowerShell:技术融合与应用探索

Electron、Win11静默打印与PowerShell&#xff1a;技术融合与应用探索 在现代软件开发与办公环境中&#xff0c;技术的融合与创新不断推动着工作效率的提升和用户体验的优化。本文将深入探讨Electron框架、Windows 11&#xff08;Win11&#xff09;静默打印技术以及PowerShell…

java版本工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统

工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管理的…

【操作系统期末速成】 EP03 | 学习笔记(基于五道口一只鸭)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;☀️☀️☀️2.1 考点五&#xff1a;进程的概念及特征2.1 考点六&#xff1a;进程的状态与切换 一、前言&#x1f680;&#x1f680;&#x1f680; ☀️ 回报不在行动之后&#xff0c;回报在行动…

linux内核编译流程、驱动加载顺序

内核编译 根据顶层Makefile找到vmlinux目标开始分析&#xff1a; vmlinux: scripts/link-vmlinux.sh autoksyms_recursive $(vmlinux-deps) FORCE$(call if_changed,link-vmlinux)vmlinux-deps : $(KBUILD_LDS) $(KBUILD_VMLINUX_OBJS) $(KBUILD_VMLINUX_LIBS) 根据这个展开 …

GCN结合Transformer炸场!性能暴涨74%,效率翻3倍

最近发现了两篇效果很妙的GCN结合Transformer的最新工作&#xff0c;分享给大家&#xff1a; MP-GT&#xff1a;通过结合GCN和Transformer方法来增强App使用预测的准确性&#xff0c;实现了74.02%的性能提升&#xff0c;且训练时间减少了79.47%。 MotionAGFormer&#xff1a;结…

MySQL 图形化界面

填完信息之后&#xff0c;圆圈处可以验证是否可以连接数据库 展示所有数据库&#xff08;因为有的可能连上&#xff0c;却没有数据库显示&#xff09;

“小红书、B站崩了”,背后的阿里云怎么了?

导语&#xff1a;阿里云不能承受之重 文 | 魏强 7月2日&#xff0c;“小红书崩了”、“B站崩了”等话题登上了热搜。 据第一财经、财联社等报道&#xff0c;7月2日&#xff0c;用户在B站App无法使用浏览历史关注等内容&#xff0c;消息界面、更新界面、客服界面均不可用&…