ActionCableでチャット機能をつくる

Rails5のActionCableという便利な機能を用いてLINE的なチャットアプリを作ってました。

苦労したことは

  • enter押しても画面に表示されずコンソールでエラー起きる
  • enterしてもメッセージが表示されずdatabaseに保存されていない

enterでメッセージ送れるようにするにはjQueryの読み込みを追加で行う必要があります。

Gemfileにgem 'jquery-rails'を記述しbundle updateを行う

aaplication.jsに移動し

//= require jquery
//= require jquery-ujs

を追加するとok。

メッセージが表示されない問題はサーバークライアントの連携の処理に問題がありました。

具体的にいうと

クライアントサイドのspeakアクションを定義、そのアクションでサーバー側のspeakアクションを呼び、messageをmessageというパラメーターとして渡す処理が上手くいってなかったのです。このmessageパラメーターをdataとして受け取りmessageにブロードキャスト、ブロードキャストは非同期通信のためにjobファイルに移動、viewにmessageを渡してからmessageモデルをいじる。tableにdataが保存されたらMessageBroadcastのperformアクションを実行、そしてroom_channel.rbで定義したspeakアクションから送信されるdata、selfを利用してmessageモデルとして渡す。最後にクライアント側でのreceiveの処理を変更してviewにappendする(オタク特有の早口)

room.coffeeでクライアントの処理を書き、roomやjobファイルでrailsのサーバー処理を書きブラウザで動かしログ追ってみるとサーバークライアントの仕組みを直感的に理解することができるなーという感想です。

Leave a Reply

Your email address will not be published. Required fields are marked *