Laravel Socket.I.O vuejs

Laravel Socket.I.O vuejs

嗨,我正在尝试连接 Socket.I.O vuejs laravel

在我的App.js或Main.js代码中是

  import io from 'socket.io-client';
  import Echo from 'laravel-echo';
  import VueEcho from 'vue-echo';
  import VueSocketio from 'vue-socket.io';

  window.io = require('socket.io-client');

   const EchoInstance = new Echo({
     broadcaster: 'socket.io',
      host: window.location.hostname + ':6001'
  });

  Vue.use(VueEcho, EchoInstance);

在Channels.php

Broadcast::channel('test-event', function() {
return true;
});

示例事件

namespace App\Events;
 use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Broadcasting\InteractsWithSockets;
 use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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

/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct()
{
     return "Hello";
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new Channel('test-event');
}

public function broadcastWith()
  {
      return [
       'data' => 'key'
       ];
  }
 }

在路线中 web.php

Route::get('test-broadcast', function(){
broadcast(new \App\Events\ExampleEvent);

});

在我的组件文件中

mounted() {
this.$echo.channel("test-event").listen("ExampleEvent", e => {
  console.log(e);
 });
}

根据 https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b

当我 运行

/test-broadcast

它必须在我的 about.vue 浏览器控制台中给出响应,但根本没有任何显示。有什么可以帮助我遗漏的东西吗,在此先感谢

你有没有设置任何队列驱动程序?您将需要配置 运行 一个队列侦听器。所有事件广播都是通过排队作业完成的。

否则你可以使用 ShouldBroadcastNow 接口。

你的改变示例事件:

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class ExampleEvent implements ShouldBroadcastNow
  { ...