Laravel WebSockets 教程 - TypeScript

Laravel WebSockets 是一个基于 Ratchet 库的 WebSockets 服务器，该库提供了一个基于事件的接口来处理 WebSocket 连接。在本教程中，我们将使用 TypeScript 和 Laravel WebSockets 来创建一个实时聊天应用程序。

环境要求

• PHP >= 7.2
• Composer
• Node.js >= 10.0
• NPM
• Laravel

准备工作

首先，我们需要在 Laravel 项目中安装 Laravel WebSockets。在项目根目录下执行以下命令：

composer require beyondcode/laravel-websockets

然后，发布 WebSockets 的配置文件和迁移文件：

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

接下来，我们需要安装 laravel-echo 和 pusher-js 依赖：

npm install --save laravel-echo pusher-js

然后，我们需要创建 .env 文件，配置以下内容：

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret

替换 PUSHER_APP_ID、PUSHER_APP_KEY 和 PUSHER_APP_SECRET 为你的 Pusher 应用程序 ID、密钥和秘钥。

最后，让我们修改 config/broadcasting.php 文件中的 options：

'options' => [
    'cluster' => env('PUSHER_APP_CLUSTER'),
    'encrypted' => true,
    'useTLS' => true,
],

创建实时聊天应用程序

我们将使用 Vue.js 和 Laravel 来创建我们的实时聊天应用程序。

首先，我们需要创建一个简单的 Vue 组件来显示聊天消息：

<template>
  <ul>
    <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
  </ul>
</template>

<script>
import Echo from 'laravel-echo'

export default {
  data () {
    return {
      messages: []
    }
  },
  created () {
    this.listenForMessages()
  },
  methods: {
    listenForMessages () {
      window.Echo.channel('chat').listen('MessageSent', (event) => {
        this.messages.push(event.message.message)
      })
    }
  }
}
</script>

在上面的代码中，我们使用 laravel-echo 库来监听聊天事件，当有消息发送时，我们将新消息添加到 messages 数组中。

现在，我们需要创建一个 Laravel 控制器来处理聊天消息：

namespace App\Http\Controllers;

use App\Events\MessageSent;
use Illuminate\Http\Request;

class ChatController extends Controller
{
    public function index()
    {
        return view('chat');
    }

    public function sendMessage(Request $request)
    {
        $message = auth()->user()->messages()->create([
            'message' => $request->input('message')
        ]);

        broadcast(new MessageSent($message))->toOthers();

        return ['status' => 'Message Sent!'];
    }
}

在上述代码中，我们创建了一个 ChatController 控制器。 index 方法返回聊天视图， sendMessage 方法接收消息并广播到所有连接。

我们还需要创建一个 Laravel 事件，该事件将触发广播消息：

namespace App\Events;

use App\Models\Message;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageSent implements ShouldBroadcast
{
    use InteractsWithSockets;

    public $message;

    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

在上述代码中，我们创建了名为 MessageSent 的事件，该事件将广播名为 chat 的私有频道。

最后，我们需要将上述组件和控制器与路由关联：

use Illuminate\Support\Facades\Route;

Route::get('/', 'ChatController@index');
Route::post('sendMessage', 'ChatController@sendMessage');

现在，我们完成了创建实时聊天应用程序的所有准备工作。接下来，我们需要运行 WebSockets 服务器来提供 WebSocket 连接支持。

运行 WebSockets 服务器

我们可以通过运行以下命令来启动 WebSockets 服务器：

php artisan websockets:serve

现在，我们运行了 WebSockets 服务器，现在我们可以返回前端应用程序并与 WebSockets 服务器建立连接：

import Echo from 'laravel-echo'

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

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
  cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  encrypted: true,
  authEndpoint: '/broadcasting/auth',
  auth: {
    headers: {
      Authorization: 'Bearer ' + TokenService.getToken()
    }
  }
})

现在，我们已经在前端应用程序中建立了与 WebSockets 服务器的连接，我们可以发送聊天消息并在实时聊天组件中看到新消息。

结束语

在本教程中，我们学习了如何使用 TypeScript 和 Laravel WebSockets 创建实时聊天应用程序。我们还学会了如何设置 Laravel WebSockets 并与前端应用程序建立实时连接。但是，请注意，此处只提供了一个基础的聊天应用程序，您可以根据需要对其进行拓展和改进。