尝试将 Flutter 应用程序连接到 Web 套接字时出错答案

【问题标题】：Error when trying to connect flutter app to web socket尝试将 Flutter 应用程序连接到 Web 套接字时出错
【发布时间】：2021-08-19 15:38:53
【问题描述】：

我试图将我的颤振应用程序与 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}`);
});

【问题讨论】：

http://localhost8080/v1 中的主机名和端口之间缺少冒号 --> http://localhost:8080/v1
非常感谢！但它导致了另一个错误 WebSocketException: Connection to 'localhost:8080/socket.io/?EIO=3&transport=websocket#' is not upgrade to websocket 对此有什么想法吗？
从命令行试试这个curl "http://localhost:8080/socket.io/?EIO=4&transport=polling"它应该返回类似0{"sid":"Lbo5JLzTotvW3g2LAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000} 的东西
不知道它的 Error
```
无法获取 /v1/socket.io/
```
服务器还会不断打印 GET /socket.io/?EIO=3&transport=websocket 404 0.528 ms - 149

标签： node.js flutter express socket.io

【解决方案1】：

我正面临这个问题，我通过更改我的 socket_io_client 版本解决了这个问题

【讨论】：

【解决方案2】：

解决方案

将服务器端更改为此；

     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

我的问题解决了。

【讨论】：