廣播訊息

renfan發表於2018-08-10

簡介配置 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;
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章