import { style } from ‘../assets‘;
import { eventbus } from ‘../eventbus‘;
import { page, RootObject } from ‘../vm/page‘;
import * as d3 from ‘d3‘
import * as d3g from ‘d3-shape‘
import * as signalr from "@aspnet/signalr";
export class AreaMain {
    main: HTMLMainElement;
    constructor(private stp: style, private bus: eventbus, private vm: page) {
        
 
this.main = document.createElement(‘main‘);
        this.bus.load(this);
        let uid: RootObject;
        if (this.vm.uidata != undefined) {
            uid = this.vm.uidata
            this.initialView(this.main, uid);
            this.setCss(uid)
        }
        this.conn = undefined        
    }
    initialView(parent: HTMLMainElement, uid: RootObject): 
 
void {
        let div1 = document.createElement(‘div‘)
        let div2 = document.createElement(‘div‘)
        let div3 = document.createElement(‘div‘)
        this.init1(div1, uid)
        this.init2(div2, uid)
        this.init3(div3, uid)
        for (var i of [div1, div2, div3]) {
            parent.appendChild(i)
        }
    }
    
 
//#region ui components
    init1(parent: HTMLElement, uid: RootObject): void {
        var svg = d3.select(parent).append(‘svg‘)
            .attr(‘width‘, ‘100%‘)
        var g = svg.append(‘g‘)
            .attr(‘transform‘, ‘translate(250,10)‘)
        var r = g.append(‘rect‘)
            .attr(‘fill‘, ‘skyblue‘)
            .attr(‘width‘, 100)
            .attr(‘height‘, 100)
            .attr(‘transform‘, ‘rotate(20,10,10)‘)   
        r.on(‘click‘,()=>{
            if(this.conn!=undefined){
                this.testkk(this.conn)  // 這裏都不會執行的！
            }
        })
    }
    init2(parent: HTMLElement, uid: RootObject): void {
        parent.setAttribute(‘id‘, ‘div2‘)
        var ul = document.createElement(‘ul‘)
        parent.appendChild(ul)
        const connection = new signalr.HubConnectionBuilder()
            .withUrl("http://localhost:61866/chatHub")
            .build();
        this.conn = connection
        console.log(2250)
        console.log(this.conn)
        connection.on("ReceiveMessage", function (user, message) {
            var encodedMsg = user + " says " + message;
            var li = document.createElement("li");
            li.textContent = encodedMsg;
            ul.appendChild(li);
        });
        this.conn.start().then(x=>{
            console.log(x)
        })
    }
    init3(parent: HTMLElement, uid: RootObject): void {

    }
    //#endregion
    //#region change
    conn: signalr.HubConnection | undefined
    async testkk(connection: signalr.HubConnection) {
        await connection.start();
        await connection.invoke("SendMessage", ‘user‘, ‘message‘);
    }
    //#endregion
    setCss(uid: RootObject): void {
        this.stp.create(‘#div2‘)
        .insert(‘height‘,‘600px‘)
        .insert(‘background-color‘,‘#e8e8e9‘)
        this.stp.create(‘#div2>ul‘)
            .insert(‘list-style‘, ‘none‘)
    }
}

這是我自己做的小項目裏的代碼 ，用C#來做這個是走得通的，但ts不行，見紅字那裏，

原因我猜測是因為，r.on(... 這裏這個r 的作用域只是屬性 Init1 方法的，在js, ts裏方法的權限很大，它和 this.conn不在同一個作用域裏，所以在r的作用域中，this.conn的值 只是處於 constructor本部

裏設置的那個值，不知道 有沒有朋友 也遇到 過類似 的情形，歡迎跟貼討論

ts 與 C#的 一個差異的地方