stimulus-websocket preview

README.md

This controller can be put on body or any other element.

1. Adds a websocket accessor to the element
2. Controller exposes a connected boolean getter
3. Controller bails with a warning if no shared consumer is available
4. Element will have data-action-cable-connected or data-action-cable-disconnected attributes which can be used for CSS selectors
5. Element will emit action-cable:connected or action-cable:disconnected events only when state is flipping
6. Errors => Disconnected to keep things simple

I intend to document the navigator.onLine accessor and the window:online/offline events so devs can handle PWA modes.

Seeking feedback on the following:

• is it within the realm of acceptable to ask people to import consumer and assign it to application.consumer?
• is it obnoxious for me to call this controller websocket?
• do you like the event handles and attribute names?

index.js

import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
import consumer from '../channels/consumer'

const application = Application.start()
const context = require.context('controllers', true, /_controller\.js$/)
application.load(definitionsFromContext(context))
application.consumer = consumer

websocket_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {
  initialize () {
    this.element['websocket'] = this
    this.consumer = this.application.consumer
    this.connection = this.consumer.connection
    this.socket = this.connection.webSocket
    this.previouslyConnected = false
  }

  connect () {
    if (this.socket) {
      this.socket.addEventListener('open', this.connectionOpened)
      this.socket.addEventListener('close', this.connectionClosed)
      this.socket.addEventListener('error', this.connectionClosed)
      this.connected ? this.connectionOpened() : this.connectionClosed()
    } else {
      console.warn('No shared consumer in scope. Websocket is lonely. 😢')
    }
  }

  disconnect () {
    if (this.socket) {
      this.socket.removeEventListener('open', this.connectionOpened)
      this.socket.removeEventListener('close', this.connectionClosed)
      this.socket.removeEventListener('error', this.connectionClosed)
      this.connected ? this.connectionOpened() : this.connectionClosed()
    }
  }

  connectionOpened = () => {
    this.element.removeAttribute('data-action-cable-disconnected')
    this.element.setAttribute('data-action-cable-connected', '')
    if (!this.previouslyConnected) this.emit('action-cable:connected')
    this.previouslyConnected = true
  }

  connectionClosed = () => {
    this.element.removeAttribute('data-action-cable-connected')
    this.element.setAttribute('data-action-cable-disconnected', '')
    if (this.previouslyConnected) this.emit('action-cable:disconnected')
    this.previouslyConnected = false
  }
  
  emit = event => {
    this.element.dispatchEvent(
      new CustomEvent(event, {
        bubbles: true,
        cancelable: false,
        detail: {
          connection: this.connection
        }
      })
    )
  }

  get connected () {
    return this.consumer ? this.connection.isOpen() : false
  }
}