123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <main>
- <!-- Page Section -->
- <section class="content">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-6">
- <!-- <Navbar /> -->
- <div class="card">
- <div class="card-body">
- <h4>OUTPUT AREA</h4>
- <pre>
- <code>
- {{output}}
- </code>
- </pre>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <div class="card">
- <div class="card-header">
- <h3 class="card-title">
- <i class="fas fa-info-circle mr-1"></i>
- Server-side Event Guide
- </h3>
- </div>
- <div class="card-body">
- <dl class="row">
- <dt class="col-sm-4">Description lists</dt>
- <dd class="col-sm-8">A description list is perfect for defining terms.</dd>
- <dt class="col-sm-4">Euismod</dt>
- <dd class="col-sm-8">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd class="col-sm-8 offset-sm-4">Donec id elit non mi porta gravida at eget metus.</dd>
- <dt class="col-sm-4">Malesuada porta</dt>
- <dd class="col-sm-8">Etiam porta sem malesuada magna mollis euismod.</dd>
- <dt class="col-sm-4">Felis euismod semper eget lacinia</dt>
- <dd class="col-sm-8">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
- sit amet risus.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- </main>
- </template>
- <script>
- /* Import modules. */
- // import EventSource from 'eventsource'
- export default {
- data: () => {
- return {
- endpoint: null,
- query: null,
- b64query: null,
- output: null,
- }
- },
- computed: {
- //
- },
- methods: {
- //
- },
- created: async function () {
- this.output = 'Initializing output area...'
- },
- mounted: function () {
- this.query = {
- v: 3,
- q: {
- find: {
- //
- }
- }
- }
- // this.query = {
- // v: 3,
- // q: {
- // find: {
- // 'out.e.a': 'qqy0l8y249dr4suvalvqunzxmp6kgslxd5uve0j4y2'
- // }
- // }
- // }
- // Turn the query into base64 encoded string.
- // This is required for accessing a public bitdb node
- this.b64query = Buffer
- .from(JSON.stringify(this.query))
- .toString('base64')
- console.log('Base64 query:', this.b64query)
- // this.endpoint = 'https://bitsocket.bch.sx/s/' + this.b64query
- // this.endpoint = 'https://bitsocket.apecs.dev/s/' + this.b64query
- // this.endpoint = 'https://slpsocket.fountainhead.cash/s/' + this.b64query
- // this.endpoint = 'https://slpsocket.apecs.dev/s/' + this.b64query
- this.endpoint = 'https://flipstarter.satoshisangels.com/events'
- // this.endpoint = 'https://flipstarter.apecs.dev/events'
- /* Initialize socket connection. */
- // const bitsocket = new EventSource(this.endpoint)
- /* Handle socket opening. */
- // bitsocket.onopen = () => {
- // this.output = 'We have started listening...'
- // }
- /* Handle socket closing. */
- // bitsocket.onclose = () => {
- // this.output = 'We have stopped listening.'
- // }
- /* Handle socket messages. */
- // bitsocket.onmessage = (e) => {
- // try {
- // /* Parse JSON data. */
- // const data = JSON.parse(e.data)
- // /* Update output/display. */
- // this.output = JSON.stringify(data, null, 2)
- // } catch (err) {
- // console.error(err)
- // }
- // }
- },
- }
- </script>
|