hopsoft/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Problem

Unauthorized ActionCable connection attempts that produce the following

Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
Finished "/cable/" [WebSocket] for 127.0.0.1 at 2018-11-16 08:32:24 -0700
An unauthorized connection attempt was rejected

Solution

Simply opt-in to ActionCable with the data-cable attribute on the body element.
Use current_user or whatever conditional logic makes sense for your app.

  
## application.html.erb
<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head></head>
  <body <%= "data-cable" if current_user.present? %>>
  </body>
</html>

## cable.js
// app/assets/javascripts/cable.js
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  function connect() {
    if (document.querySelector('body[data-cable]')) {
      this.App || (this.App = {});
      App.cable || (App.cable = ActionCable.createConsumer());
    }
  }

  document.addEventListener('DOMContentLoaded', connect);
}.call(this));
	<!-- app/views/layouts/application.html.erb -->
	<!DOCTYPE html>
	<html>
	<head></head>
	<body <%= "data-cable" if current_user.present? %>>
	</body>
	</html>
	// app/assets/javascripts/cable.js
	//= require action_cable
	//= require_self
	//= require_tree ./channels

	(function() {
	function connect() {
	if (document.querySelector('body[data-cable]')) {
	this.App \|\| (this.App = {});
	App.cable \|\| (App.cable = ActionCable.createConsumer());
	}
	}

	document.addEventListener('DOMContentLoaded', connect);
	}.call(this));