4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails 5+ ActionCableで作る! シンプルなチャットアプリ ハマった所

Last updated at Posted at 2017-10-25

Rails 5+ ActionCableで作る! シンプルなチャットアプリ ハマった所

コピペ用

環境

ruby 2.4.0
rails 5.14
redis 3.2.9

#参考
Rails 5 + ActionCableで作る!シンプルなチャットアプリ(DHH氏のデモ動画より)

【Rails5】ActionCableリアルタイムチャットを実装。

Railsでページ遷移時に何故かJavaScriptが起動しない時

#ハマった点

蛇足だが, jqueryを使っているのでGemfile に 
gem ‘jquery-rails'
gem 'jquery-turbolinks'
を追加する必要があります。
追加後にbundle installして下さい。

rails db:migrate
bundle install

また、application.jsファイルに追加する項目があります。

app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks

Jqueryが必要なスクリプト

app/assets/javascripts/channels/room.coffee
$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
  if event.keyCode is 13 # return = send
    App.room.speak event.target.value
    event.target.value = ''
    event.preventDefault()

ここだけハマりましたが、後はqiitaの記事の中の設定通りにすると
動きます。

気になった点

rails new した時のオプションが必要ありませんでした。

以前
$ rails _5.0.0.beta1_ new campfire --skip-spring
今
$ rails new campfire

javascriptsのデフォルトがcoffeeからjsに変更されています。

以前
app/assets/javascripts/cable.coffee

今
app/assets/javascripts/cable.js

内容

app/assets/javascripts/cable.js
(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

今回のサンプルアプリのgithubリポジトリ

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?