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)
                })