Laravel Echo Server浏览器无响应及依赖报错问题排查求助

Let's break down your problems one by one and fix them step by step:

1. Browser Console No Logs When Broadcasting Event #

Your terminal shows output when hitting /test-broadcast, which means the event is being dispatched and processed by the queue correctly. The issue lies with how your frontend is listening to the event:

• Event Namespace Mismatch: Laravel Echo automatically prepends App.Events. to your event class name by default. So instead of listening for ExampleEvent, you need to listen for the fully qualified namespaced event (with a dot prefix):

  window.Echo.channel('test-event')
    .listen('.App\\Events\\ExampleEvent', (e) => { 
      console.log(e); 
    });
  

  Alternatively, you can define a custom event name by adding a broadcastAs method to your ExampleEvent class:

  public function broadcastAs()
  {
      return 'example-event';
  }
  

  Then listen for that custom name (with a dot prefix too):

  window.Echo.channel('test-event')
    .listen('.example-event', (e) => { 
      console.log(e); 
    });
  }
  

• Verify Echo Server Connection: Make sure your laravel-echo-server is running with laravel-echo-server start. Check its logs (since devMode is true) to see if the frontend is successfully connecting to the server and subscribing to the test-event channel.
• Check CORS Settings: If your frontend is on a different port than your Laravel app, you need to enable CORS in your laravel-echo-server.json config. Update the apiOriginAllow section:

  "apiOriginAllow": {
      "allowCors": true,
      "allowOrigin": "http://localhost:8000", // Replace with your Laravel app URL/port
      "allowMethods": "GET, POST",
      "allowHeaders": "Origin, Content-Type, X-Auth-Token"
  }
  

  Restart the Echo Server after making this change.

2. TypeError: Error resolving module specifier: laravel-echo #

You're using type="module" in your script tag, but the import path for Laravel Echo is incorrect. Here's how to fix it:

• Use the Correct ESM Import Path: Laravel Echo provides an ES module build that you can import directly. Update your import line to:

  import Echo from 'laravel-echo/dist/echo.esm.js';
  

• Alternative: Skip Module Syntax: If you don't want to use ES modules, remove the type="module" attribute and load Echo via the global bundle. First, make sure you've compiled your assets with Laravel Mix (after fixing the cross-env issue below), then use:

  <script src="{{ mix('js/app.js') }}"></script>
  <script>
      window.Echo = new Echo({ 
          broadcaster: 'socket.io', 
          host: window.location.hostname + ':6001' 
      });
      window.Echo.channel('test-event')
        .listen('.App\\Events\\ExampleEvent', (e) => { 
          console.log(e); 
        });
  </script>
  

  This assumes you've imported Echo and socket.io in your resources/js/app.js file like so:

  import Echo from 'laravel-echo';
  window.io = require('socket.io-client');
  window.Echo = new Echo({
      broadcaster: 'socket.io',
      host: window.location.hostname + ':6001'
  });
  

3. 'cross-env' is Not Recognized as an Internal or External Command #

This error happens because cross-env isn't installed in your project. Fix it with:

1. Install cross-env as a development dependency:

   npm install cross-env --save-dev
   

2. Now you can run your Mix command again:

   npm run development -- --watch
   

内容的提问来源于stack exchange，提问作者M a m a D