Modulus と Laravel 5 を使用したリアルタイムチャットアプリケーションの構築-PHPチュートリアル-php.cn

このチュートリアルでは、Laravel 5、PostgreSQL、および Pusher を使用してリアルタイムチャットアプリケーションを実装する方法を説明します。次に、このアプリケーションを一緒に Modulus にデプロイします。

バックエンドサービスとして Laravel 5、単純なフロントエンドアプリケーションとして HTML5 と jQuery、データベースとして PostgreSQL、サーバーとクライアント間のリアルタイム通信に Pusher を使用します。全体的なアーキテクチャは次のようになります:

使用Modulus和Laravel 5构建实时聊天应用程序

シーン

ユーザーはブラウザでチャットアプリケーションを開き、ニックネームを入力してチャットを続行します。
ユーザーはテキストを入力し、「送信」ボタンをクリックします。
メッセージは、Laravel 5 で書かれたサービスによって処理され、データベースに保存されます。
保持されたメッセージは、新しいメッセージイベントをトリガーして、接続されているクライアントにメッセージをブロードキャストするためにプッシャーに送信されます。
クライアントは新しいメッセージを取得し、接続されているすべてのクライアントのチャットメッセージリストが更新されます。

これは非常に単純なアプリケーションですが、このシナリオでは非常に役立つトピックを取り上げます。

環境の準備

Laravelプロジェクト設定

まず、アプリケーション用のチャットサービスを作成できるように、Laravel をインストールしましょう。 Composer を使用して、Laravel と関連パッケージを簡単にインストールします。 Composer のインストールの詳細については、Composer Web サイトにアクセスしてください。 Composer をインストールした後、コマンドラインプロンプトを開き、次のコマンドを実行して Laravel 5 をインストールします。

composer にはグローバルに「laravel/installer=~1.1」が必要です

次の出力が表示されます:

使用Modulus和Laravel 5构建实时聊天应用程序

Laravel プロジェクトを生成する準備ができました。次のコードを実行して、チャットアプリケーションのプロジェクト構造を生成します。

laravel新しいリアルタイムチャットLaravel

これにより定型的な Laravel プロジェクトが生成され、次のフォルダー構造が表示されます:

使用Modulus和Laravel 5构建实时聊天应用程序

データベース

私たちのアプリケーションはデータベース (PostgreSQL) と対話します。このプロジェクトでは、PostgreSQL をサービスとして提供する会社である ElephantSQL を使用します。 Laravel では、SQLite、MySQL、PostgreSQL、SQL Server など、いくつかの種類のデータベースを使用できます。 PostgreSQL を選択したのは、プロジェクトを Modulus にデプロイする場合、上記のデータベースタイプのような内部データベースを使用できないためです。私はそれをサービスとして提供するデータベースを使用することを好みます。 ElephantSQL では、無料プランで PostgreSQL の優れた機能の一部を試すことができます。

ニーズに合わせて ElephantSQL から無料プランを入手できます。アカウントとデータベースの作成が完了すると、

ホスト名、データベース名、ユーザー名、パスワードなどのデータベース情報がわかります。 この情報は、Laravel でのデータベース構成で使用するために注意してください。 ＃＃＃プロモーター＃＃＃

同社は、リアルタイム通信のためのイベントをトリガーするサービスを提供しています。 Pusher Web サイトにアクセスして入手できます。アカウントとアプリケーションが正常に作成されると、

アプリケーション ID

、

アプリケーションキー、アプリケーションキーなどの資格情報を取得できるようになります。それらの使用法については次のセクションで説明します。 Nginx

Modulus で PHP アプリケーションを実行するには、アプリケーションを提供するように Web サーバーを構成する必要があります。次の Nginx 構成を使用します:

リーリー

開発を継続するために必要な環境設定が完了しました。デザイン部分に入ってみましょう。

ゼロからのプロジェクト設計

＃＃＃モデル＃＃＃

以前に ORM フレームワークを使用したことがある場合は、このトピックに精通しているでしょう。 Laravel プロジェクトでは、ドメインモデルはデフォルトで

app/

フォルダーに配置されます。このアプリケーションでは、メッセージに対して CRUD 操作を実行します。つまり、

Message

モデルを作成する必要があります。

モデルを作成したい場合は、Laravel コアパッケージ Illuminate\Database\Eloquent の抽象クラスである Model

