开发者

Flutter使用socketIo实现实时通讯

开发者 https://www.devze.com 2024-08-10 11:08 出处:网络 作者: 小猿_00
目录1. Nodejs2. SockjsetIo3. 服务端实现3.1 Express4 Flutter总结1. NodeJS编程客栈 首先使用Node创建一个服务端,让Node来对所有接受到的数据进行一个获取和存储已经转发。通过在Node中编写接口来对数据进行一个具
目录
  • 1. Nodejs
  • 2. SockjsetIo
  • 3. 服务端实现
    • 3.1 Express
  • 4 Flutter
    • 总结

      1. NodeJS编程客栈

      首先使用Node创建一个服务端,让Node来对所有接受到的数据进行一个获取和存储已经转发。通过在Node中编写接口来对数据进行一个具体的操作。

      2. SocketIo

      Socket.io 是一个基于事件驱动的实时通信库,可以在浏览器和服务器之间建立持久连接,使得双向实时通信成为可能。它为开发者提供了简单易用的 API,支持跨平台、跨浏览器的实时通信。

      3. 服务端实现

      3.1 Express

      没有基础的去看一下Node,方便后续代码的学习。主要用来对各个接口的数据进行渲染和前端页面的展示。

      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
      });
      //建立连接的时候触发的方法
      socket.on('connectjs', (_) {
      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();
      }
      

      总结

      到此这篇关于Flutter使用socketIo实现实时通讯的文章就介绍到这了,更多相关Flutter socketIo实时通讯内容请搜索编程客栈(www.devze.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)!

      0

      精彩评论

      暂无评论...
      验证码 换一张
      取 消

      关注公众号