连接Django和Flutter websocket时出现问题

Question

我正在尝试使用

WebSockets

与我的 Django 后端和 Flutter 代码建立连接，但不幸的是我无法这样做，浏览了很多文章和视频，每个人基本上都在做同样的事情而没有收到错误。请稍微推动一下，我对此还很陌生。

首先，我创建了一个名为“chat_app”的新 django 应用程序（将其添加到 settings.py 中），在其中创建了我的

Messages

:

的新模型

    class Message(models.Model):
        room = models.ForeignKey(Room, on_delete=models.CASCADE)
        sender = models.ForeignKey(User, on_delete=models.CASCADE)
        content = models.TextField()
        timestamp = models.DateTimeField(auto_now_add=True)
    
        def __str__(self):
            return self.content

然后我做了我的

consumers.py

（这里我有点困惑，因为ID是唯一的而不是我的名字，所以用我的房间

unique_id

代替名字不是更好吗？决定坚持教程。）

    class ChatConsumer(WebsocketConsumer):
        def connect(self):
            self.room_name = self.scope['url_route']['kwargs']['room_name']
            self.room_group_name = 'chat_%s' % self.room_name
    
            # Join room group
            self.channel_layer.group_add(
                self.room_group_name,
                self.channel_name
            )
    
            self.accept()
    
        def disconnect(self, close_code):
            # Leave room group
            self.channel_layer.group_discard(
                self.room_group_name,
                self.channel_name
            )

完成

routing.py

    # The WebSocket URL pattern for chat rooms is defined by this code
    websocket_urlpatterns = [
        re_path(r'ws/chat_app/(?P<room_name>\w+)/$', ChatConsumer.as_asgi()),
    ]

然后将其添加到我的项目 URL 中：

    urlpatterns = [
        path('admin/', admin.site.urls),
        ...,
        path('ws/', include(websocket_urlpatterns)),
    ]

这就是我尝试在 Flutter 中建立连接的方式，基本上它是一个新页面，我通过上一页的

Navigator

传递房间数据：

class ChatScreen extends StatefulWidget {
  const ChatScreen({
    Key? key,
    required this.room,
  }) : super(key: key);
  final RoomModelResponse room;

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  late WebSocketChannel _channel;

  @override
  void initState() {
    super.initState();
    _channel = IOWebSocketChannel.connect(
        'wss://http://192.168.0.11:8000/ws/chat_app/${widget.room.roomName}/'); // Update the WebSocket URL with your Django server address and room name
    _channel.stream.listen((message) {
      setState(() {
        _messages.add(message);
      });
    });
  }

输出：

在颤振终端中，我收到以下消息：

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://192.168.0.11:8000/ws/chat_app/3wVCio/#' was not upgraded to websocket
#0      new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:119:24)
#1      Stream.handleError.<anonymous closure> (dart:async/stream.dart:931:16)
#2      _HandleErrorStream._handleError (dart:async/stream_pipe.dart:269:17)
#3      _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:157:13)
#4      _RootZone.runBinaryGuarded (dart:async/zone.dart:1606:10)
#5      _BufferingStreamSubscription._sendError.sendError (dart:async/stream_impl.dart:358:15)
#6      _BufferingStreamSubscription._sendError (dart:async/stream_impl.dart:376:7)
#7      _BufferingStreamSubscription._addError (dart:async/stream_impl.dart:280:7)
#8      _SyncStreamControllerDispatch._sendError (dart:async/stream_controller.dart:788:19)
#9 <…>

姜戈：

Not Found: /ws/chat_app/3wVCio/
[15/Feb/2024 16:46:19] "GET /ws/chat_app/3wVCio/ HTTP/1.1" 404 4379

“3wVCio”是我房间的

unique_id

。

如果需要的话我会提供更多信息

更新： 我最近尝试过的想法是在我的项目中允许所有来源

CORS

：

INSTALLED_APPS = [
    # other installed apps
    'corsheaders',
]
CORS_ALLOW_ALL_ORIGINS = True

不幸的是，没有成功..

Answer 1

在您的

ChatScreen

文件中，有一个非常不寻常的 URL，因为假设只有一种协议

wss

或

http

但您同时使用这两种协议，因此这可能是问题所在。 如果你想使用网络套接字，那么协议应该只是

wss or ws

。