websocket-rails を用いてserverとコネクトを試みると Error during WebSocket handshakeというエラーが出て困っています

Question

現在チャット機能を作っております。Websocketを通してサーバと接続する箇所を実装しました。しかしwebsocket-railsとサーバとの接続の際に Error during WebSocket handshake Invalid status lineという内容のエラーが出てしまい困っております。websocket-railsに関する記事を元にテストとして動かそうと思ったのですが、うまくいきません。どのようにしたらこのエラーを解消できるか教えてください。

参考にしたサイト：
http://www.school.ctc-g.co.jp/columns/masuidrive/masuidrive14.html
http://takuyanz.hatenablog.com/
環境：localのdevelop
サーバ：webrick(port:3000) redis(port:6379)
言語：Ruby 2.2.3p173（フレームワーク Rails(4.2.1)）
使用gem：websocket-rails
ブラウザ：chrome

実行内容：
webrickサーバ起動
rails s

Started GET "/chatRoom" for 127.0.0.1 at 2015-12-23 ・・・

redis起動
redis-server /usr/local/etc/redis.conf

74440:M 23 Dec 11:49:39.638 # Server started, Redis version 3.0.5
74440:M 23 Dec 11:49:39.638 * DB loaded from disk: 0.000 seconds
74440:M 23 Dec 11:49:39.638 * The server is now ready to accept connections on port 6379

実行結果
ページをロードするとブラウザのコンソールに以下のエラーが表示されます。

WebSocket connection to 'ws://localhost:6379/websocket' failed: Error during WebSocket handshake: Invalid status line

・General
Request URL:ws://localhost:6379/websocket
Request Method:GET
Status Code:200 OK

・Request Headers
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:Upgrade
Cookie:xxx_logined=2015-12-13+17%3A55%3A50+UTC; _websocketTest_session=・・・; _websocket-rails-demo_session=・・・; _message_session=・・・
Host:localhost:6379
Origin:http://localhost:3000
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:/・・・
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

ソースコード
Gemfile

gem 'websocket-rails'

chat_controller.rb

require 'redis'
class ChatController < WebsocketRails::BaseController

  def recieve_message
    message = message()
    broadcast_message :show_message, message
  end
  def initialize_session
    logger.info("initialize chat controller")
    @redis = Redis.new(:host => "127.0.0.1", :port => 6379)
    controller_store[:redis] = @redis
  end

  def connect_user
    logger.debug("connected user")
    gid = session[:group_id]  
    talks = controller_store[:redis].lrange gid, 0,100
    talks.each do |message|
      msg = ActiveSupport::HashWithIndifferentAccess.new(eval(message))
      send_message :new_message, obj
    end
  end

show_chat_room.html.erb

<div id="message_box">
  <p>broadcasting message</p>
  <!-- message will be shown here -->
</div>
<input type="text" id="message_input">
<input type="button" id="send_message" value="send">

<script>
  $(document).ready(function(e){
    var dispatcher = new WebSocketRails('localhost:6379/websocket');

    $(document).on("click", "#send_message", function(e){
      message_text = $("#message_input").val();
      dispatcher.trigger("send_message", message_text);
    });

    dispatcher.bind("show_message", function(message){
      console.log(message);
      $("#message_box").append("<p>" + message + "</p>");
    });
  });
</script>

events.rb

WebsocketRails::EventMap.describe do
  subscribe :send_message, :to => ChatController, :with_method => :recieve_message
end

development.rb

.
.
  config.middleware.delete Rack::Lock
・
・

Answer 1

使ったことがないので、的外れかもしれません。

サーバ：webrick(port:3000) redis(port:6379)

となっていて、

WebSocket connection to 'ws://localhost:6379/websocket' failed: Error during WebSocket handshake: Invalid status line

ということは、redis(port:6379)につないでいますが、webrick(port:3000)でなくてよいのでしょうか？

直接のエラーメッセージ原因は、サーバからの応答のStatus-Lineが、

HTTP/1.1 101 Switching Protocols

のようになるべきところ、

HTTP/1.1 200 OK

のようになっていることと思います。

参考ページ:RFC6455 — The WebSocket Protocol 日本語訳

