奇怪的梦

Posted on Edited on In Disqus:

奇怪的梦

太过美好的梦，以至于不愿意醒来……

laravel echo 设置

laravel echo用于提供socket服务，现代网络服务必备。

于是使用laravel-echo-server

注意laravel-echo-server是兼容pusher的。

所以直接安装pusher包 + 设置config/broadcasting.php就可以快速上手。

网络上没人将详细的设置方法写出来不知道是为什么。

需要的包

1
2
composer require pusher/pusher-php-server
npm install --save laravel-echo socket.io-client

设置

.env

1
2
3
BROADCAST_DRIVER=pusher
WEBSOCKET_APPID=your_ID
WEBSOCKET_KEY=your_key

config/broadcasting.php

1
2
3
4
5
6
7
8
9
10
11
'pusher' => [
	'driver' => 'pusher',
	'key' => env('WEBSOCKET_KEY'),
	'app_id' => env('WEBSOCKET_APPID'),
	'secret' => null,
	'options' => [
		'host' => 'localhost',
		'port' => 6001,
		'scheme' => 'http'
	],
],

启动echo-server

laravel-echo-server

官方写的非常清楚了。

注意：非本地使用的情况下建议开启https

1
2
3
laravel-echo-server init
laravel-echo-server client:add APP_ID
laravel-echo-server start

到这里,laravel有可以使用php向频道中推送信息了。

vue前端设置

bootstrap.js中进行设置

注意地址的对应。如果需要laravel-echo-server完全可以拆分为独立服务器。也可以使用docker包。

1
2
3
4
5
6
7
8
9
10
import Echo from "laravel-echo"

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

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://localhost:6001',
    key: 'your_key',
    // forceTLS: true
});

使用echo

在laravel中

新建一个事件，laravel中的推送要使用的到队列。

类要implements ShouldBroadcast

__construct的消息为要推送信息。

broadcastOn()用来指定频道。

broadcastAs()用来指定频道名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php

namespace KThree\Test\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 TestWebSocket implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        // return new PrivateChannel('test');
        return ['your_channel'];
    }

    public function broadcastAs()
    {
        return 'your_broadcast_name';
    }
}

在vue组件中

注意listen名字前的.

1
2
3
4
var channel = Echo.channel('your_channel');
channel.listen('.your_broadcast_name', function(data) {
	alert(JSON.stringify(data));
});