チャット(非同期通信)の作成 - チャット画面の作成 -

前回は「チャット(非同期通信)の作成」におけるデータベースの作成についてエントリーしました。

今回はチャット画面を表示させる部分についてエントリーします。

手順

 

ルーティングの作成

チャット画面のルーティングを作成します。


Route::get('board/message', 'MessageController@index');

 

コントローラの作成

artisan コマンドでスケルトンを作成し、中身をコーディングします。


class MessageController extends Controller
{
    public function index()
    {
        // Bladeで使う変数
        $hash = array(
            'title' => '',
            'subtitle' => ''
        );
        return view('board.message')->with($hash);
    }
}

 

Bladeの作成

HTML(メッセージ表示画面)

Vue.js を使ってメッセージを表示させます。

メッセージの表示部分はVue.jsのループ処理(for)を使って、Ajaxで抽出したメッセージを表示させます。

内容は次々回の「ajaxのレスポンス」でエントリーする予定です。


:
<div class="message_detail_container" style="right: 0; opacity: 0;">
    <div id="main_message" class="messages_list_wrapper">
    {{-- Ajax × Vue.js を使ってメッセージを表示 --}}
    </div><!--/main_message-->
</div><!--/message_detail_container-->
:

 

HTML(メッセージ送信画面)

送信ボタンは Vue.js でコントロールします。

Vue.js の記述は外部スクリプト(/assets/js/board/message.js)に記述。


:
<div class="message_form_wrapper">
    <form>
        <div class="form-group">
            <textarea class="form-control" rows="3" v-model="inputTextarea"></textarea>
        </div>
        <div class="button_wrapper">
            <button type="button" id="send" class="btn btn-primary" v-on:click="send" v-bind:disabled="!inputTextarea.length"><i class="myicon-paper-plane"></i></button>
        </div>
    </form>
</div>
:

 

CSS

ベースは Bootstrap のコンポーネントを使います。

それ以外のオリジナルの CSS は main.scss に記述。


# main.scss
:
@import "bootstrap/bootstrap.scss";
:
body {
  background: #fff;
}
:

 
gulp で app.css にして読み込みます。


# message.blade.php
:
<link href="{{ asset('/assets/css/app.css') }}" rel="stylesheet"><!--CSS 本体-->
:

 

JavaScript

Ajax で API を読み込む記述は外部スクリプトに記述します。

ここは次のエントリーで紹介するつもりです。


:
<script src="{{ asset('/assets/js/board/message.js') }}"></script><!--JS 本体-->
:

 
次回はAjaxのリクエストでメッセージを読み込むAPIを呼び出す記述を紹介します。

今回は以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。メールはこちら

 

-チュートリアル, 初級