How to implement WebSocket API JavaScript application with TypeScript

    	
            
//web_app.ts
//Initiate WebSocket connection

function connect(url: string): void {

    ws = new WebSocket(url, protocol); 

    ws.onopen = onOpen;

    ws.onmessage = onMessage;

    ws.onerror = onError;

    ws.onclose = onClose;

}
//indicates that the connection is ready to send and receive data

function onOpen(event: any): void {

    console.log("connected");
//$("#btnConnect").html("Connected");
    btnConnect.innerHTML = "Connected";

}
//An event listener to be called when a message is received from the server

function onMessage(event: any): void {

}
//An event listener to be called when an error occurs. This is a simple event named "error".

function onError(event: any): void {

    console.log(JSON.stringify(event.data));

}
//An event listener to be called when the WebSocket connection's readyState changes to CLOSED.

function onClose(event: any): void {

    console.log(JSON.stringify(event.data));

}

        
        Copy
    

    	
            
//json_msg_interface.ts
//Interface for Login domain JSON message

export interface JSONLogin {

    ID:number;

    Domain:string;

    Key: JSONLoginKey;

}
//Interface for Login domain's Key attribute JSON message

export interface JSONLoginKey{

    Elements: JSONLoginKeyElements;

    Name: string;

}
//Interface for Login domain's Key's Elements attribute JSON message

export interface JSONLoginKeyElements{

    ApplicationId: string;

    Position: string;

}

        
        Copy
    

    	
            
//json_msg_classes.ts
import { JSONLogin } from "./json_msg_interface";

import { JSONLoginKey } from "./json_msg_interface";

import { JSONLoginKeyElements } from "./json_msg_interface";
export { LoginMsg };
const loginDomain: string = "Login";
class LoginMsg implements JSONLogin {
    ID: number;
    Domain: string = loginDomain;
    Key: JSONLoginKey;
    constructor(
        ID: number,
        Name: string,
        ApplicationId: string,
        Position: string
    ) {     this.ID = ID;
    let loginMsgKey_class = new LoginMsgKey(Name, ApplicationId, Position);
    this.Key = loginMsgKey_class;
    }
}
class LoginKeyElements implements JSONLoginKeyElements {
    ApplicationId: string;
    Position: string;
    constructor(ApplicationId: string, Position: string) {
        this.ApplicationId = ApplicationId;
        this.Position = Position;
    }
}
class LoginMsgKey implements JSONLoginKey {
    Name: string;
    Elements: JSONLoginKeyElements;
    constructor(Name: string, ApplicationId: string, Position: string) {
        this.Name = Name;
        let loginKeyElements_class = new loginKeyElements(ApplicationId, Position);
        this.Elements = loginKeyElements_class;
    }
}

        
        Copy
    

    	
            
//web_app.ts
 
import { LoginMsg } from "./json_msg_classes";
const loginID: number = 1;
 
//Create the Login JSON message from LoginMsg class and send it to Real-Time Advanced Distribution Server WebSocket
function sendLogin(username: string): void {
  let login: LoginMsg = new LoginMsg(loginID, username, "777", "127.0.0.1");
  ws.send(JSON.stringify(login));
}

        
        Copy
    

    	
            
//web_app.ts
let inMessagePre: any;
//An event listener to be called when a message is received from the server
function onMessage(event: any): void {
    let incomingdata = JSON.parse(event.data.toString());
//Iterate each incoming JSON message
    let data:any = null;
    for (let index = 0; index < incomingdata.length; index++) {
        data = incomingdata[index];
        display(inMessagePre,JSON.stringify(incomingdata[index], undefined, 2));
    }
}
//display string value in selected element
function display(el:any, msg:string): void{
    el.innerHTML = msg;
}
window.onload = () => {
    ...
    inMessagePre = document.getElementById("inMessagePre");
}

        
        Copy
    

    	
            
//json_msg_interface.ts 
//Interface for Market Price domain item request JSON message 
export interface JSONItemRequestMsg { 
    ID: number; 
    Key: JSONItemRequestKey; 
} 
//Interface for Market Price domain item request's key attribute JSON message, service name is an optional 
export interface JSONItemRequestKey { 
    Name: string; 
    Service?: string; 
}

        
        Copy
    

    	
            
//json_msg_interface.ts 
import { JSONItemRequestMsg } from "./json_msg_interface"; 
import { JSONItemRequestKey } from "./json_msg_interface"; 
export { ItemRequestMsg }; 
class ItemRequestMsg implements JSONItemRequestMsg { 
    ID: number; 
    Key: JSONItemRequestKey; 
    constructor(
        ID: number, 
        Name: string, 
        Service: string
    ) { 
    this.ID = ID; 
    let itemrequestKey_class = new ItemRequestMsgKey(Name, Service); 
    this.Key = itemrequestKey_class; 
    } 
} 
class ItemRequestMsgKey implements JSONItemRequestKey { 
    Name: string; 
    Service?: string; 
    constructor(
        Name: string, 
        Service?: string
    ) { 
            this.Name = Name; 
            if (Service !==''){
            this.Service = Service;
        } 
    } 
}

        
        Copy
    

    	
            
//web_app.ts
 
import { ItemRequestMsg } from "./json_msg_classes";
let itemID: number = 0;
let itemname:string = "";
 
