快捷導(dǎo)航

Flutter使用socketIo實(shí)現(xiàn)實(shí)時(shí)通訊

更新時(shí)間：2024年07月04日 08:33:03 作者：小猿_00

本文主要介紹了Flutter使用socketIo實(shí)現(xiàn)實(shí)時(shí)通訊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. NodeJS

首先使用Node創(chuàng)建一個(gè)服務(wù)端，讓Node來對所有接受到的數(shù)據(jù)進(jìn)行一個(gè)獲取和存儲已經(jīng)轉(zhuǎn)發(fā)。通過在Node中編寫接口來對數(shù)據(jù)進(jìn)行一個(gè)具體的操作。

2. SocketIo

Socket.io 是一個(gè)基于事件驅(qū)動的實(shí)時(shí)通信庫，可以在瀏覽器和服務(wù)器之間建立持久連接，使得雙向?qū)崟r(shí)通信成為可能。它為開發(fā)者提供了簡單易用的 API，支持跨平臺、跨瀏覽器的實(shí)時(shí)通信。

3. 服務(wù)端實(shí)現(xiàn)

3.1 Express

沒有基礎(chǔ)的去看一下Node，方便后續(xù)代碼的學(xué)習(xí)。主要用來對各個(gè)接口的數(shù)據(jù)進(jìn)行渲染和前端頁面的展示。

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

@override
void initState() {
this.socket = IO.io('http://192.168.0.11:3000?roomid=1', <String, dynamic>{
	'transports': ['websocket'],
	'extraHeaders': {'foo': 'bar'} // optional
});
//建立連接的時(shí)候觸發(fā)的方法
socket.on('connect', (_) {
print('connect');
socket.emit('toServer', 'test'); //給服務(wù)器發(fā)送消息
});
//接收到信息的時(shí)候觸發(fā)的方法
socket.on('toClient', (data){
setState(() {
this._messageList.add(
	{ 
		"server":true,
		'title':data
	}
);
});
});
//斷開連接的時(shí)候觸發(fā)的方法
socket.on('disconnect', (_) => print('disconnect'));
super.initState();
}

總結(jié)

到此這篇關(guān)于Flutter使用socketIo實(shí)現(xiàn)實(shí)時(shí)通訊的文章就介紹到這了,更多相關(guān)Flutter socketIo實(shí)時(shí)通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: