一起来实现单用户登录 —— 消息推送

一起来实现单用户登录 —— 消息推送

发送实时消息

接下来我们来实现当某个用户的账号在其他地方登录时,发送一个实时消息给当前的登录用户,告诉他的账号在其他设备登录了。
后端组件: laravel-websocketspusher

我们开始吧!


先来完成后端的功能,打开 .env 文件

PUSHER_APP_ID=123123
PUSHER_APP_KEY=321321
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1

这些是 pusher 的配置,随意填写,只需要保证和前端的 laravel-echo 一致即可。如果一台服务器上有多个站点,需要保证 id 和 key 的唯一性。


安装组件

laravel-websocets 依赖 guzzlehttp/psr7 组件的 1.5 版本,但是它的最新版本已经到 2.1,而 guzzlehttp 也依赖它,并且要求最低是 1.8 两者相冲突了,所以不能直接使用 composer require 命令安装。
同样,pusher 也需要使用 3.0 版本。

打开 composer.json

"require": {
        ...
        "guzzlehttp/psr7": "^1.5",
        "beyondcode/laravel-websockets": "^1.12.0",
        "pusher/pusher-php-server": "~3.0"
    },

我们直接把这两个组件粘贴进去,然后执行命令:

composer update

发布 laravel-websockets

php artisan vendor:publish 

在列表里选择 BeyondCode\LaravelWebSockets\WebSocketsServiceProvider 对应的序号。

一起来实现单用户登录3

Laravel 框架的消息推送功能默认使用的是 pusher 第三方 API 服务,我们使用 laravel-websocket 来拦截 pusher 发出的请求,转发到我们自己的服务器。


配置 websocket

关于 websockets 的配置,可以在 config/websockets.php 里找到
官方文档:点击这里
你只需要知道它在哪里即可,我们没有需要定制的配置。

然后打开 config/broadcasting.php,修改 pusher 发送的请求地址为我们本地 ip 地址。

'connections' => [ 
        'pusher' => [
            ...
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],

好了,组件安装完成,执行命令启动 websocket 服务

php artisan websockets:serve

打开 your-project/laravel-websockets 可以看到控制台,点击 Connect 可以看到所有的发送消息明细。

一起来实现单用户登录3

推送消息

我们来创建一个事件,在每次用户登录成功后触发,执行命令:

php artisan make:event UserAuthenticatedEvent

还记得上一节提到的 authenticated 方法吗?我们在这个方法里面来触发事件:

public function authenticated(Request $request, $user)
{
    DB::table('sessions')->where('user_id', $user->id)
    ->update([
        'id' => DB::raw("concat('OUTMAN_', user_id, '_', id)"),
        'user_id' => null
    ]);
    // 触发广播事件,发送一个消息给之前的登录用户
    broadcast(new UserAuthenticatedEvent($user))->toOthers();
}

既然是广播事件,那就需要实现广播的接口,打开 UserAuthenticatedEvent.php

<?php

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets; 
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

  public $user;

  public function __construct(User $user)
  {  
      $this->user = $user;
  } 

  public function broadcastOn()
  { 
      // 发送频道拼接 user_id,避免干扰
    return new Channel('outman-user-'. $this->user->id);
  }
}

再回到首页开 A,B 窗口登录,然后查看 storage/logs/laravel.log

[2021-12-13 13:34:43] local.INFO: Broadcasting [App\Events\UserAuthenticatedEvent] on channels [outman-user-1] with payload:
{
    "user": {
        "id": 1,
        "name": "ricky",
        "email": "ricky@me.com",
        "email_verified_at": null,
        "created_at": "2021-12-12T14:03:00.000000Z",
        "updated_at": "2021-12-12T14:03:00.000000Z"
    },
    "socket": null
}

消息已经发出了,因为我们现在的 BROADCAST_DRIVER 还是 log,所以打印到了日志中。

下一节我们来完成前端实时显示通知。

本作品采用《CC 协议》,转载必须注明作者和本文链接
悲观者永远正确,乐观者永远前行。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 7

laravel-echo-server 不错的

2年前 评论

QUEUE_CONNECTION为同步方式时,如果websocket服务挂掉修改,页面会报错.

修改QUEUE_CONNECTION 为 redis 后,当前登录用户也会收到退出登录的提示.

如何避免这种情况?

2年前 评论

一直报 Failed to connect to Pusher. 走的也是http 不知道哪里配置错了

1年前 评论
MArtian (楼主) 1年前
Smilephp (作者) 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!