l-1

PHP笔记

主页/PHP笔记/PHP问答/框架Laravel/在 Laravel 中使用 WebSocket 构建实时应用

在 Laravel 中使用 WebSocket 构建实时应用

Bug编译狮

Bug编译狮

WebSocket 是一种用于在网络应用程序中实现全双工通信的技术。在 Laravel 中使用 WebSocket 可以显著提高用户体验，特别是在需要即时反馈的应用场景中。以下是如何在 Laravel 中使用 WebSocket 的步骤：

1. 安装 Laravel Echo 和 Laravel Broadcast

首先，你需要安装 Laravel Echo 和 Laravel Broadcast。

composer require pusher/pusher-php-server

然后，运行以下命令来创建广播服务和通道：

php artisan make:channel ChatChannel

2. 配置 Pusher

在 .env 文件中配置 Pusher 的凭据：

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=mt1

3. 创建 WebSocket 控制器

创建一个新的控制器来处理 WebSocket 请求：

php artisan make:controller SocketController

4. 编写 WebSocket 方法

在 SocketController 中编写方法来处理连接、消息接收和发送：

namespace AppHttpControllers;

use IlluminateHttpRequest;
use PusherPusher;

class SocketController extends Controller
{
    private $pusher;

    public function __construct()
    {
        $this->pusher = new Pusher(
            env('PUSHER_APP_KEY'),
            env('PUSHER_APP_SECRET'),
            env('PUSHER_APP_CLUSTER')
        );
    }

    public function connect(Request $request)
    {
        $request->connection->joinChannel('chat');
    }

    public function chat(Request $request)
    {
        $message = $request->input('message');

        $this->pusher->broadcast('chat', [
            'message' => $message,
        ]);

        return response()->json([
            'status' => 'success',
        ]);
    }
}

5. 注册路由

在 routes/web.php 文件中注册路由：

Route::get('/ws/socket', 'SocketController@connect')->name('socket.connect');
Route::post('/ws/chat', 'SocketController@chat')->name('socket.chat');

6. 在前端使用 Laravel Echo

在你的前端应用中使用 Laravel Echo 来连接到 WebSocket 并发送消息：

// app.js
import Echo from 'laravel-echo';

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

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
});

echo.channel('chat').listen('chat', (event) => {
    console.log(event.message);
});

示例代码

以下是一个完整的示例代码，展示了如何在 Laravel 中使用 WebSocket：

1. 安装依赖

composer require pusher/pusher-php-server

2. 配置 Pusher

在 .env 文件中配置 Pusher 的凭据：

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=mt1

3. 创建 WebSocket 控制器

php artisan make:controller SocketController

4. 编写 WebSocket 方法

在 SocketController 中编写方法来处理连接、消息接收和发送：

namespace AppHttpControllers;

use IlluminateHttpRequest;
use PusherPusher;

class SocketController extends Controller
{
    private $pusher;

    public function __construct()
    {
        $this->pusher = new Pusher(
            env('PUSHER_APP_KEY'),
            env('PUSHER_APP_SECRET'),
            env('PUSHER_APP_CLUSTER')
        );
    }

    public function connect(Request $request)
    {
        $request->connection->joinChannel('chat');
    }

    public function chat(Request $request)
    {
        $message = $request->input('message');

        $this->pusher->broadcast('chat', [
            'message' => $message,
        ]);

        return response()->json([
            'status' => 'success',
        ]);
    }
}

5. 注册路由

在 routes/web.php 文件中注册路由：

Route::get('/ws/socket', 'SocketController@connect')->name('socket.connect');
Route::post('/ws/chat', 'SocketController@chat')->name('socket.chat');

6. 在前端使用 Laravel Echo

在你的前端应用中使用 Laravel Echo 来连接到 WebSocket 并发送消息：

// app.js
import Echo from 'laravel-echo';

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

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
});

echo.channel('chat').listen('chat', (event) => {
    console.log(event.message);
});

通过以上步骤，你可以在 Laravel 中成功使用 WebSocket 构建实时应用。

黑板Bug讲师

黑板Bug讲师

介绍

实时交互是现代Web应用程序的重要特性。使用Laravel和laravel-websocket包，PHP开发人员可以轻松构建强大的实时应用。本教程将指导您安装、配置和使用laravel-websocket在您的Laravel应用程序中创建实时功能。

设置中

首先，使用 Composer 安装 Laravel-Websocket 包：

composer require beyondcode/laravel-websockets

发布配置文件：

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

配置WebSocket服务器

请修改配置文件 config/websockets.php，以设置您的WebSocket服务器：

'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'enable_client_messages' => true,
        'enable_statistics' => true,
    ],
],

运行WebSocket服务器

启动WebSocket服务器，使用Artisan命令：

php artisan websockets:serve

这将启动服务器，你可以使用前端实现，比如Laravel Echo或JavaScript来连接到它。

与前端集成

以这种方式为例，我们将使用Laravel Echo与Pusher JS：

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

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

现在可以在频道上监听事件：

window.echo.channel('your-channel')
    .listen('.YourEvent', (e) => {
        console.log(e);
    });

创建事件

在Laravel中创建一个自定义事件，该事件实现ShouldBroadcast接口的示例如下：

use IlluminateContractsBroadcastingShouldBroadcast;

class YourEvent implements ShouldBroadcast
{
    public function broadcastOn()
    {
        return new Channel('your-channel');
    }
}

触发此事件，从应用程序逻辑中实现，它将在前端实时显示。

Presence Channels

