SSEQRCode

a qrcode component for Server-Sent Event.

Installation

The package can be installed via NPM:

npm install sseqrcode --save

Basic Concept

SSE: Using server-sent events on MDN.

                +-------+                  +---------+                         +---------+
                | user  |                  | browser |                         | server  |
                +-------+                  +---------+                         +---------+
                    |                           |                                   |
                    |                           | request login                     |
                    |                           |---------------------------------->|
                    |                ---------\ |                                   |
                    |                | onInit |-|                                   |
                    |                |--------| |                                   |
                    |                           |                                   |
                    |                           |        send('qrcode', base64/url) |
                    |                           |<----------------------------------|
                    |              -----------\ |                                   |
                    |              | onQrcode |-|                                   |
                    |              |----------| |                                   |
                    |                           |                                   |
                    |      present QRCode image |                                   |
                    |<--------------------------|                                   |
                    |                           |                                   |
                    |                           |        send('pending', 'pending') |
                    |                           |<----------------------------------|
                    |             ------------\ |                                   |
                    |             | onPending |-|                                   |
                    |             |-----------| |                                   |
------------------\ |                           |                                   |
| scan the QRCode |-|                           |                                   |
|-----------------| |                           |                                   |
                    |                           |                                   |
                    | access the login url      |                                   |
                    |-------------------------------------------------------------->|
                    |                           |                                   |
                    |                           |      send('scanned', 'logged in') |
                    |                           |<----------------------------------|
                    |             ------------\ |                                   |
                    |             | onScanned |-|                                   |
                    |             |-----------| |                                   |
                    |                           |                                   |

Usage

import React from 'react'
import { SSEQRCode } from 'SSEQRCode'

class App extends React.Component {
  handleScan = ret => {
    alert(`Logged in as ${ret}`)
  }

  render() {
    return (
      <div>
        <SSEQRCode
          sseURL='/api/sse'
          onScanned={this.handleScan} />
      </div>
    )
  }
}

Props

prop	type	required	description
sseSource	EventSource	when sseURL is null	provided EventSource
sseURL	string	when sseSource is null	URL of the source
width	number or string		width property on img tag, default 200
height	number or string		height property on img tag, default 200
keepAlive	boolean		whether to close connection after qrcodeEvent was received, default false
errorEvent	string		name of error event, default 'error'
pendingEvent	string		name of pending event, default 'pending'
scannedEvent	string		name of scanned event, default 'scanned'
qrcodeEvent	string		name of qrcode event, default 'qrcode'
onInit	Function		will be called when EventSource is opened
onQrcode	Function		will be called when qrcodeEvent received
onPending	Function		will be called when pendingEvent received
onScanned	Function		will be called when scannedEvent received
onError	Function		will be called when errorEvent received or error occurred
onQRCodeLoaded	Function		will be called when QRCode image is loaded

onQrcode

function onQrcode(data)

where:

• data - string the received message from server, should be base64 or URL of QRCode image

onPending

function onPending(data)

where:

• data - string the received message from server

onScanned

function onScanned(data)

where:

• data - string the received message from server, can be used for notification

onError

function onError(data)

where:

• data - string the received message from server or the error message

onQRCodeLoaded

function onQRCodeLoaded()

you can use this prop to control loading indicator.

For example,

class Spin extends React.component {
  state = {
    loading: true,
  }

  handleLoaded = () => {
    this.setState({ loading: false })
  }

  render() {
    return (
      <div style={{ border: `1px solid ${this.state.loading ? 'grey' : 'red'}` }}>
        <SSEQRCode
          sseURL="/api/sse"
          onQRCodeLoaded={this.handleLoaded} />
      </div>
    )
  }
}