Lightning Web Component Streaming API Demo

lwc_streaming_demo.html

<template>
<!--  Push Topic    -->
    <c-lwc_streaming_api 
        channel="/topic/NewContactCreated" 
        api-version="45.0" 
        debug=true
        onmessage={handleMessage} 
        onerror={handleError} 
        class="lwc_streaming_api-1">
    </c-lwc_streaming_api>
    
<!-- Platform Event -->
<!--   
<c-lwc_streaming_api 
    channel="/event/Test_Event__e" 
    api-version="45.0" 
    debug=true
    onmessage={handleMessage} 
    onerror={handleError} 
    class="lwc_streaming_api-1">
</c-lwc_streaming_api>
-->

    <lightning-button label="Destroy Connection"  onclick={destroy}></lightning-button>

    <lightning-button label="Restart Connection"  onclick={restart}></lightning-button>

    <lightning-button label="Check Connection"  onclick={checkConnection}></lightning-button>

    <div style="background: white;padding: 50px;">
        <div style="margin:20px;">
            Payload
            <br/>
            {payload}
        </div>
        
        <div style="margin:20px;">
            Error:
            <br/>
            {error}
        </div>

        <div style="margin:20px;">
            Is Connection On:
            <br/>
            {isConnectionOn}
        </div>
    </div>
</template>

lwc_streaming_demo.js

import { LightningElement,track } from 'lwc';

export default class Lwc_streaming_demo extends LightningElement {

    @track error = '';
    @track payload = '';
    @track isConnectionOn;

    //Handles the error
    handleError(event){
        //Error is coming in the event.detail.error
        this.error = JSON.stringify(event.detail.error);
    }

    //Handles the message/payload from streaming api
    handleMessage(event){
        //Message is coming in event.detail.payload
        this.payload = this.payload + JSON.stringify(event.detail.payload);
    }

    //This methos is subscribing the channel
    restart(){
        this.template.querySelector('.lwc_streaming_api-1').subscribe();
    }

    //This methos is unsubscribing the channel
    destroy(){
        this.template.querySelector('.lwc_streaming_api-1').unsubscribe();

        this.payload = '';
        this.error = '';
    }

    //This methos is checking if the channel is subscribed or not
    checkConnection(){
        this.isConnectionOn = this.template.querySelector('.lwc_streaming_api-1').checkConnection();
    }
}

lwc_streaming_demo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwc_streaming_demo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>