标签归档：vue

laravel-websockets使用教程

后端

1、安装扩展

composer require beyondcode/laravel-websockets

发布迁移

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate

发布配置

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

配置 .env

PUSHER_APP_ID=
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

2、确保 config/app.php 文件，providers 配置中没有注释依赖项。如果有不能解释的报错，可以确认一下。

3、创建事件

php artisan make:event DemoEvent

修改类 App\Events\DemoEvent ，注意添加实现 ShouldBroadcast 。

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class DemoEvent implements ShouldBroadcast # 添加实现类
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public string $message;

    // 使用成员变量，前端 listen 事件名为 `DemoEvent`
    // public $broadcastAs = 'DemoEvent';

    public function __construct()
    {
        $this->message = 'Hello friend';
    }

    // 使用成员方法，前端 listen 事件名为 `.DemoEvent`
    public function broadcastAs() {
        return 'DemoEvent';
    }

    public function broadcastOn()
    {
        // PrivateChannel 需要登录，改为 Channel
        // channel 名称本文改为 public
        return new Channel('public');
    }
}

如果不指定 broadcastAs，默认事件名为类名，即： App\Events\DemoEvent

4、运行服务

php81 artisan websockets:serve

5、调用/下发事件

# 以下都行
DemoEvent::dispatch();
broadcast(new DemoEvent())->toOthers();
broadcast(new DemoEvent());
event(new DemoEvent());

6、DASHBOARD

访问 /laravel-websockets 可以打开 dashboard 和调试，地址可以在 config/websockets.php 中配置

前端

1、以 vue 为例，安装扩展

npm i -D laravel-echo pusher-js

2、添加 laravel-echo.js 文件

import Echo from "laravel-echo";
import Pusher from "pusher-js";
window.Pusher = Pusher;

window.Echo = new Echo({
  broadcaster: "pusher",
  key: "your-pusher-key",
  wsHost: window.location.hostname,
  wsPort: 6001,
  forceTLS: false,
  disableStats: true,
  cluster: "mt1",
});

在 main.js 中引入

import "./laravel-echo";

3、在合适的位置订阅消息

window.Echo.channel("public").listen(".DemoEvent", (e) => {
  console.log(e.message);
});

此处 DemoEvent 为事件名，在后端可以通过 broadcastAs 来指定：

  1. 如果没有指定，默认为类名： App\\Events\\DemoEvent
  2. 如果使用成员变量：DemoEvent
  3. 如果使用成员方法：.DemoEvent
继续阅读 →

使用 vuex 的 mapState

在 vue 中：

<template>
  <div>
    {{user.name}}
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  computed: {
    ...mapState({
      user: state => state.user
    })
  }
}
</script>

在 store 中：

export default {
    state: {
        user: {}
    },
}

继续阅读 →

Vue 中统一处理 ajax 请求错误

通常说, ajax 请求错误有两种, 一种是网络问题或者代码问题所造成的 400, 500错误等, 另外一种是请求参数后端通不过验证, 由后端抛出的错误

第二种根据不同的后端框架或者程序猿又可以分成两种, 一种是直接返回 json, 用一个 特别的 code 来区别正常请求返回的数据, 如:

{
  code: -404,
  message: '这是错误信息',
  data: '',
}

还有一种就是抛出 http 404 之类的, 然后把错误原因放在 header 里.

在组件写调用 ajax时, 通常都是这么写(这里以 axios 为例):

import axios from 'axios'
axios.get('/user?ID=12345')
  .then(function (response) {
    if (response.data.code === 200) {
        console.log(response.data)
    } else {
        // 由后端抛出的错误
        alert(response.data.message)
    }
  }).catch(function (error) {
       // 由网络或者服务器抛出的错误
     alert(error.toString())
  })

继续阅读 →