質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

解決済

1回答

2105閲覧

ActionCableでWebSocket connectionのエラーが表示される

T.Adams

総合スコア40

Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2020/04/27 15:05

編集2020/04/27 15:18

解決したい問題

Railsアプリでリアルタイムチャット機能を使用したいと考え、ActionCableを使用しました。
しかしチャット欄に打ち込んだメッセージが画面に反映されず(入力欄に打ち込んだメッセージが下に連なる)設計通りに動作しませんでした。ブラウザの検証機能でConsoleを確認したところ、以下のメッセージが出ていることがわかりましたが、調査した文献の方法では解決できなかったため、ご質問させていただきました。

Console

1WebSocket connection to 'ws://localhost:81/cable' failed: Error during WebSocket handshake: Unexpected response code: 404

画面キャプチャは以下です。
イメージ説明

ソース

app/javascript/chat_channel.js
const chatChannel = ・・・の部分に、console.logを仕込み、フロント側をリロードしましたが、ブラウザのConsoleに'connected'という文字が表示されていないことから、上記のエラーのように、Socket通信に失敗していると思われます。

javascript

1import consumer from "./consumer" 2 3const chatChannel = consumer.subscriptions.create("ChatChannel", { 4 connected() { 5 console.log('connected') 6 }, 7 8 received(content) { 9 const contents = document.getElementById('chain-quotes') 10 contents.innerHTML += `<p>${content}</p>` 11 }, 12 13 speak: function(content) { 14 return this.perform('speak', {content: content}); 15 } 16}); 17 18document.addEventListener('DOMContentLoaded', function(){ 19 20 const input = document.getElementById('message-input') 21 const button = document.getElementById('button') 22 23 button.addEventListener('click', function(){ 24 const content = input.value 25 chatChannel.speak(content) 26 input.value = '' 27 }) 28});

app/channels/chat_channel.rb

Ruby

1class ChatChannel < ApplicationCable::Channel 2 def subscribed 3 stream_from 'chat_channel' 4 end 5 6 def unsubscribed 7 # Any cleanup needed when channel is unsubscribed 8 end 9 10 def speak(data) 11 content = Chat.create!(content: data['content']) 12 ActionCable.server.broadcast 'chat_channel', data['content'] 13 end 14end

app/views/chas/show.html.erb

ERB

1<div class="container"> 2 <h1>チャット部屋</h1> 3 4 <form> 5 <div class="form-group"> 6 <label for="inputlg">メッセージ</label> 7 <input type="text" class="form-control" id="message-input" /> 8 </div> 9 <div class="center-block"> 10 <button id="button" class="btn btn-success pull-right">送信</button> 11 </div> 12 </form> 13 14 <div id="chain-quotes"> 15 <ul class="list-group"> 16 <br> 17 <%= render @chats %> 18 </ul> 19 </div> 20 21</div>

環境情報

  • Ruby 2.7.1
  • Ruby on Rails 6.0.2.2
  • Docker version 19.03.8
  • docker-compose version 1.25.4
  • MySQL 5.7
  • Nginx 1.17

以下でRailsアプリの環境を構築しました。
Docker + Rails + Puma + Nginx(SSL) + MySQL

  • docker-compose.yml
version: '3' services: app: build: context: . env_file: - ./environments/db.env command: bundle exec puma -C config/puma.rb volumes: - .:/webapp - public-data:/webapp/public - tmp-data:/webapp/tmp - log-data:/webapp/log depends_on: - db db: image: mysql:5.7 env_file: - ./environments/db.env volumes: - db-data:/var/lib/mysql web: build: context: containers/nginx volumes: - certs:/etc/letsencrypt # 追加 - certs-data:/var/lib/letsencrypt # 追加 - public-data:/webapp/public - tmp-data:/webapp/tmp ports: - 80:80 - 443:443 depends_on: - app volumes: certs: # 追加 certs-data: # 追加 public-data: tmp-data: log-data: db-data:

調査して実施した文献

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

質問が不明確であり、原因を明確化した記事に変更したいため、一旦終了します。

投稿2020/04/28 08:23

T.Adams

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問