如何在 Flutter 中使用 websocket？

Question

我正在尝试为 Laravel-Flutter 项目实现 WebSocket。对于 Laravel 方面，我遵循了以下步骤。如果您发现任何错误或遗漏，请随时说：

https://gist.github.com/emir-ekin-ors/79e670eb6ea970af38c476a8087c19ea

当我用 Tinker 测试它时，我可以在仪表板中看到该事件。所以我假设 Laravel 部分工作正常。

问题是当我尝试在 Flutter 中收听频道时。我在终端上看不到任何东西。我尝试遵循 web_socket_channel 包的文档。我对所有建议持开放态度，因为我对 websocket 一无所知。您可以在下面找到 Flutter 代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: MyWebSocketScreen(),
        );
    }
}

class MyWebSocketScreen extends StatefulWidget {
    @override
    _MyWebSocketScreenState createState() => _MyWebSocketScreenState();
}

class _MyWebSocketScreenState extends State<MyWebSocketScreen> {
    late final _channel;
    late StreamSubscription _streamSubscription;

    @override
    void initState() {
        super.initState();
        _channel = WebSocketChannel.connect(Uri.parse('wss://localhost:6001'));
        _streamSubscription = _channel.stream.listen((data) {
            print('Received: $data');
        }, onError: (error) {
            print('Error: $error');
        });
    }

    @override
    Widget build(BuildContext context) {
        return Placeholder();
    }

    @override
    void dispose() {
        _streamSubscription.cancel();
        _channel.sink.close();
        super.dispose();
    }
}

如果需要，这是 Laravel 中的 NewMessage 类：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn(): array
    {
        return [
            new Channel('home'),
        ];
    }
}

Answer 1

您可以使用

web_socket_channel

包来处理 WebSocket。以下是如何在 Flutter 中设置和使用 WebSocket 的基本示例：

按照以下步骤操作，

1. 将

   web_socket_channel

   包添加到您的

   pubspec.yaml

   文件中。

   依赖关系： web_socket_channel：^2.2.0

您可以使用此链接了解有关此 Web 套接字通道包的更多信息。

2. 将此库添加到 Dart 文件中之后。

   导入'包：flutter/material.dart'; 导入'包：web_socket_channel / web_socket_channel.dart'； 导入'包：web_socket_channel/io.dart';

3. 现在您应该创建一个 WebSocket 连接。

最终通道 = IOWebSocketChannel.connect('ws://your-websocket-url');

4.如何发送和接收消息。

发送消息，

channel.sink.add('Hi, WebSocket!');

收到消息，请密切关注频道直播，

StreamBuilder(
  stream: channel.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Received: ${snapshot.data}');
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return CircularProgressIndicator();
    }
  },
)

5.请注意，当您不再需要时，应该关闭 websocket 连接。

@override
void dispose() {
  channel.sink.close();
  super.dispose();
}