クラスを拡張するクラスを作成するだけです。

app/ フォルダーの下に Message.phpという名前のファイルを作成し、そのファイルに次の内容を記述します。リーリーこのモデルを使用すると、データベース関連の操作を簡単に実行できるようになります。たとえば、次のクエリを実行すると: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbal:false;"><?php ..... Message::all(); ... ?> </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>它将为您提供数据库中的所有消息。但是，它如何决定将在结果中获取的表名称？它使用模型类中的 <code class="inline">$table 值。当您创建新消息时，它会直接将您的消息模型保存到 messages 表中。我们将在控制器部分详细介绍模型。

控制器

控制器是定义应用程序行为的地方。如果我们的应用程序中存在 ChatController ，我们将执行一些与消息相关的操作。我们的应用程序将有四个端点：

GET /login：用于渲染登录页面
GET /chat：用于渲染聊天页面
GET /messages：用于列出用户首次打开聊天页面时显示的最后五条消息
POST /messages：用于保存新消息

为了创建控制器，只需在 App\Http\Controllers 下创建一个类，并让该类扩展 Laravel 特定类 Controller ，该类存在于 App\Http\Controllers。当您请求 /login 或 /chat 端点时，它们将在 resources/views 下呈现自己的模板。您可以通过以下操作来做到这一点。

class ChatController extends Controller

{

    public function getLogin()

    {

        return view("login");

    }



    public function getChat()

    {

        return view("chat");

    }



    public function saveMessage()

    {

        if(Request::ajax()) {

            $data = Input::all();

            $message = new Message;

            $message->author = $data["author"];

            $message->message = $data["message"];

            $message->save();



            Pusher::trigger('chat', 'message', ['message' => $message]);

        }



    }



    public function listMessages(Message $message) {

        return response()->json($message->orderBy("created_at", "DESC")->take(5)->get());

    }

}

ログイン後にコピー

第一个和第二个操作将呈现特定页面。第三个操作是保存消息。在此操作中，将检查第一个请求类型。如果是 AJAX 请求，它将获取所有请求正文作为关联数组。该数组用于填充新创建的模型消息。

然后直接对模型执行save()方法保存数据库。每当有新消息保存到数据库时，都会通过触发 message 事件将相同的消息发送到 Pusher。当您触发事件时，所有连接的客户端都会收到通知。为了在 Laravel 项目中使用 Pusher 类，您可以执行以下操作：

需要通过 composer 需要 vinkla/pusher 提供与 Pusher 相关的软件包。
将 Pusher 包添加到 config/app.php 中，即 Vinkla\Pusher\PusherServiceProvider::class。
在控制器中使用 Pusher 类，例如位于控制器类上方的 Vinkla\Pusher\Facades\Pusher;。

您对这些软件包没问题，但是 Pusher 配置怎么样？您需要使用以下命令来发布项目中的供应商：

php artisan vendor:publish

ログイン後にコピー

此命令将创建一个配置文件 config/pusher.php，您需要提供可在 Pusher 仪表板中找到的所需凭据。配置文件如下所示：

'connections' => [



        'main' => [

            'auth_key' => 'auth_key',

            'secret' => 'secret',

            'app_id' => 'app_id',

            'options' => [],

            'host' => null,

            'port' => null,

            'timeout' => null,

        ],



        'alternative' => [

            'auth_key' => 'your-auth-key',

            'secret' => 'your-secret',

            'app_id' => 'your-app-id',

            'options' => [],

            'host' => null,

            'port' => null,

            'timeout' => null,

        ],



    ]

ログイン後にコピー

第四个端点用于列出新加入用户的聊天页面上显示的最后五条消息。神奇的代码是：

public function listMessages(Message $message) {

        return response()->json($message->orderBy("created_at", "DESC")->take(5)->get());

    }

ログイン後にコピー

在此代码中，Message 模型被注入到操作中，或使用 $message 执行数据库相关操作。首先按 created_at 按降序排列消息，然后取最后 5 个。使用 response()->json(...) 以 JSON 格式返回结果。

我们已经提到了控制器和操作，但是当用户访问特定 URL 时这些操作是如何执行的呢？您可以将路由配置添加到文件 app/Http/routes.php。您可以看到下面的示例：

<?php



