laravel结合WebSocket 实时推送消息详细实例

Laravel 是一款流行的 PHP 框架，它提供了易于使用、优雅的语法以及许多功能，这使得它成为构建现代 Web 应用程序的理想选择之一。除了传统的 HTTP 请求/响应模式，Laravel 还支持 WebSockets，这使得实时推送消息成为可能。在本文中，我们将探索 Laravel 和 WebSockets 如何结合使用，以实现实时消息推送的目标。

WebSocket 概述

WebSocket 是一种全双工协议，用于在 Web 应用程序和服务器之间建立持久连接。通过 WebSocket，浏览器可以与服务器进行实时通信，而无需不断发出新的 HTTP 请求。这使得开发者可以构建具有实时交互功能的 Web 应用程序，如聊天应用程序、即时游戏等。

与 HTTP 相比，WebSocket 允许服务器主动向客户端推送消息。这意味着客户端可以在服务器有新消息时立即接收到消息，而无需等待 HTTP 响应。

Laravel WebSockets

Laravel WebSockets 是 Laravel 社区开发的一款 WebSocket 实现，它提供了易于使用、高度可扩展的实时消息推送解决方案。Laravel WebSockets 是一个基于 Ratchet 和 Predis 的库，它可以在 Laravel 中轻松集成 WebSocket 服务器。Laravel WebSockets 还支持广泛的功能，如频道订阅、人数限制、私有频道、封禁 IP 等。

实现步骤

要使用 Laravel WebSockets 实现实时消息推送，您需要完成以下步骤：

1. 安装 Laravel WebSockets
2. 配置 Laravel WebSockets
3. 创建 WebSocket 事件
4. 发送 WebSocket 事件
5. 监听 WebSocket 事件

在本教程中，我们将使用以下技术：

• Laravel 7.0
• Laravel WebSockets 1.9.0
• Vue.js 2.6.11

安装 Laravel WebSockets

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

composer require beyondcode/laravel-websockets

安装完成后，运行以下命令来发布 Laravel WebSockets 的配置文件和资源：

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

然后，运行迁移以创建数据库表：

php artisan migrate

最后，启动 Laravel WebSockets 服务器：

php artisan websockets:serve

现在，您已经成功安装了 Laravel WebSockets，可以开始配置和使用它。

配置 Laravel WebSockets

接下来，我们需要配置 Laravel WebSockets。在 config 目录下打开 broadcasting.php 文件，并找到 connections 数组。在该数组中添加以下内容：

'ws' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => null,
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => true,
        'host' => env('WEBSOCKETS_HOST', '127.0.0.1'),
        'port' => env('WEBSOCKETS_PORT', '6001'),
        'scheme' => env('WEBSOCKETS_SCHEME', 'https'),
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ],
    ],
],

这将启用 Laravel WebSockets 驱动程序，它将与 Pusher 相似。我们需要为 key 和 app_id 配置项提供值，这些值可以在 Pusher 账户中找到。我们还需要提供 host、port、scheme 等选项，以便与 WebSocket 服务器通信。

接下来，在 .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_CLUSTER=your-pusher-app-cluster
WEBSOCKETS_SSL_LOCAL_CERT=null
WEBSOCKETS_SSL_LOCAL_PK=null
WEBSOCKETS_PORT=6001
WEBSOCKETS_HOST=127.0.0.1
WEBSOCKETS_PATH=your-websockets-path

上述配置中，您需要替换 PUSHER_APP_ID、PUSHER_APP_KEY、PUSHER_APP_SECRET、PUSHER_APP_CLUSTER 等值为您的 Pusher 应用程序的信息。

创建 WebSocket 事件

然后，我们需要创建一个 WebSocket 事件，以在需要的时候通过 WebSocket 推送消息。在 Laravel 中，您可以使用 Laravel Echo 来与 WebSocket 通信。Laravel Echo 是一个 JavaScript 库，它提供了向 Pusher、Socket.io 和其他 WebSocket 服务器发送和接收消息的功能。

首先，在 Laravel 中创建一个 WebSocket 事件。使用以下 Artisan 命令创建一个新的事件：

php artisan make:event NewMessage

然后，打开 app/Events/NewMessage.php 文件，添加以下代码：

<?php

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewMessage implements ShouldBroadcast
{
    /**
     * The information about the message.
     *
     * @var string
     */
    public $message;

    /**
     * Create a new event instance.
     *
     * @param  string  $message
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should be broadcast on.
     *
     * @return \Illuminate\Broadcasting\PrivateChannel
     */
    public function broadcastOn()
    {
        return new PrivateChannel('chat-room');
    }
}

在上述代码中，我们创建了一个名为 NewMessage 的事件类，并在构造函数中设置了消息。我们还实现了 ShouldBroadcast 接口，这是 Laravel 事件的标准接口之一。在 broadcastOn 方法中，我们返回了一个私有频道 chat-room。这意味着只有那些订阅了 chat-room 频道的客户端才能收到该事件。

发送 WebSocket 事件

现在，我们已经创建了一个 WebSocket 事件，接下来是发送该事件。我们将在 Laravel 控制器中发送这个事件。使用以下命令创建一个新的控制器：

php artisan make:controller ChatController

然后，在 app/Http/Controllers/ChatController.php 文件中添加以下代码：

<?php

namespace App\Http\Controllers;

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

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = $request->input('message');

        event(new NewMessage($message));

        return response()->json([
            'success' => true,
            'message' => $message,
        ]);
    }
}

在上述代码中，我们创建了一个名为 ChatController 的控制器，并在 sendMessage 方法中接收了一个消息。然后，我们使用 new NewMessage($message) 发送了一个 WebSocket 事件。最后，我们返回了一个 JSON 响应，包含消息和成功标记。

监听 WebSocket 事件

我们已经创建了 WebSocket 事件并发送了它，现在是时候在客户端上监听该事件了。我们将使用 Vue.js 来监听该事件。

首先，创建一个 Vue.js 组件，并添加以下代码：

<template>
    <div>
        <input type="text" v-model="message" placeholder="Type your message...">
        <button @click="sendMessage">Send</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: '',
            }
        },
        methods: {
            sendMessage() {
                axios.post('/send-message', {
                    message: this.message,
                }).then(response => {
                    console.log(response.data);
                });
            }
        },
        created() {
            Echo.private(`chat-room`)