1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
rails--rails/actioncable/app/javascript/action_cable/connection.js
Richard Macklin c96139af71 Convert ActionCable javascript to ES2015 modules with modern build environment
We've replaced the sprockets `//= require` directives with ES2015
imports. As a result, the ActionCable javascript can now be compiled
with rollup (like ActiveStorage already is).

- Rename action_cable/index.js.erb -> action_cable/index.js

- Add rake task to generate a javascript module of the ActionCable::INTERNAL ruby hash

  This will allow us to get rid of ERB from the actioncable javascript,
  since it is only used to interpolate ActionCable::INTERNAL.to_json.

- Import INTERNAL directly in ActionCable Connection module

  This is necessary to remove a load-order dependency conflict in the
  rollup-compiled build. Using ActionCable.INTERNAL would result in a
  runtime error:
  ```
  TypeError: Cannot read property 'INTERNAL' of undefined
  ```
  because ActionCable.INTERNAL is not set before the Connection module
  is executed.

  All other ActionCable.* references are executed inside of the body of a
  function, so there is no load-order dependency there.

- Add eslint and eslint-plugin-import devDependencies to actioncable

  These will be used to add a linting setup to actioncable like the one
  in activestorage.

- Add .eslintrc to actioncable

  This lint configuration was copied from activestorage

- Add lint script to actioncable

  This is the same as the lint script in activestorage

- Add babel-core, babel-plugin-external-helpers, and babel-preset-env devDependencies to actioncable

  These will be used to add ES2015 transpilation support to actioncable
  like we have in activestorage.

- Add .babelrc to actioncable

  This configuration was copied from activestorage

- Enable loose mode in ActionCable's babel config

  This generates a smaller bundle when compiled

- Add rollup devDependencies to actioncable

  These will be used to add a modern build pipeline to actioncable like
  the one in activestorage.

- Add rollup config to actioncable

  This is essentially the same as the rollup config from activestorage

- Add prebuild and build scripts to actioncable package

  These scripts were copied from activestorage

- Invoke code generation task as part of actioncable's prebuild script

  This will guarantee that the action_cable/internal.js module is
  available at build time (which is important, because two other modules
  now depend on it).

- Update actioncable package to reference the rollup-compiled files

  Now that we have a fully functional rollup pipeline in actioncable, we
  can use the compiled output in our npm package.

- Remove build section from ActionCable blade config

  Now that rollup is responsible for building ActionCable, we can remove
  that responsibility from Blade.

- Remove assets:compile and assets:verify tasks from ActionCable

  Now that we've added a compiled ActionCable bundle to version control,
  we don't need to compile and verify it at publish-time.

  (We're following the pattern set in ActiveStorage.)

- Include compiled ActionCable javascript bundle in published gem

  This is necessary to maintain support for depending on the ActionCable
  javascript through the Sprockets asset pipeline.

- Add compiled ActionCable bundle to version control

  This mirrors what we do in ActiveStorage, and allows ActionCable to
  continue to be consumed via the sprockets-based asset pipeline when
  using a git source instead of a published version of the gem.
2018-11-02 08:41:05 -07:00

156 lines
4.1 KiB
JavaScript

import ActionCable from "./index"
import INTERNAL from "./internal"
// Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.
const {message_types, protocols} = INTERNAL
const supportedProtocols = protocols.slice(0, protocols.length - 1)
const indexOf = [].indexOf
class Connection {
constructor(consumer) {
this.open = this.open.bind(this)
this.consumer = consumer
this.subscriptions = this.consumer.subscriptions
this.monitor = new ActionCable.ConnectionMonitor(this)
this.disconnected = true
}
send(data) {
if (this.isOpen()) {
this.webSocket.send(JSON.stringify(data))
return true
} else {
return false
}
}
open() {
if (this.isActive()) {
ActionCable.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)
return false
} else {
ActionCable.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`)
if (this.webSocket) { this.uninstallEventHandlers() }
this.webSocket = new ActionCable.WebSocket(this.consumer.url, protocols)
this.installEventHandlers()
this.monitor.start()
return true
}
}
close({allowReconnect} = {allowReconnect: true}) {
if (!allowReconnect) { this.monitor.stop() }
if (this.isActive()) { return (this.webSocket ? this.webSocket.close() : undefined) }
}
reopen() {
ActionCable.log(`Reopening WebSocket, current state is ${this.getState()}`)
if (this.isActive()) {
try {
return this.close()
} catch (error) {
ActionCable.log("Failed to reopen WebSocket", error)
}
finally {
ActionCable.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`)
setTimeout(this.open, this.constructor.reopenDelay)
}
} else {
return this.open()
}
}
getProtocol() {
return (this.webSocket ? this.webSocket.protocol : undefined)
}
isOpen() {
return this.isState("open")
}
isActive() {
return this.isState("open", "connecting")
}
// Private
isProtocolSupported() {
return indexOf.call(supportedProtocols, this.getProtocol()) >= 0
}
isState(...states) {
return indexOf.call(states, this.getState()) >= 0
}
getState() {
if (this.webSocket) {
for (let state in WebSocket) {
if (WebSocket[state] === this.webSocket.readyState) {
return state.toLowerCase()
}
}
}
return null
}
installEventHandlers() {
for (let eventName in this.events) {
const handler = this.events[eventName].bind(this)
this.webSocket[`on${eventName}`] = handler
}
}
uninstallEventHandlers() {
for (let eventName in this.events) {
this.webSocket[`on${eventName}`] = function() {}
}
}
}
Connection.reopenDelay = 500
Connection.prototype.events = {
message(event) {
if (!this.isProtocolSupported()) { return }
const {identifier, message, type} = JSON.parse(event.data)
switch (type) {
case message_types.welcome:
this.monitor.recordConnect()
return this.subscriptions.reload()
case message_types.ping:
return this.monitor.recordPing()
case message_types.confirmation:
return this.subscriptions.notify(identifier, "connected")
case message_types.rejection:
return this.subscriptions.reject(identifier)
default:
return this.subscriptions.notify(identifier, "received", message)
}
},
open() {
ActionCable.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`)
this.disconnected = false
if (!this.isProtocolSupported()) {
ActionCable.log("Protocol is unsupported. Stopping monitor and disconnecting.")
return this.close({allowReconnect: false})
}
},
close(event) {
ActionCable.log("WebSocket onclose event")
if (this.disconnected) { return }
this.disconnected = true
this.monitor.recordDisconnect()
return this.subscriptions.notifyAll("disconnected", {willAttemptReconnect: this.monitor.isRunning()})
},
error() {
ActionCable.log("WebSocket onerror event")
}
}
export default Connection