Socket channel

back edit

Use with .js-updatable-content

Set up a controller action that notifies a socket channel of updates.

def add_to_business
  if business.add_account(account)
    GitHub::WebSocket.notify_user_channel(user.id, "account-list")
  end
end

Annotate the markup with the channel name, HTML source URL, and JS classes.

<div class="SelectMenu-modal my-0">
  <div class="js-socket-channel js-updatable-content"
    data-channel="account-list"
    data-url="../../support/menuitems.html">
    <a role="menuitem" href="https://github.com/octocat" class="SelectMenu-item">
      <img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="">
      Monalisa Octocat <span class="ml-2">@octocat</span>
    </a>
    <a role="menuitem" href="https://github.com/microsoft" class="SelectMenu-item">
      <img src="https://github.com/microsoft.png" width="20" class="avatar mr-1" alt="">
      Microsoft <span class="ml-2">@microsoft</span>
    </a>
  </div>
</div>

Customized live update behavior

Notify web socket channels of changes with GitHub::WebSocket in a callback.

patch "/importing" do
  channel = GitHub::WebSocket::Channels.source_import(repository) # "repository_import:#{id}"
  GitHub::WebSocket.notify_repository_channel(
    repository,
    channel,
    {redirect_to: "https://github.com/github/web-systems-documentation"}
  )
end

Catch this message by listening on the socket:message custom event.

on('socket:message', '.js-repository-import', function(event) {
  const {currentTarget} = event
  const {data: {redirect_to}} = event.detail
  currentTarget.querySelector('.js-import-start').hidden = true
  currentTarget.querySelector('.js-import-finish').hidden = false
  setTimeout(() => window.location.href = redirect_to, 3000)
})

Annotate the markup with the channel name and JS classes.

<div class="js-socket-channel js-repository-import" data-channel="repository_import:12345">
  <div class="blankslate">
    <img src="https://ghicons.github.com/assets/images/blue/png/Migrations.png" alt="" class="mb-3">
    <div class="f3 text-bold js-import-start">Repository import processing&hellip;</div>
    <div class="f3 text-bold js-import-finish" hidden>Import finished. Redirecting in 3 seconds&hellip;</div>
  </div>
</div>