BHivewebsocket Component

• BHivewebsocket is a Bhive shared component. It is developed using StencilJs and StompJS

• Stencil generates standards-compliant Web Components; the components we build with Stencil will work with many popular frameworks right out of the box, and can even be used without a framework because they are just Web Components

Getting Started

BHivewebsocket allows you to connect to a STOMP broker over WebSocket client for Web Browser.

Properties

Input @Prop

• url - The broker url to which the connection to be established
• topics - The topics to be subscribed should be passed as a string array

Output @prop

• subscribe - This is an event which gets triggered when the subscribed topics send a message as $event to the client.

Example

<bhive-websocket url="ws://javascript.info" topics="['topic_1, topic_2]" (subscribe)="onSubscribe($event)" ></bhive-websocket>

Installation

$ npm i bhivewebsocket

Using BHivewebsocket component

Native

• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Angular

• Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the component
• Call defineCustomElements() from main.ts (or some other appropriate place)
• Add the component in main.component.ts (or in any component which is not rerendered after the initial load)

Example

• app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
}

• main.ts

import { defineCustomElements } from 'bhivewebsocket/loader';

defineCustomElements (window);

• This can be used in any component

<bhive-websocket [attr.url]= "wsUrl" [attr.topics]= "wsTopics" (subscribe)= "getAlert($event)"></bhive-websocket>

React

• With an application built using the create-react-app script the easiest way to include the component library is to call defineCustomElements() from the index.js file
• The largest deficiencies that React currently has when it comes to working with standard HTML Custom Elements is that properties that contain non-scalar data (that is, data that is not a string or number) are not passed properly and custom events are not handled properly. The solution to both of these problems is to wrap the Custom Element in a React component, obtain a ref to the Custom Element, and use the ref in order to set the non-scalar properties and add event listeners via addEventListener.

Example

import { applyPolyfills, defineCustomElements } from 'bhivewebsocket/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});

• The largest deficiencies that React currently has when it comes to working with standard HTML Custom Elements is that properties that contain non-scalar data (that is, data that is not a string or number) are not passed properly and custom events are not handled properly. The solution to both of these problems is to wrap the Custom Element in a React component, obtain a ref to the Custom Element, and use the ref in order to set the non-scalar properties and add event listeners via addEventListener.

Example

import React, { useRef, useEffect } from 'react';

const BehiveWebsocket = ({ url, topics, subscribe }) => {
    const elementRef = useRef(null);

    useEffect(() => {
        if(!elementRef.current){
            elementRef.current = {};
        }
        (elementRef.current).url = url;
        (elementRef.current).topics = topics;
        (elementRef.current).addEventListener('subscribe', subscribe);
    }, [url, topics, subscribe]);
    return (
        <div>
            <bhive-websocket ref={elementRef} url={url} topics={topics} subscribe = {subscribe}></bhive-websocket>
        </div>
    )
}

export default BehiveWebsocket;