Flutter使用socketIo實現(xiàn)實時通訊
更新時間：2024年07月04日 08:33:03 作者：小猿_00
本文主要介紹了Flutter使用socketIo實現(xiàn)實時通訊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1. NodeJS
首先使用Node創(chuàng)建一個服務(wù)端，讓Node來對所有接受到的數(shù)據(jù)進(jìn)行一個獲取和存儲已經(jīng)轉(zhuǎn)發(fā)。通過在Node中編寫接口來對數(shù)據(jù)進(jìn)行一個具體的操作。
2. SocketIo
Socket.io 是一個基于事件驅(qū)動的實時通信庫，可以在瀏覽器和服務(wù)器之間建立持久連接，使得雙向?qū)崟r通信成為可能。它為開發(fā)者提供了簡單易用的 API，支持跨平臺、跨瀏覽器的實時通信。
3. 服務(wù)端實現(xiàn)
3.1 Express
沒有基礎(chǔ)的去看一下Node，方便后續(xù)代碼的學(xué)習(xí)。主要用來對各個接口的數(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
});
//建立連接的時候觸發(fā)的方法
socket.on('connect', (_) {
print('connect');
socket.emit('toServer', 'test'); //給服務(wù)器發(fā)送消息
});
//接收到信息的時候觸發(fā)的方法
socket.on('toClient', (data){
setState(() {
this._messageList.add(
{
"server":true,
'title':data
}
);
});
});
//斷開連接的時候觸發(fā)的方法
socket.on('disconnect', (_) => print('disconnect'));
super.initState();
}
總結(jié)
到此這篇關(guān)于Flutter使用socketIo實現(xiàn)實時通訊的文章就介紹到這了,更多相關(guān)Flutter socketIo實時通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用Android中的TextView實現(xiàn)逐字顯示動畫
在安卓程序啟動的時候，想逐字顯示一段話，每個字都有一個從透明到不透明的漸變動畫。那如何顯示這個效果，下面一起來看看。2016-08-08
以一個著色游戲展開講解Android中區(qū)域圖像填色的方法
這篇文章主要介紹了Android中實現(xiàn)區(qū)域圖像顏色填充的方法,文中以一個著色游戲為例講解了邊界的填充等各種填色操作,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android 實現(xiàn)文字左右對齊效果的方法，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-05-05
對于Android平臺上的線程優(yōu)先級設(shè)置來說可以處理很多并發(fā)線程的阻塞問題，比如很多無關(guān)緊要的線程會占用大量的CPU時間，雖然通過了MultiThread來解決慢速I/O但是合理分配優(yōu)先級對于并發(fā)編程來說十分重要2016-02-02
android中ListView數(shù)據(jù)刷新時的同步方法
這篇文章主要介紹了android中ListView數(shù)據(jù)刷新時的同步方法,涉及Android刷新listview實現(xiàn)數(shù)據(jù)同步的技巧,需要的朋友可以參考下2015-05-05
Android中利用SurfaceView制作抽獎轉(zhuǎn)盤的全流程攻略
這篇文章主要介紹了Android中利用SurfaceView制作抽獎轉(zhuǎn)盤的全流程,從圖案的繪制到轉(zhuǎn)盤的控制再到布局,真的非常全面,需要的朋友可以參考下2016-04-04
詳解Android使用OKHttp3實現(xiàn)下載(斷點續(xù)傳、顯示進(jìn)度)
本篇文章主要介紹了詳解Android使用OKHttp3實現(xiàn)下載(斷點續(xù)傳、顯示進(jìn)度)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Android如何定制自己的EditText，如何輕松改變底線顏色，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細(xì)介紹了OpenGL ES渲染管線的簡單概述，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
外層豎向ScrollView,里層橫向ScrollView滑動沖突的解決方法
下面小編就為大家?guī)硪黄鈱迂Q向ScrollView,里層橫向ScrollView滑動沖突的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04