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