Flutter使用socketIo實(shí)現(xiàn)實(shí)時(shí)通訊
1. NodeJS
首先使用Node創(chuàng)建一個(gè)服務(wù)端，讓Node來(lái)對(duì)所有接受到的數(shù)據(jù)進(jìn)行一個(gè)獲取和存儲(chǔ)已經(jīng)轉(zhuǎn)發(fā)。通過在Node中編寫接口來(lái)對(duì)數(shù)據(jù)進(jìn)行一個(gè)具體的操作。
2. SocketIo
Socket.io 是一個(gè)基于事件驅(qū)動(dòng)的實(shí)時(shí)通信庫(kù)，可以在瀏覽器和服務(wù)器之間建立持久連接，使得雙向?qū)崟r(shí)通信成為可能。它為開發(fā)者提供了簡(jiǎn)單易用的 API，支持跨平臺(tái)、跨瀏覽器的實(shí)時(shí)通信。
3. 服務(wù)端實(shí)現(xiàn)
3.1 Express
沒有基礎(chǔ)的去看一下Node，方便后續(xù)代碼的學(xué)習(xí)。主要用來(lái)對(duì)各個(gè)接口的數(shù)據(jù)進(jìn)行渲染和前端頁(yè)面的展示。
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Android?Flutter如何自定義動(dòng)畫路由
flutter中有默認(rèn)的Route組件，叫做MaterialPageRoute，但是MaterialPageRoute太普通了，如果我們想要做點(diǎn)不同的跳轉(zhuǎn)特效應(yīng)該如何處理呢？一起來(lái)看看吧2023-04-04
Android編程實(shí)現(xiàn)輸入框動(dòng)態(tài)自動(dòng)提示功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)輸入框動(dòng)態(tài)自動(dòng)提示功能,結(jié)合實(shí)例形式分析了AutoCompleteTextView相關(guān)使用技巧,需要的朋友可以參考下2017-03-03
android教程viewpager自動(dòng)循環(huán)和手動(dòng)循環(huán)
這篇文章主要介紹了android的viewpager自動(dòng)循環(huán)和手動(dòng)循環(huán)示例,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了Android rom解包打包工具的相關(guān)資料,對(duì)rom解包打包相關(guān)知識(shí)感興趣的朋友可以參考下2016-01-01
在AndroidStudio中開發(fā)版本控制，除了Git就是SVN，和Eclipse不同，Android Studio沒有提供單獨(dú)的插件，只能和SVN客戶端關(guān)聯(lián)使用，這篇文章主要介紹了Android?studio使用SVN的方法,需要的朋友可以參考下2022-09-09
Android監(jiān)聽?wèi)?yīng)用前臺(tái)的實(shí)現(xiàn)方案
在 Android 應(yīng)用開發(fā)中,監(jiān)聽?wèi)?yīng)用前臺(tái)狀態(tài)是一項(xiàng)核心功能,對(duì)于優(yōu)化用戶體驗(yàn)、提升資源管理效率以及實(shí)現(xiàn)系統(tǒng)級(jí)功能具有重要意義,以下將從技術(shù)實(shí)現(xiàn)、業(yè)務(wù)場(chǎng)景和系統(tǒng)特性等多個(gè)維度,深入探討幾種主流的實(shí)現(xiàn)方案,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Android實(shí)現(xiàn)越界回彈效果，支持水平和垂直方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解Android中實(shí)現(xiàn)Redux方法
本篇文章給大家通過代碼實(shí)例教學(xué)Android中實(shí)現(xiàn)Redux的方法，有需要的朋友跟著參考下吧。2018-01-01
android中Bitmap用法(顯示,保存,縮放,旋轉(zhuǎn))實(shí)例分析
這篇文章主要介紹了android中Bitmap用法,以實(shí)例形式較為詳細(xì)的分析了android中Bitmap操作圖片的顯示、保存、縮放、旋轉(zhuǎn)等相關(guān)技巧,需要的朋友可以參考下2015-09-09
下面小編就為大家?guī)?lái)一篇淺談Android Studio JNI生成so庫(kù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-04-04