[英]Flutter + socket.io connection
我正在嘗試使用 Flutter socket.io_client 連接 nodejs 套接字。 但它沒有連接,服務器運行正常。 下面是服務器代碼,在 flutter 中我使用了 socket.io_client。 沒有錯誤,但仍然連接不上。 我是 socket 和 nodejs 的初學者。 幫我看看是什么問題?
我的服務器.js
const socketio = require('socket.io');
const express = require('express');
const http = require('http');
const app = express();
server = app.listen(3000);
//io server
//const io = require("socket.io")(server);
//3000 or any other port.
const io = http.createServer(app);
const PORT = 3000 || process.env.PORT;
console.log(`Server running on port ${PORT}`);
var userConnection = [];
io.on('connect', (socket)=>
{
console.log(`nside connection`);
socket.on('users_info_to_signaling_server', (data) =>
{
var other_users = userConnection.filter(p=> p.meeting_id == data.meetingid);
// data saves to userConnection variable
// connection id and socket id are same
userConnection.push({
connectionId: socket.id,
user_id: data.current_user_name,
meeting_id: data.meetingid,
})
})
})
Flutter代碼
import 'package:flutter/material.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _localRenderer = new RTCVideoRenderer();
final _remoteRenderer = new RTCVideoRenderer();
//final _remoteRenderer2 = new RTCVideoRenderer();
TextEditingController titleController = TextEditingController();
IO.Socket socket;
@override
void dispose() {
// TODO: implement dispose
titleController.dispose();
super.dispose();
}
@override
void initState() {
connectToServer();
super.initState();
}
void connectToServer() {
//initializing with backend server
socket = IO.io('http://localhost:3000', <String, dynamic>{
'transports': ['websocket'],
'autoConnect': false,
});
//connection to server
socket.connect();
socket.onConnect((_) {
if (socket.connected) {
print('socket connected');
socket.emit('users_info_to_signaling_server',
{"current_user_name": "abccheck", "meetingid": "testing"});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Container(
height: 210,
child: Row(
children: [
Container(
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
height: 200,
width: 350,
decoration: BoxDecoration(color: Colors.black),
key: Key('local'),
child: RTCVideoView(_localRenderer),
),
Container(
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
height: 200,
width: 350,
decoration: BoxDecoration(color: Colors.black),
key: Key('remote'),
child: RTCVideoView(_localRenderer),
),
Container(
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
height: 200,
width: 350,
decoration: BoxDecoration(color: Colors.black),
key: Key('remote2'),
child: RTCVideoView(_localRenderer),
),
],
),
)
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: titleController,
decoration: InputDecoration(
hintText: 'Name or MeetingID',
alignLabelWithHint: true,
),
),
),
SizedBox(
height: 8.0,
),
RaisedButton(
onPressed: () {},
child: Text('Host'),
),
Padding(
padding: EdgeInsets.all(8.0),
),
RaisedButton(
onPressed: () {},
child: Text('Join'),
),
],
),
);
}
}
可能我遲到了,但也許有一天我會幫助別人。 所以問題是你需要檢查你的插件的文檔的版本兼容性,如下面的版本沖突
祝你好運希望這個幫助有一個美好的一天。
這是我的解決方案:您需要編寫192.168.1.x
而不是localhost
。 如果您運行 Express 應用程序端口3000
,則:
socket = IO.io('http://192.168.1.x:3000', <String, dynamic>{
'transports': ['websocket'],
'autoConnect': false,
});
要在 windows 中找到您本地的 ip 地址,請打開 cmd 並寫入ipconfig
。
...
...
IPv4 Address. . . . . . . . . . . : 192.168.1.x
...
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.