laravel-echo前端使用指北

最近有个扫码登录的业务需求,记录一下laravel-echo使用心得,如有错误,轻喷。

环境说明

  • 前端laravel-echo、pusher-js
  • 后端laravel-websockets

laravel 文档代码

import Echo from "laravel-echo";

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-channels-key'
});

这里把Pusher和Echo都暴露到window全局环境,个人很不喜欢,所以进行改造了一下

改造后的代码

新建文件laravel-echo.js

import Echo from 'laravel-echo'
import Pusher from "pusher-js"

/**
 * pusher配置
 */

const pusherConfig = {
    forceTLS: document.location.protocol === 'https:' ? true : false,
    wsHost: window.location.hostname,
    wssHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    auth: {
        headers: {}
    },
    disableStats: true
}

class LaravelEcho {
    static instance = null

    constructor() {
        this.instance = new Echo({
            client: new Pusher('saas', pusherConfig),
            broadcaster: 'pusher'
        })
    }

    setToken(token) {
        this.instance.options.client.config.auth.headers.Authorization = `Bearer ${token}`
    }

    removeToken() {
        this.instance.options.client.config.auth.headers = {}
    }
}

export default new LaravelEcho()

使用范例

import LaravelEcho from '@/helpers/laravel-echo'

// 订阅扫码登录事件
LaravelEcho.instance.channel('auth').listen(`ScanQRCodeLoginEvent.${response.data.uuid}`, (e) => {
                    console.log(e)
                })
本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

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