[RFC2616] に従う， 101 応答コードを伴う Status-Line 。 その種の応答は、 "HTTP/1.1 101 Switching Protocols" のような形をとるであろう。

---

(2015/12/27 9:03 追記)
コメント欄の内容を追記しておきます。
以下の2つを実施することで、動作するようになったようですね。

404の記述を削除

config/routes.rbに入れていた、

get '*path', to: 'application#render_404'

という記述を削除する。

faye-websocketのバージョンを0.10.0に変更

websocket-rails 0.7.0 thin 1.6.4 / Handshake times out #379
に該当するようだったため、faye-websocketのバージョンを0.10.0に変更した。

Comments

[yamatora]

ご回答誠にありがとうございます。こちらもwebsocketを初めて使用しておりますので色々と理解できていないところがあると思います。
ご回答いただいた内容をヒントに引き続き調査を行っていたのですが解決に至っておりません。

javascriptの
---------------
var dispatcher = new WebSocketRails('localhost:6379/websocket');
---------------
を
---------------
var dispatcher = new WebSocketRails('localhost:3000/websocket',true);
---------------
として実行してみたのですがブラウザのコンソールに以下のようなエラーが表示されてしまいSwitching Protocolsされません
---------------
'ws://localhost:3000/websocket' failed: Error during WebSocket handshake: Unexpected response code: 404
---------------
またnet workの状態は以下のようでした。
---------------
General
Request URL:ws://localhost:3000/websocket
Request Method:GET
Status Code:404 Not Found
---------------
---------------
Response Header
Connection:close
Content-Type:text/plain; charset=utf-8
Server:thin
X-Request-Id:xxx
X-Runtime:xxx
---------------
---------------
Request Header
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:Upgrade
Cookie:xxx_logined=xxx; _websocketTest_session=xxx; _websocket-rails-demo_session=xxx; request_method=POST; _message_session=xxx
Host:localhost:3000
Origin:http://localhost:3000
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:q6W/zaydgbCw+qKv/w7A2g==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36
---------------
railsのconsole
---------------
Started GET "/websocket" for 127.0.0.1 at 2015-12-26 14:17:13 +0900

AbstractController::ActionNotFound - The action 'render_404' could not be found for ApplicationController:
---------------

また、not found となっているため接続先が見つからない状態でエラーが出ていると思うのですが、WebSocketでの接続先は常に「ws://ドメイン名/websocket」になっており、どんな処理を行ってもURLは変わらないそうです。
websocketの仕組み自体がイベント名によってマッピング先を変更するというようになっているとのことなのでドメイン名以降は問題ないのではと思っています。

何か少しでも引っかかるところがございましたら、ご意見いただければと思っております。お忙しいところと思いますが宜しくお願いいたします。

[eripong]

参考にされているページで、Gemfileに以下を追記するようにありますが、
gem install "websocket-rails"
以下の間違いのようです。
gem "websocket-rails"
ページの記述のまま実行していませんか？

[yamatora]

ページの記述をそのまま実行はしていないですね。
Gemfileは
gem 'websocket-rails'
と記述しております。

質問上でGemfileに関して記述していなかったので追記します、抜け漏れ申し訳ありません。

[eripong]

少し環境が違いますが、こちらで以下の環境を使って、101応答が返ってくることは確認できました。
言語：Ruby 2.2.5p95（フレームワーク Rails(4.2.5)

ApplicationControllerにrender_404がないというエラーが出るということですが、
config/routes.rbに、
get '*path', to: 'application#render_404'
のような設定を入れているということでしょうか？
その設定をなくして、
http://localhost:3000/websocket
にブラウザでアクセスすると、どうなりますか？

[eripong]

それから、原因としては、websocket-railsがそもそも動作していないように思います。
bundle list | grep websocket-rails
でwebsocket-railsが出てくるでしょうか？

[yamatora]

ご確認までしていただき、本当にありがとうございます。

>get '*path', to: 'application#render_404'
>のような設定を入れているということでしょうか？
はい、入れておりました。取り除いたところブラウザ上に以下のような表示が出力されました。

