在 Flutter Websockets 中提及标头答案

【问题标题】：Mention headers in Flutter Websockets在 Flutter Websockets 中提及标头
【发布时间】：2021-07-15 06:08:07
【问题描述】：

我使用 Laravel 进行后端 WebSocket 处理。我需要提及 Channel Name 和 Event 以收听任何更改，但 IOWebSocket 库不允许任何更改。我如何提及这些或有任何其他方式来收听 WebSocket

图书馆：web_socket_channel 2.0.0

代码

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  var channel = IOWebSocketChannel.connect(Uri.parse('ws://192.168.0.164:6001/app/KEY'));

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("Web Sockets"),
      ),
      body:
      // SizedBox(),
      Padding(
        padding: const EdgeInsets.all(20.0),
        child: StreamBuilder(
          stream: channel.stream,
          builder: (context, snapshot) {
            print("Snapshot : ${snapshot.data}");

            if (snapshot.hasError) {
              print("Snapshot Error : ${snapshot.error}");
            } else {
              print("Snapshot Success : ${snapshot.data}");
            }

            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 24.0),
              child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // isExtended: true,
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () async {
          // channel.sink.add('Hello!');
          // await http.get(Uri.parse("http://192.168.0.164:8000/Message/Socket/Send/1000"));
        },
      ),
    );
  }

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

输出

Snapshot : {"event":"pusher:connection_established","data":"{\"socket_id\":\"945362790.973640635\",\"activity_timeout\":30}"}
Snapshot Success : {"event":"pusher:connection_established","data":"{\"socket_id\":\"945362790.973640635\",\"activity_timeout\":30}"}

当应用程序打开时它会打印这个，但是当一个套接字消息被发送时，它什么也不做。已经卡了一个多星期了。任何指导表示赞赏

【问题讨论】：

标签： laravel flutter dart websocket pusher

【解决方案1】：

我认为这篇文章会有所帮助。解决方案是将 laravel websocket 配置为使用通道，以便您可以创建自己的解决方案

https://beyondco.de/docs/laravel-websockets/advanced-usage/custom-websocket-handlers

编辑：本教程更详细地解释了如何使用自定义 websocket 实现来处理通道

https://freek.dev/1228-introducing-laravel-websockets-an-easy-to-use-websocket-server-implemented-in-php

【讨论】：