Poor man's realtime

Poor man's realtime

September 24, 2014

Streaming to browsers has got a lot easier with the advent of APIs like WebSockets and Server-sent Events. However the server-side aspect is often trickier to setup--many servers and runtimes are not tuned for long-lived requests.

There's a much simpler approach to 'realtime' updates which can be applicable in some situations; polling the page's endpoint and updating the body's HTML. I put realtime in quotes because this is not strictly realtime. However it's a good enough technique for a lot of cases. Indeed we're using it to update a progress bar and list of results in Mailmatch.

All we need to do is set up an interval to re-fetch the page's HTML every five seconds, parse the response HTML looking for a specific element, and then replace the page's corresponding element with the updated one from the server.

reloader.coffee

$ = jQuery

class @Reloader
  constructor: (@selector = '.wrapper', @path, @interval = 5000) ->
    @start()

  start: =>
    @timer = setInterval(@fetch, @interval)

  stop: =>
    clearInterval(@timer)

  fetch: =>
    $.get(@path).done(@render)

  render: (data) =>
    $body = $(@parseBody(data))

    if @selector is 'body'
      $el = $body
    else
      $el = @findAll($body, @selector)

    $(@selector).replaceWith($el)

  parseHTML: (html) =>
    $.parseHTML(html, document, false)

  parseBody: (data) =>
    @parseHTML(data.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0])

  findAll: ($elems, selector) ->
    $elems.filter(selector).add($elems.find(selector))

Notice we're having to parse out the <body> tag using a regex--document fragments don't like parsing out doctypes. Also notice that by default, @path is undefined -- jQuery's Ajax request will just fetch the page's current path and query parameters.

To use the library, simply instantiate it on document ready, passing in a selector to the element that you want to constantly update.

$ -> new Reloader('.el-wrapper')

This technique is better than full page reload since it's a lot quicker - it doesn't entail fetching all the styles and scripts in the header. It also has the advantage of localizing updates to a specific element.


Company Logo API

Engineeringby Alex MacCaw on January 01, 2021

Clearbit's free Logo API is still available here in 2021 — and still completely free. We never found anything that catered well to company logos. And yet there's a lot of clear use-cases ranging from setting an organization's default image on signup to pulling in logos next to job listings. Clearbit Logo API The API is incredibly simple, taking a company's domain and returning an image. GET https://logo.clearbit.com/:domain Behind the scenes we're using Clearbit's Company API [https://clear

Introducing ultimate parent to Clearbit Enrichment API

Engineeringby Emily Brown on April 16, 2019

We've added a new data attribute to Clearbit's Company Enrichment API: ultimate parent. Bring full context of your accounts' hierarchy into view — so your team can stay up to speed on new acquisitions and know when they're in conversation with the same parent company.

Join our newsletter

Engaging stories and exclusive data, designed for our best customers. One useful issue each month.