[["client_connected",{"id":null,"channel":null,"user_id":null,"data":{"connection_id":"3c4902994ae4e4bdb8da"},"success":null,"result":null,"token":null,"server_token":null}]][["websocket_rails.ping",{"id":null,"channel":null,"user_id":null,"data":{},"success":null,"result":null,"token":null,"server_token":null}]]

このときブラウザのネットワークのステータスは以下のようでした
General
Request URL:http://localhost:3000/websocket
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000

Response Headers
Connection:close
Content-Type:text/json
Server:thin
Transfer-Encoding:chunked

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Cookie:xxx_logined=2015-12-13+17%3A55%3A50+UTC; _websocketTest_session=xxx; _websocket-rails-demo_session=xxx; request_method=POST; _message_session=xxx
Host:localhost:3000
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

[yamatora]

bundle list | grep websocket-rails　コマンドを叩くと下記のように出力されました。
* websocket-rails (0.7.0)

[yamatora]

チャットを表示する画面を表示すると
ブラウザ上のコンソールに以下のようなエラー分が出ていました
WebSocket connection to 'ws://localhost:3000/websocket' failed: Connection closed before receiving a handshake response

ネットワークのステータス
General
Request URL:ws://localhost:3000/websocket

Request Headers
Provisional headers are shown
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:Upgrade
Cookie:xxx_logined=xxx; _websocketTest_session=xxx; _websocket-rails-demo_session=xxx; request_method=POST; _message_session=xxx
Host:localhost:3000
Origin:http://localhost:3000
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:jOZoHrOQgbFoaZoj25l2Tg==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

*Response Headersはありませんでした
Provisional headers are shownがCautionになっているからだと思っております

[yamatora]

>それから、原因としては、websocket-railsがそもそも動作していないように思います。
ひょっとすると
rake websocket_rails:start_server
で、websocket_rails　のデーモンを生成する必要がございますか？

試しに生成したところ
$ rake websocket_rails:start_server
Websocket Rails Standalone Server listening on port 3001
$ ps aux | grep websocket
name 80831 96.7 1.5 3167644 123648 ?? R 6:08AM 0:02.28 thin server (0.0.0.0:3001) [websocket_rails]
name 80833 0.0 0.0 2435860 764 s004 S+ 6:08AM 0:00.00 grep websocket
となりました。

またwebsocketのportが3001のため
js の
var dispatcher = new WebSocketRails('localhost:3000/websocket');
のurlを
var dispatcher = new WebSocketRails('localhost:3001/websocket');
に変更しました。

そして再度チャットの画面を表示すると先ほど出ていたエラー
(WebSocket connection to 'ws://localhost:3000/websocket' failed: Connection closed before receiving a handshake response)
が出なくなりました。

しかしwebsocketの状態はpendingになってしまい下記のように表示されました
General
Request URL:ws://localhost:3001/websocket

Request Headers
Provisional headers are shown
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:Upgrade
Cookie:xxx_logined=xxx; _websocketTest_session=xxx; _websocket-rails-demo_session=xxx; request_method=POST; _message_session=xxx
Host:localhost:3001
Origin:http://localhost:3000
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits
Sec-WebSocket-Key:xi+2g5BiLQLdySj2QLAhnA==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

Provisional headers are shown とは何が原因か調べたところChromeのクロスドメイン対策ができていないからなど、記事が出てきましたが未だ解決に至っておりません。

safariで試したところエラーは出ませんでしたがjsの
dispatcher.bind("show_message", function(message){
が発火されていないみたいです

[eripong]

スタンドアローンにはしていませんが、pendingになる現象は、こちらでも出ました。

https://github.com/websocket-rails/websocket-rails/issues/379
の問題と思います。
faye-websocketのバージョンを0.10.0にすることで、
こちらでは対処できたのですが、どうでしょうか？

[yamatora]

対処出来ました！
何かと解決策を教えていただき本当にありがとうございます。大変助かりました。

[eripong]

動くようになってよかったです。

コメントの内容を、回答に追記しておきました。
スタンドアローンにすることは、必要かどうかわからなかったので、
ひとまず追記はしませんでした。

[yamatora]

コメントの追記ありがとうございます。次に同じようなことで困った人の役にも立つかもしれませんね。