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();
}

总结

如果有不懂得 直接私信。

相关推荐
火柴就是我20 小时前
flutter 之真手势冲突处理
android·flutter
Speed12320 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间20 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭20 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone21 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter