广播消息
8

简介配置 redis + socket 配置广播消息。

后端

  • 安装 predis/predis composer require predis/predis
  • 去掉 config/app 中的注释;
    App\Providers\BroadcastServiceProvider::class
  • 设置 .env
    BROADCAST_DRIVER=redis
  • 创建发送公共消息事件 app/Events/MessageSend.php
    class MessageSend implements ShouldBroadcast
    {
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $message;
    public function __construct($message)
    {
        $this->message = $message;
    }
    public function broadcastAs()
    {
        return 'message.send';
    }
    public function broadcastOn()
    {
        return new Channel('message.send');
    }
    }
  • 创建发送私人消息事件;
    class PrivateMessageSend implements ShouldBroadcast
    {
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $toUserId;
    public $message;
    public function __construct($toUserId, $message)
    {
        $this->toUserId = $toUserId;
        $this->message = $message;
    }
    public function broadcastAs()
    {
        return 'private.message.send';
    }
    public function broadcastOn()
    {
        return new PrivateChannel('private.message.send.' . $this->toUserId);
    }
    }
    // routes/channels.php
    Broadcast::channel('private.message.send.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
    });
  • 创建 command 来测试;

    class SendMessage extends Command
    {
    protected $signature = 'message:send {user=0}';
    protected $description = 'Command description';
    public function __construct()
    {
        parent::__construct();
    }
    public function handle()
    {
        $userId = intval($this->argument('user'));
        $message = "hello";
        if($userId > 0) {
            event(new PrivateMessageSend($userId, $message)); // 触发事件
        } else {
            event(new MessageSend($message)); // 触发事件
        }
    
        $this->info('发送消息 : ' . json_encode($message) );
    }
    }

前端

  • 安装 redis 详见
  • 安装 laravel-echo-server npm install -g laravel-echo-server
    • 在主目录中执行 laravel-echo-server init 创建配置文件
      {
      "authHost": "http://localhost",
      "authEndpoint": "/broadcasting/auth",
      "clients": [],
      "database": "redis",
      "databaseConfig": {
      "redis": {},
      "sqlite": {
          "databasePath": "/database/laravel-echo-server.sqlite"
      }
      },
      "devMode": false,
      "host": null,
      "port": "6001",
      "protocol": "http",
      "socketio": {},
      "sslCertPath": "",
      "sslKeyPath": "",
      "sslCertChainPath": "",
      "sslPassphrase": "",
      "apiOriginAllow": {
      "allowCors": false,
      "allowOrigin": "",
      "allowMethods": "",
      "allowHeaders": ""
      }
      }
  • 安装 Laravel Echo npm install --save laravel-echo
  • 安装 socket.io-client npm install --save socket.io-client
  • 创建 socket 服务
    //src/app/core/socket/socket.service.ts
    import { Inject, Injectable } from '@angular/core';
    import { environment } from '@env/environment';
    import Echo from 'laravel-echo'
    import { DA_SERVICE_TOKEN, TokenService } from '@delon/auth';
    import { LayoutModule } from '../../layout/layout.module';
    import { NzMessageService } from 'ng-zorro-antd';
    import { SettingsService } from '@delon/theme';
    (<any>window).io = require('socket.io-client');
    @Injectable()
    export class SocketService {
    echo: any;
    constructor(
    private settingService :SettingsService,
    @Inject(DA_SERVICE_TOKEN) private tokenService: TokenService) { }
    public init(): void {
    if (!environment.production) {
      console.log(
        `%c SOCKET: 初始化 `,
        `background:blue;color:#fff`,
      );
    }
    // 记得获取新的token后也要更新
    let token = this.tokenService.get().token;
    this.echo = new Echo({
      broadcaster: 'socket.io',
      host: window.location.hostname + ':6001',
      auth: {headers: {Authorization: 'Bearer ' + token}}
    });
    }
    public destroy() :void {
    if(!this.echo) return;
    let userId = this.settingService.user.id;
    this.echo.leave(`message.send`);
    this.echo.leave(`private.message.send.${userId}`);
    this.echo.disconnect();
    }
    }
  • 在 app.module.ts 的 providers 中添加 SocketService
  • 在 startup 初始化最后添加 socket 服务的初始化操作
    this.socketService.init();
  • 在 src/index.html 中添加
    <script type="text/javascript" src="http://localhost:6001/socket.io/socket.io.js"></script>
  • 在 src/polyfills.ts 中添加
    (window as any).global = window;
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

能不能请大佬分享一下案例源码呢,感激不尽!:whale:

1个月前

@Hello-world 所有涉及到的代码都已经附上了。
前端使用的是Angular的一个框架ng-alain,其他代码剔除掉为了便于理解。

1个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!