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

文章目录

  • [1. NodeJS](#1. NodeJS)
  • [2. SocketIo](#2. SocketIo)
  • [3. 服务端实现](#3. 服务端实现)
    • [3.1 Express](#3.1 Express)
  • [4 Flutter](#4 Flutter)
  • 总结

1. NodeJS

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

2. SocketIo

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

3. 服务端实现

3.1 Express

复制代码
	没有基础的去看一下Node,方便后续代码的学习。主要用来对各个接口的数据进行渲染和前端页面的展示。
javascript 复制代码
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

dart 复制代码
@override
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();
}

总结

如果有不懂得 直接私信。

相关推荐
九丝城主18 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克1 天前
七、性能优化
flutter·性能优化
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡2 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克2 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han3 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter