Flutter Socket.io框架的使用

前言

Web socket 是双向的、全双工的通信技术，其中数据的传输是实时和双向的

而Socket.io是一个用于实现Web socket的流行库。

一 客户端使用

参考：https://news.sangniao.com/p/1845827276

1 安装

 pub add socket_io_client

2 代码

import 'package:flutter/material.dart';

import 'package:socket_io_client/socket_io_client.dart' as IO;

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  IO.Socket? socket;
  String receivedMessage = "待展示消息";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    initSocket();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LeonardoHome"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: 100,
          ),
          Text(
            receivedMessage,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 25),
          ),
          ElevatedButton(
              onPressed: () {
                sendMessage();
              },
              child: Text("发送消息")),
        ],
      ),
    );
  }

  initSocket() {
    socket = IO.io('http://localhost:3001', <String, dynamic>{
      'autoConnect': true,
      'transports': ['websocket'],
    });
    socket!.connect();
    socket!.onConnect((_) {
      print('Connection established');
    });
    socket!.onDisconnect((_) => print('Connection Disconnection'));
    socket!.onConnectError((err) => print(err));
    socket!.onError((err) => print(err));
    socket!.on('message', (newMessage) {
      print(newMessage);

      setState(() {
        receivedMessage = newMessage["message"];
      });
    });
  }

  // 发送消息的触发
  sendMessage() {
    String message = "test";
    if (message.isEmpty) return;
    Map messageMap = {
      'message': message,
      'time': DateTime.now().millisecondsSinceEpoch,
    };
    socket!.emit('sendNewMessage', messageMap);
  }

  @override
  void dispose() {
    socket!.disconnect();
    socket!.dispose();
    super.dispose();
  }

  
}

二  NodeJS

1 安装

npm install express

npm install socket.io

2 服务端

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.send('<h1>Welcome Realtime Server</h1>');
});

//在线用户
var onlineUsers = {};
//当前在线人数
var onlineCount = 0;

io.on('connection', function(socket){
    console.log('a user connected');

    //监听新用户加入
    socket.on('login', function(obj){
        //将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
        socket.name = obj.userid;

        //检查在线列表，如果不在里面就加入
        if(!onlineUsers.hasOwnProperty(obj.userid)) {
            onlineUsers[obj.userid] = obj.username;
            //在线人数+1
            onlineCount++;
        }

        //向所有客户端广播用户加入
        io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
        console.log(obj.username+'加入了聊天室');
    });

    //监听用户退出
    socket.on('disconnect', function(){
        //将退出的用户从在线列表中删除
        if(onlineUsers.hasOwnProperty(socket.name)) {
            //退出用户的信息
            var obj = {userid:socket.name, username:onlineUsers[socket.name]};

            //删除
            delete onlineUsers[socket.name];
            //在线人数-1
            onlineCount--;
            //向所有客户端广播用户退出
            io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
            console.log(obj.username+'退出了聊天室');
        }
    });

    //监听用户发布聊天内容
    socket.on('sendNewMessage', function(obj){
        //向所有客户端广播发布的消息
        io.emit('message', obj);
        console.log('说：'+obj.content);
    });

});
// 监听3000 端口

http.listen(3001, function(){
    console.log('listening on *:3001');
});