im trying to connect my flutter app with websocket, i guess server side is working fine but getting error below in client side, any idea why ? And also read similar questions, usually they say ‘it’s about device connection’ but i can work with restful api’s in my emulator so i think that’s not the issue.
Error
WebSocketException: Connection to 'http://localhost:8080/socket.io/?EIO=3&transport=websocket#' was not upgraded to websocket
Client Side
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()));
}
Server Side
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}`);
});
2
Answers
Solution
changed Server Side to this;
Upgraded socket.io version in flutter to
socket_io_client: ^2.0.0-beta.2
And my problem fixed.
I am facing this problem and I solved this issue by changing my version of socket_io_client