Socket.io

注意server side需要使用3.0.3版本

否则flutter client会出现timeout (参考自)

(虽然文档也有注明, 但就这样鬼打墙去了半天时间)

这边工商一下队友的铁人赛.

未来有空将会补完与队友的flutter _WebRTC.

搭建Socket.io server side & web client的传送门

搭建好了的话便可以实现 flutter client<-> Server <-> web client

本篇将重点放在处理Flutter client端
一样也是和GetX做结合
Widget部分 全部贴出来篇幅会很冗长 更细部的请参考置底的GitHub link

class SocketIOPage extends GetView<SocketIOPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Obx(() {
          final stateString = controller.isOnConnect ? "已连线" : "未连线";
          return Text('聊天室 状态: $stateString');
        }),
        actions: [
          IconButton(
            icon: Icon(Icons.call),
            onPressed: () {
              controller.makeCall();
            },
          ),
        ],
      ),
      body: GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: SafeArea(
          child: Obx(
            () {
              return Column(
                children: [
                  Expanded(child: _buildMessageListView()),
                  _buildTextFieldRow(),
                ],
              );
            },
          ),
        ),
      ),
    );
  }

controller部分

class SocketIOPageController extends GetxController {
  final textEditingController = TextEditingController();

  late IO.Socket socket;

  final _isOnConnect = false.obs;
  set isOnConnect(value) => this._isOnConnect.value = value;
  get isOnConnect => this._isOnConnect.value;

  final _message = ''.obs;
  set message(value) => this._message.value = value;
  get message => this._message.value;
  
  //应该是要带变数 但目前先写a
  final _room = 'a'.obs;
  set room(value) => this._room.value = value;
  get room => this._room.value;
  //应该是要带变数 但目前先写Flutter_client
  final _userName = 'Flutter_client'.obs;
  set userName(value) => this._userName.value = value;
  get userName => this._userName.value;

  final _messageList = <String>[].obs;
  get messageList => _messageList.toList();
  
  @override
  onInit() {
    connectSokcetIO();
    super.onInit();
  }

  connectSokcetIO() {
    //因为我架在自己本机, 大家要把ip要换成自己的
    socket = IO.io('ws://192.168.x.xx:8090', <String, dynamic>{
      'transports': ['websocket']
    });

    socket.onConnect((_) {
      print('on connect');
      // socket.emit('msg', 'test');
      isOnConnect = true;
      socket.on('joined', (data) {
        print('joined');
        //room, id
        print(data.runtimeType);
        print(data);
      });
    });

    socket.on('message', (data) {
      print('message: ${data[1]}');
      // print(data.runtimeType);
      // print(data);

      final messageContent = data[1];
      _messageList.add(messageContent);
    });

    socket.onDisconnect((data) {
      print('disconnect');
      print(data);
    });

    socket.onConnectError((data) {
      print(data);
    });

    socket.emit('join', room);
  }

  sendMessage() {
    final sendData = userName + ':' + textEditingController.text;
    socket.emit('message', [room, sendData]);
    textEditingController.text = '';
  }

最後一起的大合体

本篇的GitHub source code

下一篇将为大家介绍 Native_splash