Ts 监听模式

interface Iserver {
    nameChange (value:string):void;
}
// 观察者
class GUser implements Iserver {
    nameChange (value:string) {
        document.write("监听到当前修改了数据"+ value+"\n\r");
    }
}

// 监听
class people {
    private _name:string = "";
    jianting :Array<Iserver> = new Array<Iserver>;

    set name(value:string) {
        this._name = value;
        for (let obj of this.jianting) {
            obj.nameChange(this._name);
        }
    } 

    get name ():string {
        return this._name;
    }
}
let Pos = new people();
let test = new GUser();
let test2 = new GUser();
Pos.jianting.push(test);
Pos.jianting.push(test2);
Pos.name = "张三"

Pos.name = "李四"

Pos.name = "王麻子"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于Vue3和TypeScript封装Websocket单点登录,我可以给您提供一些思路和代码示例。 首先,我们需要安装`socket.io-client`库,用于在Vue3中建立和管理Websocket连接。可以通过以下命令进行安装: ``` npm install socket.io-client ``` 然后,我们可以在Vue3中创建一个`WebSocketService`类,用于管理Websocket连接和消息的发送和接收。以下是一个示例代码: ```typescript import { io, Socket } from "socket.io-client"; export class WebSocketService { private static instance: WebSocketService; private socket: Socket | undefined; private constructor() {} public static getInstance(): WebSocketService { if (!WebSocketService.instance) { WebSocketService.instance = new WebSocketService(); } return WebSocketService.instance; } public connect(url: string, token: string): void { this.socket = io(url, { auth: { token }, }); this.socket.on("connect", () => { console.log("Websocket connected!"); }); this.socket.on("disconnect", () => { console.log("Websocket disconnected!"); }); } public send(event: string, data: any): void { if (this.socket) { this.socket.emit(event, data); } else { console.error("Websocket not connected!"); } } public on(event: string, callback: (data: any) => void): void { if (this.socket) { this.socket.on(event, callback); } else { console.error("Websocket not connected!"); } } public off(event: string, callback: (data: any) => void): void { if (this.socket) { this.socket.off(event, callback); } else { console.error("Websocket not connected!"); } } public disconnect(): void { if (this.socket) { this.socket.disconnect(); } else { console.error("Websocket not connected!"); } } } ``` 这个类使用了单例模式,确保我们只创建一个Websocket连接。`connect`方法用于建立连接并验证用户身份,`send`方法用于发送消息,`on`方法用于监听消息,`off`方法用于取消监听,`disconnect`方法用于断开连接。 在Vue3组件中,我们可以使用`setup`函数创建一个`WebSocketService`实例,并在需要的时候调用它的方法。以下是一个示例代码: ```typescript import { defineComponent, onMounted } from "vue"; import { WebSocketService } from "./WebSocketService"; export default defineComponent({ name: "WebSocketDemo", setup() { const webSocketService = WebSocketService.getInstance(); onMounted(() => { const url = "ws://localhost:3000"; const token = "mytoken"; webSocketService.connect(url, token); }); webSocketService.on("message", (data) => { console.log("Received message:", data); }); const sendMessage = () => { const data = { text: "Hello, world!" }; webSocketService.send("message", data); }; return { sendMessage, }; }, }); ``` 在这个组件中,我们在`onMounted`钩子中调用`connect`方法建立连接。然后,我们使用`on`方法监听`message`事件,并定义了一个`sendMessage`方法用于发送消息。 这就是一个简单的Vue3和TypeScript封装Websocket单点登录的示例。希望对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值