首页 > 其他分享> 文章详细

关于Flutter+Nest.js+Socket.io实现及时通讯

2021-12-26 19:30:36 阅读：253 来源： 互联网

标签：socket Nest js client io flutter payload Socket

Socket.IO是一个完全由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通信、跨平台的开源框架，它包括了客户端的JavaScript和服务器端的Node.js。

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

市面上关于flutter即时通信的文章并不是很全，经过一系列的踩坑之后，总结出了这篇相对较为完整简单的文章。

如没有看过 Nest 官网的 WebSocket 用法，请先查看官网的使用方式。

一、Nest.js中部署Socket.io

1.下载依赖的包

npm install @nestjs/websockets @nestjs/platform-socket.io --save
npm install @types/socket.io --save-dev

2.创建gatway文件

Gateway 是用 @WebSocketGateway() 装饰的类。

Gateway 的内部使用了 socket.io，不过你也可以使用其它的库，比如原生的 Web sockets。Gateway 就像是一个简单的 provider，你可以通过构造方法给它注入依赖，你也可以在其它的类里面注入使用 gateway 。

确保 gateway 运行，需要把它放在一个 providers 数组里

nest g gateway futter/flutter

3.flutter.gateway.ts文件中的主要代码段

import {
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets'
import { Server, Socket } from 'socket.io'
@WebSocketGateway({
  // 域名
  namespace: '/flutter',
  // 解决跨域
  allowEIO3: true,
  cors: {
    origin: /.*/,
    credentials: true,
  },
})
export class FlutterGateway {
  @WebSocketServer() server: Server
  handleConnection(client: Socket) {
    this.server.on('connection', () => {
      console.log('与服务器建立连接成功')
    })
  }
  // 加入房间
  @SubscribeMessage('joinRoom')
  handleJoinRoom(client: Socket, payload) {
    console.log(payload)
    client.join(payload.roomId)
    client.emit('joinRoom', payload.roomId)
  }

  // 离开房间
  @SubscribeMessage('leaveRoom')
  handleLeaveRoom(client: Socket, payload) {
    client.leave(payload.roomId)
    client.emit('leaveRoom', payload.roomId)
  }

  // 接受网页发送的数据
  @SubscribeMessage('message')
  handleMessage(client: any, payload: any) {
    console.log(payload.message)
    // 发送网页的数据给flutter端
    // client.emit('toflutter', payload.message)
    this.server.emit('toflutter', payload.message)
  }
}

二、在flutter中的配置

1.在flutter目录的yam文件中引入包

socket_io_client: ^1.0.1

2.导入包socket.io的包

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

3.基本代码段都有注释，不废话了直接上代码

import 'package:flutter/material.dart';
// 导入socket库
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> {
  TextEditingController controller = TextEditingController();
  // 实例化socket
  late IO.Socket socket;
  // 数据
  List messageList = [];

  @override
  void initState() {
    super.initState();
    // 路径
    socket = IO.io('http://172.20.10.5:3000/flutter', <String, dynamic>{
      'transports': ['websocket']
    });
    // 连接成功
    socket.on('connect', (_) {
      print('connect..');
    });

    socket.on("toflutter", (data) {
      print(data);
      // 将得到的数据存放到数组
      setState(() {
        messageList.add(data);
        print(messageList);
      });
    });
    // print(messageList);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('socket测试'),
        ),
        body: Column(
          children: [
            Container(
              child: TextField(
                controller: controller,
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  // 发送数据给服务端
                  socket.emit("message", {"message": controller.text});
                },
                child: Text("发送信息")),
            Container(
              height: 400,
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return messageList.length == 0
                      ? Text("没有聊天记录")
                      : ListTile(
                          title: Text("${messageList[index]}"),
                        );
                },
                itemCount: messageList.length,
              ),
            )
          ],
        ));
  }
}

三、完成效果

界面方面还没有详细设计，可能比较丑,等慢慢美化界面后上传github吧。

标签：socket,Nest,js,client,io,flutter,payload,Socket
来源： https://blog.csdn.net/weixin_44042480/article/details/122158996

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9