Flutter 中使用 Socket.io 实现即时通信

1. 安装插件

代码语言：javascript复制

dependencies:
  socket_io_client: ^0.9.12

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入插件

在需要用到的该插件的文件中引入插件包。

代码语言：javascript复制

import 'package:socket_io_client/socket_io_client.dart';

3. 使用插件

代码语言：javascript复制

import 'package:flutter/material.dart';

// 引入Socket.io
import 'package:socket_io_client/socket_io_client.dart' as IO;

class SocketPage extends StatefulWidget {
    SocketPage({Key key}) : super(key: key);
    @override
    _SocketPageState createState() => _SocketPageState();
}

class _SocketPageState extends State<SocketPage> {

    ScrollController _scrollController = new ScrollController();
    IO.Socket socket;
    List messageList=[];

    @override
    void initState() {
    
        super.initState();
        // 和服务器端建立连接
        this.socket = IO.io('http://192.168.0.11:8000', <String, dynamic>{
            'transports': ['websocket'],
        });
        // 连接事件
        this.socket.on('connect', (_) {
            print('connect..');
        });
        // 接受来自服务端的数据
        this.socket.on('toClient', (data){
            setState(() {
                this.messageList.add(data);
            });
            // 改变滚动条的位置
            this._scrollController.jumpTo(_scrollController.position.maxScrollExtent 80);
      
        });
        // 断开连接
        this.socket.on('disconnect', (_){
            print('disconnect')
        });
    }


    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Socket.io演示"),
            ),
            floatingActionButton: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: (){
                    // 发送数据到服务端
                    this.socket.emit('toServer',{
                        "username":'aiguangyuan',
                        "age":18
                    });
                },
            ),
            body: ListView.builder(
                // 滚动控制器
                controller: this._scrollController,
                itemCount: this.messageList.length,
                itemBuilder: (context,index){
                    return ListTile(
                        title: Text("${this.messageList[index]}"),
                    );
                },
            ),
        );
    }
}

4. 服务端代码参考

代码语言：javascript复制

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);  

io.on('connection', function (socket) {
    // console.log('建立链接');
    socket.on('toServer',function(data){
        // 获取客户端发送的数据
        console.log(data);      
        // 将数据进行广播到客户端
        io.emit('toClient',data);
    })
});

参考：

https://pub.dev/packages/socket_io_client

flutter ode yaml 插件 服务端

0 人点赞