Laravel Reverb 和 Vue 3 + TypeScript : 为您的应用添加实时功能

在许多现代网络应用中，WebSockets 用于实现实时、动态更新的用户界面。当服务器上的某些数据更新时，通常通过 WebSocket 连接发送一条信息由客户端处理。WebSockets 为不断地轮询应用程序服务器以反映在 UI 中数据更改提供了更有效率的替代方案。

在您的 Laravel 11 项目中添加 WebSocket、Vue3 和 TypeScript，您将构建一个强大的应用程序。现在让我们通过安装过程来了解这一点。

1. 安装 Laravel 11

首先，您需要通过键入 : laravel new example-app 来安装 Laravel 11 项目。有关安装过程的更多信息，请访问 Laravel 网站

完成 Laravel 11 项目的安装后，您可以使用 install:broadcasting 艺术家命令在幕后 install Reverb。install:broadcasting 艺术家命令将运行 reverb:install 命令，该命令将使用合理的默认配置选项安装 Reverb；更多详细信息请查阅 Laravel 文档

2. 安装 Vue 3

为了在你的 Laravel 11 项目中设置 Vue 3，你需要通过输入以下命令来安装此插件 @vitejs/plugin-vue： npm install --save-dev @vitejs/plugin-vue

然后，你可以在你的 vite.config.js 配置文件中包含此插件。当你使用 Laravel 与 Vue 插件一起使用时，你可能需要一些额外的选项。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.ts'],
            refresh: true,
        }),
        vue(),
        
    ],
});

确保将你的 app.js 更名为 app.ts，因为我们将会使用 TypeScript 。然后输入此命令安装 vue 3： npm install vue@latest

3. 向客户端应用添加 Websockets

Laravel Echo 是一个 JavaScript 库，它使得订阅通道和监听由你的服务器端广播驱动程序广播的事件变得容易。你可以通过 NPM 包管理器安装 Echo。在这个例子中，我们还将安装 pusher-js 包，因为 Reverb 使用 Pusher 协议进行 WebSocket 订阅、通道和消息。

npm install --save-dev laravel-echo pusher-js

一旦 Echo 被安装，你就可以在你的应用 JavaScript 中创建新的 Echo 实例。你将在 echo.js 中看到这个。


import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

4. 安装 TypeScript

首先，将 TypeScript 编译器安装到你的项目中。

npm add -D typescript
# or
yarn add -D typescript

TypeScript 配置

下一步是配置编译器。TypeScript 需要一个配置文件 tsconfig.json，位于你的项目根目录。

一个目录中存在 tsconfig.json 文件表明该目录是 TypeScript 项目的根目录。该 tsconfig.json 文件指定了项目的根文件和编译器选项，这些选项是编译项目所需的。

首先在你的 Laravel 11 项目的根目录创建一个 tsconfig.json 并将这些配置复制到你的 tsconfig.json 文件中。

{
  "compilerOptions": {
      "allowJs": true,
      "module": "ESNext",
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "moduleResolution": "Node",
      "target": "esnext",
      "jsx": "preserve",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "isolatedModules": true,
      "types": ["vite/client"]
  },
  "exclude": ["node_modules", "public"],
  "include": [
      "resources/js/**/*.ts",
      "resources/js/**/*.d.ts",
      "resources/js/**/*.vue",
      "resources/js/app.ts",
  ],

}

之后，我们需要安装 vue-tsc，它是对 tsc 的包装。请查看Vue 文档

npm i vue-tsc

一旦完成安装，修改你的 package.json 中的脚本部分

 "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build"
    },

5 在 app.ts 中创建 Vue 实例

首先，进入 ressources/js

app.ts

import './bootstrap';

import {createApp} from 'vue'
import App from './App.vue'

createApp(App)
.mount("#app")

将以下模板代码放入你的 App.vue 文件中

<script lang="ts" setup>
import {ref,onMounted} from "vue"

const count=ref<number>(0);

function setupEvent(){
        window.Echo.channel('testChannel')
        .listen('testingEvent', (e:any) => {
          console.log(e)
          // hello world in console 
        })
  }
  
onMounted(()=>{
  setupEvent()
})
</script>
<template>
  <div class="container">
  <h1>{{count}}</h1>
<button @click="count++">increment</button>
  <!-- <RouterView/> -->
  </div>
</template>

在 ressources/js 中创建一个名为 types 的文件夹，然后创建一个 global.d.ts 文件并将以下代码复制到其中。这段代码将使 Laravel Echo 对 Window 对象接口可用。

interface Window {
    Echo:any;
}

修改 welcome.blade.php 文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
      <div id="app"></div>

          @vite([ 'resources/js/app.ts','resources/css/app.css'])
 <!-- the vite blade directive load script -->
    </body>
</html>

为了从 Laravel 中广播事件，我们首先需要创建一个事件，输入：

php artisan make:event 测试事件

在 testingEvent.php 文件中

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

    public $message;
    public function __construct($message)
    {
        $this->message = $message;
    }
    public function broadcastWith(): array
    {
        return [
            'message' => $this->message,
        ];
    }
    public function broadcastOn(): array
    {
        return [
            new Channel('testChannel'),
        ];
    }
}

在 web.php 文件中导入此事件

<?php
use App\Events\testingEvent;
use Illuminate\Support\Facades\Route;

Route::get('/', function() {
   testingEvent::dispatch("hello world");
    return view('welcome');
});

你已经完成了；运行这些命令。

Laravel 服务器