尝试将 flutter 应用程序连接到网络套接字时出错

Question

我正在尝试将我的 flutter 应用程序与 websocket 连接，我想服务器端工作正常但在客户端出现以下错误，知道为什么吗？并且还阅读了类似的问题，通常他们说“这是关于设备连接”，但我可以在我的模拟器中使用 restful api，所以我认为这不是问题。

错误

 WebSocketException: Connection to 'http://localhost:8080/socket.io/?EIO=3&transport=websocket#' was not upgraded to websocket

客户端

 import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:live_chat_mongo/function.dart';
    import 'package:live_chat_mongo/models/Message.dart';
    import 'package:socket_io_client/socket_io_client.dart' as IO;
    
    import 'package:socket_io_client/socket_io_client.dart';
    
    // STEP1:  Stream setup
    class StreamSocket {
      final _socketResponse = StreamController<String>();
    
      void Function(String) get addResponse => _socketResponse.sink.add;
    
      Stream<String> get getResponse => _socketResponse.stream;
    
      void dispose() {
        _socketResponse.close();
      }
    }
    
    StreamSocket streamSocket = StreamSocket();
    
    //STEP2: Add this function in main function in main.dart file and add incoming data to the stream
    void connectAndListen() {
      IO.Socket socket = IO.io('http://localhost:8080/v1',
          OptionBuilder().setTransports(['websocket']).build());
      socket.onConnectError((data) => print(data));
      socket.onConnect((_) {
        print('connect');
      });
    
      //When an event recieved from server, data is added to the stream
      socket.on('event', (data) => streamSocket.addResponse);
      socket.onDisconnect((_) => print('disconnect'));
    }
    
    //Step3: Build widgets with streambuilder
    
    class BuildWithSocketStream extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: StreamBuilder(
            stream: streamSocket.getResponse,
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              return Container(
                child: Text('ds'),
              );
            },
          ),
        );
      }
    }
    
    void main() {
      connectAndListen();
      runApp(MaterialApp(home: BuildWithSocketStream()));
    }

服务器端

require("dotenv").config({ path: "variables.env" });

require("./app/services/mongo");
// require('./app/services/redis');

require("./app/models/User.js");
require("./app/models/Event.js");
require("./app/models/Committee.js");
require("./app/models/Comment.js");
require("./app/models/EventSession.js");
require("./app/models/Subscription.js");
require("./app/models/Form.js");
require("./app/models/Application.js");
require("./app/models/Announcement.js");
require("./app/models/MailToken.js");
require("./app/models/MailError.js");
require("./app/models/BlogPost.js");
require("./app/models/BlogComment.js");
require("./app/models/BlogCategory.js");

const app = require("./app");
var http = require("http").Server(app);
var io = require("socket.io")(http);
io.on("connection", (s) => {
  console.log("socket.io connection");

});
app.set("port", process.env.PORT || 7070);
const server = app.listen(app.get("port"), () => {
  console.log(`Express running → localhost:${server.address().port}`);
});

Answer 1

解决方案

将服务器端更改为此；

     require("./app/services/mongo");
     // require('./app/services/redis');

     require("./app/models/User.js");
     require("./app/models/Event.js");
     require("./app/models/Committee.js");
     require("./app/models/Comment.js");
     require("./app/models/EventSession.js");
     require("./app/models/Subscription.js");
     require("./app/models/Form.js");
     require("./app/models/Application.js");
     require("./app/models/Announcement.js");
     require("./app/models/MailToken.js");
     require("./app/models/MailError.js");
     require("./app/models/BlogPost.js");
     require("./app/models/BlogComment.js");
     require("./app/models/BlogCategory.js");
     const socketIO = require("socket.io");
     const app = require("./app");
     const server = require("http").createServer(app);
     const io = socketIO(server);
     io.on("connection", (s) => {
       console.log("socket.io connection");
     });
     app.set("port", process.env.PORT || 7070);
     server.listen(app.get("port"), () => {
       console.log(`Express running → localhost:${server.address().port}`);
     });

Flutter 中的 socket.io 版本升级到

socket_io_client: ^2.0.0-beta.2

我的问题解决了。

Answer 2

我遇到了这个问题，我通过更改 socket_io_client

的版本解决了这个问题

尝试将 flutter 应用程序连接到网络套接字时出错

Error when trying to connect flutter app to web socket

node.js

express

socket.io

flutter