//Create the Item Request JSON message from ItemRequestMsg class and send it to Real-Time Advanced Distribution Server WebSocket
function sendItemrequest(service: string, item_name: string): void {
  //set Item ID value
  if (itemID === 0) {
    itemID = loginID + 1;
  } else {
    itemID += 1;
  }
 
  let itemrequest: ItemRequestMsg = new ItemRequestMsg(
    itemID,
    item_name,
    service
  );
 
  ws.send(JSON.stringify(itemrequest));
  display(outMessagePre,JSON.stringify(itemrequest));
 
}
 
window.onload = () => {
 
  btnSubscribe.addEventListener("click", function() {
    let txtServiceName:any = document.getElementById("txtServiceName");
    let txtItemName:any = document.getElementById("txtItemName");
    itemname = txtItemName.value;
    sendItemrequest(txtServiceName.value, itemname);
  });
};

        
        Copy
    

    	
            
//web_app.ts

let inMessagePre: any;
let itemname:string = "";
//An event listener to be called when a message is received from the server
function onMessage(event: any): void {
    let incomingdata = JSON.parse(event.data.toString());
//Iterate each JSON message and send it to market_price_app.js
    let data:any = null;
    for (let index = 0; index < incomingdata.length; index++) {
        data = incomingdata[index];
        if(data.Type === 'Refresh' && data.Key.Name === itemname){
//Push subscription item name and ID to selection box
            pushIDstoDropDownMenu(data.Key.Name, data.ID);
        }
    display(inMessagePre,JSON.stringify(incomingdata[index], undefined, 2));
    }
}
//display string value in selected element
function display(el:any, msg:string): void{
    el.innerHTML = msg;
}
window.onload = () => {
    ...
    inMessagePre = document.getElementById("inMessagePre");
}
function pushIDstoDropDownMenu(itemname:string, id:number):void {
    let cb:any = document.getElementById("listenerCombo");
    let opt:any = document.createElement("option");
    opt.value = id;
    opt.text = `${itemname} ID ${id}`;
    cb.options.add(opt);
}

        
        Copy
    

    	
            
//json_msg_interface.ts
//Interface for close JSON message
export interface JSONClose {
    Domain?: string;
    ID: number;
    Type: string;
}

        
        Copy
    

    	
            
//json_msg_interface.ts 
import { JSONClose } from "./json_msg_interface"; 
export {CloseMsg}; 
class CloseMsg implements JSONClose{ 
    Domain?: string; 
    ID: number; 
    Type: string; 
    constructor(ID: number, Domain?: string) { 
        this.ID = ID; 
        this.Domain = Domain; 
        this.Type = "Close"; 
    } 
}

        
        Copy
    

    	
            
//web_app.ts 
window.onload = () => { 
    btnUnSubscribe.addEventLisener("click", function() { 
//get Selected ID to unsubscribe let cb:any =     document.getElementById("listenerCombo"); 
    if(cb.selectedIndex === -1){ 
//If user does not select any ID, alert user 
        window.alert("Select ID first"); return; 
    } 
//get unsubscribe ID from HTML select element 
    let unsubID:number = parseInt(cb.options[cb.selectedIndex].value); 
//Unsubscribe sendItemCloserequest(unsubID); 
//remove unsubscribe ID from HTML select element 
    cb.removeChild(cb.options[cb.selectedIndex]); 
    }); 
};

        
        Copy
    

    	
            
//web_app.ts 
import { CloseMsg } from "./json_msg_classes"; 
//Create the Item Close Request JSON message from ItemCloseRequestMsg class and send it to ADS WebSocket 
function sendItemCloserequest(unsubID:number): void { 
//let closeitemrequestMsg: ItemCloseRequestMsg = new ItemCloseRequestMsg(itemID); 
    let closeitemrequestMsg: CloseMsg = new CloseMsg(unsubID);
     ws.send(JSON.stringify(closeitemrequestMsg)); 
    display(outMessagePre,JSON.stringify(closeitemrequestMsg)); 
}

        
        Copy
    

    	
            
//web_app.ts
 
//An event listener to be called when a message is received from the server
 
function onMessage(event: any): void {
 
  let incomingdata = JSON.parse(event.data.toString());
 
  //Iterate each JSON message and send it to market_price_app.js
  let data:any = null;
  for (let index = 0; index < incomingdata.length; index++) {
    data = incomingdata[index];
 
    if(data.Type === 'Refresh' && data.Key.Name === itemname){
      //Push subscription item name and ID to selection box
      pushIDstoDropDownMenu(data.Key.Name, data.ID);
    }
    display(inMessagePre,JSON.stringify(incomingdata[index], undefined, 2));
    //If incoming message is PING (server ping)
    if (incomingdata[index].Type === "Ping") {
      sendPong();
    }
  }
}
 
//Create the client PONG message  and send it to Real-Time Advanced Distribution Server WebSocket
function sendPong(): void {
  let pong: any = { Type: "Pong" };
  ws.send(JSON.stringify(pong));
  display(outMessagePre,JSON.stringify(pong));
}

        
        Copy
    

    	
            
$>git clonegit@github.com:Refinitiv-API-Samples/Example.EWA.TypeScript.WebApplication.git

        
        Copy
    

    	
            
set https_proxy=http://<proxy.server>:<port>

        
        Copy