Route::get('/chat', '\App\Http\Controllers\Chat\ChatController@getChat');



Route::get('/login', '\App\Http\Controllers\Chat\ChatController@getLogin');



Route::get('/messages', '\App\Http\Controllers\Chat\ChatController@listMessages');



Route::post('/messages', '\App\Http\Controllers\Chat\ChatController@saveMessage');

ログイン後にコピー

在此用法中，请求 URI 和请求方法映射到控制器名称和操作名称。

这就是控制器的全部内容。让我们切换到 View 部分。

查看

在本节中，我们使用了 Laravel 提供的 Blade 模板引擎。实际上，我们的项目中没有模板引擎的东西，但是如果你想从控制器发送值到视图，你可以直接使用这个项目。

我们有两个视图页面：login.blade.php 和 chat.blade.php。正如您所看到的，视图文件名中有一个 Blade 关键字，表明这将用于 Blade 模板引擎。

第一个只是简单的登录操作，所以我们先来说说chat页面。在此视图文件中，有一些从 CDN 提供的第三方 JavaScript 库，例如 jQuery、jQuery Cookie、Bootstrap 和 Pusher。我们有一个聊天表单来发送消息，Laravel 在页面中放置了元描述：

<meta name="_token" value="token">

ログイン後にコピー

但是，我们通过 AJAX 发送聊天消息，并且 AJAX 请求标头中没有令牌。我们通过使用以下代码片段提供了解决方案：

$.ajaxSetup({

            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }

        });

ログイン後にコピー

每当您发送 AJAX 请求时，此令牌都会被放入标头内。

为了实时监听消息通道，我们使用了以下内容：

var pusher = new Pusher('app_id');

var channel = pusher.subscribe('chat');

channel.bind('message', function(data) {

    var message = data.message;

    $(".media-list li").first().remove();

    $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div class="media-body">'

    + message.message + '<br/><small class="text-muted">' + message.author + ' | ' + message.created_at + '</small><hr/></div></div></div></li>');

});

ログイン後にコピー

首先，我们有一个 Pusher 对象，其中包含 app_id 构造函数。然后，客户端订阅该频道。每当名为 message 的新事件到达时，就会在 bind() 函数内执行回调函数。消息列表区域将刷新为新消息。

最后，每当新用户打开聊天页面时，消息列表区域都会显示最后五条消息，代码如下：

$.get("/messages", function (messages) {

    refreshMessages(messages)

});

ログイン後にコピー

您可以参考源码来分析视图页面的完整源码。

部署

我们将使用 Modulus 来托管我们的应用程序。

Modulus 是用您选择的语言部署、扩展和监控应用程序的最佳 PaaS 之一。在继续部署之前，请转到 Modulus 并创建一个帐户。

先决条件

Modulus 中的部署非常容易。您唯一需要做的就是安装 Node.js 模块并运行命令。您还可以压缩项目并将其上传到 Modulus。我们更喜欢本教程中的第一个选项。

我假设您已经在计算机上安装了 Node.js 和 npm。只需打开命令行工具并执行 npm install -g modulus 即可。成功安装后，使用 Modulus CLI 登录您的 Modulus 帐户：modulus login。如果想使用GitHub登录，可以使用模数登录--github。

登录后，使用以下命令创建一个项目：modulus project create "RealtimeChatLaravel"。您已在 Modulus 端创建了一个应用程序。

您需要做的最后一件事是在项目根文件夹中创建一个名为 sites-enabled 的文件夹，并将我们在上面 Nginx 部分中提到的 Nginx 配置放入此 sites-enabled 文件夹。

让我们将您的项目部署到此应用程序下的 Modulus。执行 modulus deploy 开始部署，就完成了！此命令会将您的项目文件上传到 Modulus，并且还会使用您放入 sites-enabled 文件夹中的 Nginx 配置来配置 Web 服务器。

成功部署后，您将收到一条消息 RealtimeChatLaravel running at http://realtimechatlaravel-51055.onmodulus.net/cha。转至此 URL 查看工作演示。

Modulus CLI 有非常有用的命令可在部署和运行时部分使用。例如，您可以使用 modulus 项目日志 tail 跟踪正在运行的项目的日志，使用 modulus env set <key> <value></value></key> 设置环境变量，等等。可以使用 modulus help 查看完整的命令列表。