https://github.com/sparkinzy/dcat-websocket

为Dcat Admin 五步集成websocket功能
https://github.com/sparkinzy/dcat-websocket

Last synced: 9 days ago
JSON representation

为Dcat Admin 五步集成websocket功能

• Host: GitHub
• URL: https://github.com/sparkinzy/dcat-websocket
• Owner: Sparkinzy
• Created: 2021-11-25T03:46:09.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-17T02:11:35.000Z (over 1 year ago)
• Last Synced: 2024-10-30T10:03:55.775Z (19 days ago)
• Language: JavaScript
• Homepage:
• Size: 55.7 KB
• Stars: 10
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dcat Admin Extension

## 1.安装依赖包

```bash

# 依赖以下扩展包

composer require pusher/pusher-php-server "~4.0"

composer require beyondcode/laravel-websockets

# 发布相关文件 如 config/websockets.php

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

```

## 2.添加配置 .env

```.dotenv

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=sparkinzy

PUSHER_APP_KEY=sparkinzy

PUSHER_APP_SECRET=sparkinzy

LARAVEL_WEBSOCKETS_PORT=2022

```

## 3.修改配置

首先要把 config/app.php 中的 App\Providers\BroadcastServiceProvider::class 注释打开

且 注释 App\Providers\BroadcastServiceProvider::class 中的 Broadcast::routes();

```PHP

class BroadcastServiceProvider extends ServiceProvider

{

    /**

     * Bootstrap any application services.

     *

     * @return void

     */

    public function boot()

    {

//        Broadcast::routes();

        require base_path('routes/channels.php');

    }

}

```

## 4.添加私有渠道授权(公共渠道可忽略此步骤)

在 routes/channels.php 中加入我们最开始，在前端 JS 中写的监听频道：

```php

Broadcast::channel('room', function () {

    return true;

});

```

### 5.广播配置

在 config/broadcasting.php 中的 connections.pusher 下加入两个配置信息：

```php

'connections' => [

    'pusher' => [

        'driver' => 'pusher',

            'key' => env('PUSHER_APP_KEY'),

            'secret' => env('PUSHER_APP_SECRET'),

            'app_id' => env('PUSHER_APP_ID'),

            'options' => [

                'cluster' => env('PUSHER_APP_CLUSTER'),

                'useTLS' => true,

                // 拦截 pusher 的广播后，转发到目标 ip

                'host' => '127.0.0.1',

                // 转发的端口，就是我们之前在 .env 文件中配置的 2022 端口

                'port' => env('LARAVEL_WEBSOCKETS_PORT', 2022),

            ],

    ];

];

```

## 6.启动socket监听

```bash

php artisan websockets:serve --port=2022

```

## Admin/bootstrap.php 启用

```php

$user_id = Admin::user()->id ?? 0;

Admin::script(<<{

      console.log(e)

  })

JS

);

```

## 前端向后端发送消息

```js

// 这里新增一个向服务端发送消息的方法

// 第一个参数是事件名，这个可以随意写，不需要与 Laravel 中做对应

// 第二个参数是具体数据，这个就更随意了

DcatEcho.connector.pusher.send_event('hi_girl', {

    my_name: 'LiamHao',

    my_height: 180,

});

```