Laravel WebSocket 支持Presence Channels，可以跟踪用户的在线状态：

window.echo.join('presence-channel')
    .here((users) => {
        // Users that are already present.
    })
    .joining((user) => {
        // User that joins the presence channel.
    })
    .leaving((user) => {
        // User that leaves the presence channel.
    });

处理身份验证

Laravel-WebSocket 允许您通过身份验证私有和存在频道，以确保只有授权用户才能访问它们：

Broadcast::channel('private-channel', function ($user) {
    return (int) $user->id === (int) Auth::id();
});
Broadcast::channel('presence-channel', function ($user) {
    return $user;
});

高级用法：自定义控制器

你可以通过添加自定义的WebSocket控制器来扩展你的WebSocket服务器的功能。

use BeyondCodeLaravelWebSocketsWebSocketsWebSocketHandler;
class CustomWebSocketController extends WebSocketHandler
{
    public function onOpen($connection)
    { }
    public function onClose($connection)
    { }
}

编辑 websockets.php 配置文件以使用自定义控制器：

'handlers' => [
    'default' => MyCustomWebSocketHandler::class,
],

确保WebSocket连接的安全性

为了确保安全连接，请使用SSL。在广播配置中设置您的SSL证书：

'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        // ...
        'ssl' => [
            'local_cert' => env('WEBSOCKETS_SSL_LOCAL_CERT', null),
            'local_pk' => env('WEBSOCKETS_SSL_LOCAL_PK', null),
            'passphrase' => env('WEBSOCKETS_SSL_PASSPHRASE', null),
        ],
        // ...
    ],
],

调试和监控

Laravel-WebSocket 提供了一个仪表板来监控 WebSocket 连接和消息。您可以通过在您的应用 URL 上访问 /laravel-websockets 来访问它，这需要您在 .env 文件中调整了仪表板配置设置。

结论。

按照这个指南，您已经学会了如何使用laravel-websocket包在Laravel应用中集成实时功能。实时应用程序可以为用户提供增强的用户体验，这对您的项目非常有益。开心编码！

长工码奴1523

长工码奴1523

在 Laravel 中构建一个基于 WebSocket 的实时应用可以让你轻松地实现异步通信和数据流处理。WebSocket 是一种轻量级的、全双工的协议，允许客户端与服务器之间进行双向传输。以下是如何使用 Laravel 和 WebSocket 实现简单聊天功能的一个例子：

第一步：安装 Laravel 和 WebSocket

首先确保你的系统上已安装了 Composer。接下来，通过运行以下命令安装 Laravel 以及 WebSocket 支持：

composer require laravel/framework ^8.0

这将安装 Laravel 8.x 版本，并确保你有一个支持 WebSocket 的版本。

第二步：创建 WebSocket 配置文件

在 app/Http/Kernel.php 文件中添加 WebSocket 配置：

protected $middlewareGroups = [
    'web' => ['IlluminateRoutingMiddlewareThrottleRequests'],
];
protected $routeMiddleware = [
    // ...
    'websocket' => LaravelWebsoketLaravelFacadesWebsocket::class,
];

这里的 websocket 关键字告诉 Laravel 使用 WebSockets。

第三步：定义 WebSocket 监听器

创建一个新的控制器来监听 WebSocket 连接并处理消息：

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use IlluminateSupportFacadesHttp;
use IlluminateSupportFacadesEvent;
use AppEventsMessageReceivedEvent;

class ChatController extends Controller
{
    public function __construct()
    {
        event(new MessageReceivedEvent());
    }

    /**
     * Handle incoming WebSocket connections.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function websocket(Request $request)
    {
        $request->session()->put('connection', true);

        return $this->respondToClient($request);
    }

    private function respondToClient(Request $request)
    {
        if ($request->has('message')) {
            $client_id = $request->session()->get('client_id');
            $data = json_decode($request->getContent(), true);

            $response = Http::withHeaders([
                'Content-Type' => 'application/json',
            ])->post(
                config('services.websocket.url'),
                [
                    'method' => 'POST',
                    'headers' => [
                        'Authorization' => 'Bearer ' . config('services.websocket.key'),
                        'Client-ID' => $client_id,
                    ],
                    'json' => $data,
                ]
            );

            if ($response->successful()) {
                return response()->json(['success' => true]);
            } else {
                return response()->json(['error' => 'Failed to send message']);
            }
        }

        return response()->json(['error' => 'Missing required data'], 422);
    }
}

在这个控制器中，我们首先检查是否已经存在 WebSocket 连接。如果存在，我们从会话中获取客户端 ID 并尝试向服务端发送消息。如果没有连接，我们直接返回错误信息。

第四步：测试 WebSocket

为了测试 WebSocket，你可以使用 Postman 或类似的工具。在 Postman 中，你可以模拟一个 WebSocket 请求到服务端：

  1. 将 POST 方法设置为 “GET”。
  2. 在 URL 中加入 /ws/，这是 WebSocket 的 URL。
  3. 添加请求体，其中包含 JSON 数据（例如，用户名）。
  4. 发送请求。

第五步：部署和部署

在 Laravel 项目中配置 WebSocket 后，你需要将其集成到实际的应用程序中。你可以选择在生产环境中使用 Nginx 或者其他负载均衡器。然后，通过修改配置文件来启用 WebSocket 功能。

以上就是如何在 Laravel 中使用 WebSocket 建立实时应用的基本指导。这个例子展示了如何构建简单的聊天应用，但你可以根据需要扩展其功能，比如用户认证、加密等。

最新更新