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本部
里设置的那个值,不知道 有没有朋友 也遇到 过类似 的情形,欢迎跟贴讨论