https://scalecube.github.io/api-sandbox/components/connection/Connection.js

1var self;
2
3class NoConnection {
4    constructor(){};
5    isConnected(){
6        return false;
7    }
8
9    onStatusChanged(statusCallback){
10        this.statusChangedCallback = statusCallback;
11    };
12
13};
14
15class Connection {
16
17    constructor(containerId) {
18        let html = this.view();
19        appendHtmlElement(containerId,html);
20
21        var settings = new Settings('app-settings-modal');
22
23        this.transport = new NoConnection ();
24
25        this.connectBtn = document.getElementById("connect");
26        this.connectBtn.onclick = function () {
27            self.onConnect();
28            self.connect(currentSettings.url);
29        };
30
31        // Get the button that opens the modal
32        this.disconnectBtn = document.getElementById("disconnect");
33        this.disconnectBtn.onclick = function () {
34            self.onDisconnect();
35            self.disconnect();
36        };
37        self = this;
38        this.toggleButton(self.disconnectBtn);
39
40    }
41
42    onConnectionChanged (event) {
43
44    };
45
46    view() {
47        return "<div style='background: #323c4a;' id='actions'>"
48                + "<div id='app-settings-modal' class='modal'></div>"
49                + "<button id='app-settings-btn' class='top-bar-button' title='settings' >"
50                    + "<svg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'>"
51                        + "<line x1='4' y1='21' x2='4' y2='14'></line><line x1='4' y1='10' x2='4' y2='3'></line>"
52                        + "<line x1='12' y1='21' x2='12' y2='12'></line><line x1='12' y1='8' x2='12' y2='3'></line>"
53                        + "<line x1='20' y1='21' x2='20' y2='16'></line><line x1='20' y1='12' x2='20' y2='3'></line>"
54                        + "<line x1='1' y1='14' x2='7' y2='14'></line><line x1='9' y1='8' x2='15' y2='8'></line>"
55                        + "<line x1='17' y1='16' x2='23' y2='16'></line>"
56                    + "</svg>Settings"
57                + "</button>"
58                + "<button class='top-bar-button' id='connect'>Connect</button>"
59                + "<button class='top-bar-button' id='disconnect'>Disconnect</button>"
60            + "</div>";
61    }
62    onConnect(){
63        self.connectBtn.disabled = true;
64        self.disconnectBtn.disabled = false;
65    }
66    onDisconnect(){
67        self.disconnectBtn.disabled = true;
68        self.connectBtn.disabled = false;
69    }
70    toggleButton(btn){
71        if (btn.disabled === false) {
72            btn.disabled = true;
73        } else {
74            btn.disabled = false;
75        }
76    }
77    disconnect() {
78        if(self.transport.isConnected()) {
79            self.transport.disconnect();
80            console.error("Disconnected from: " + self.transport.uri);
81        } else {
82            console.info("The connection is already closed...");
83        }
84    }
85
86    connect(endpointUri) {
87        try {
88            if(currentSettings.transport === "WebSocket") {
89                this.transport = new WebSocketTransport(endpointUri);
90                console.info("Connected to: " + endpointUri);
91            } else if (currentSettings.transport === "RSocket") {
92                this.transport = new RSocketTransport(endpointUri);
93                console.info("Connected to: " + endpointUri);
94            } else {
95                console.error(currentSettings.transport + " is Comming soon... this transport is yet supported.");
96                return;
97            }
98
99            this.transport.onStatusChanged((event) => this.onConnectionChanged(event));
100
101            this.listen().subscribe(next => {
102                console.debug(JSON.stringify(next));
103            },error => {
104                if(error.__proto__.constructor.name === "CloseEvent") {
105                    self.onDisconnect();
106                }
107                console.error(error.__proto__.constructor.name + " on " +  error.currentTarget.url + " encounter error: " + error.type + " reason code: " + error.code);
108            });
109        } catch (error){
110            console.error(JSON.stringify(error));
111        }
112    }
113    transport (){
114        return this.transport;
115    }
116
117    listen(){
118        return this.transport.listen();
119    }
120
121    send(msg) {
122        try {
123            if(this.transport.isConnected()){
124                if(currentSettings.transport === "WebSocket") {
125                    this.transport.next(JSON.parse(msg));
126                } else {
127                    this.transport.next(msg);
128                }
129                console.warn(msg);
130            } else {
131                console.error("The connection is currently Disconnected from endpoint: " + currentSettings.url + " first connect and try again.");
132            }
133        } catch (error) {
134            console.error(error);
135        }
136    }
137}