websocket封装 案例

思路： 
	封装webscoket 需要考虑的问题
		1、以类的方式封装 调用一个实例
		2、链接
		3、关闭
		4、错误处理
		5、发送消息
		6、链接状态
		7、销毁
		8、日志查看

	根据以上问题定义方法：
		
- create(): 创建一个新的 WebSocket 连接。
- onCloseHandler(event?: CloseEvent): 当 WebSocket 连接关闭时的处理函数。
- onErrorHandler(event?: Event): 当 WebSocket 连接发生错误时的处理函数。
- onOpenHandler(event?: Event): 当 WebSocket 连接成功打开时的处理函数。
- onMessageHandler(event: MessageEvent | WebSocketData): 当 WebSocket 接收到消息时的处理函数。
- constructor(serverInfo: ServerInfo, showLog: boolean = false): 类的构造函数，接收服务器信息和一个可选的日志显示参数。
- isConnected: 一个 getter 方法，用于判断 WebSocket 连接是否处于连接状态。
- destroy(): 销毁 WebSocket 连接。
- sendMessage(data: string): 向 WebSocket 连接发送消息。
- log(...args: any[]): 一个用于显示日志的方法。

import BufferCoder from './codec/buffer'; // 
import decode from './codec/decode'; // 解码用 根据业务封装
import encode from './codec/encode'; // 编码用 根据业务封装

export interface ServerInfo {
    serverType: string;
    host: string;
    port: string | number;
    ssl?: boolean;
}

type WebSocketData = string[] | { [key: string]: string } | undefined;

export default class COMWebSocket {
    private showLog: boolean;
    private serverInfo: ServerInfo;
    private bufferCoder: BufferCoder = new BufferCoder();
    private socket?: WebSocket;
    private create(): void {
        const { host, port, ssl = true } = this.serverInfo;
        const url = `${ssl ? 'wss' : 'ws'}://${host}${port ? `:${port}` : ''}`;

        this.socket = new WebSocket(url);
        this.socket.binaryType = 'arraybuffer';
        this.socket.onclose = this.onCloseHandler.bind(this);
        this.socket.onerror = this.onErrorHandler.bind(this);
        this.socket.onopen = this.onOpenHandler.bind(this);
        this.socket.onmessage = this.onMessageHandler.bind(this);

        this.log(`connecting ${url} ...`);
    }

    private onCloseHandler(event?: CloseEvent): void {
        this.log('onclose', event || 'from worker');

        if (this.onclose) {
            this.onclose.call(this);
        }

        this.destroy();
    }

    private onErrorHandler(event?: Event): void {
        this.log('onerror', event || 'from worker');

        if (this.onerror) {
            this.onerror.call(this);
        }

        this.destroy();
    }

    private onOpenHandler(event?: Event): void {
        this.log('onopen', event || 'from worker');

        if (this.onopen) {
            this.onopen.call(this);
        }
    }

    private onMessageHandler(event: MessageEvent | WebSocketData): void {
        this.bufferCoder.decode((<MessageEvent>event).data, (data) => {
            this.log('onmessage', data);

            if (this.onmessage) {
                this.onmessage.call(this, decode(data));
            }
        });
    }

    onclose?: (this: COMWebSocket, event?: CloseEvent) => any;
    onerror?: (this: COMWebSocket, event?: Event) => any;
    onopen?: (this: COMWebSocket, event?: Event) => any;
    onmessage?: (this: COMWebSocket, event: MessageEvent | WebSocketData) => any;

    constructor(serverInfo: ServerInfo, showLog: boolean = false) {
        this.showLog = showLog;
        this.serverInfo = serverInfo || {};

        this.create();
    }

    get isConnected(): boolean {
        return !!(this.socket && this.socket.readyState === 1);
    }

    destroy(): void {
        if (this.socket) {
            if (this.isConnected) {
                this.socket.close();
            }

            this.socket.onclose = null;
            this.socket.onerror = null;
            this.socket.onopen = null;
            this.socket.onmessage = null;
            delete this.socket;

            this.log('close tcp client!');
        }
    }

    sendMessage(data: string): void {
        const stt: string = encode(data);

        this.log('send', stt);

        if (this.isConnected && stt) {
            (<WebSocket>this.socket).send(this.bufferCoder.encode(stt));
        }
    }

    log(...args: any[]): void {
        if (this.showLog) {
            console.log('[@Shark/net - DYWebSocket]: ', this.serverInfo.serverType, ...args);
        }
    }
}

调用 参考

import COMWebSocket, { ServerInfo } from './webSocket';

// 定义服务器信息
const serverInfo: ServerInfo = {
    serverType: 'Demo Server',
    host: 'example.com',
    port: 8080,
    ssl: true
};

// 创建 COMWebSocket实例
const comWebSocket= new COMWebSocket(serverInfo, true);

// 设置事件处理函数
comWebSocket.onopen = () => {
    console.log('WebSocket 连接已打开');
    comWebSocket.sendMessage('Hello, WebSocket!');
};

comWebSocket.onmessage = (event) => {
    console.log('收到消息:', event);
};

comWebSocket.onclose = () => {
    console.log('WebSocket 连接已关闭');
};

comWebSocket.onerror = (error) => {
    console.log('WebSocket 连接发生错误:', error);
};

// 在需要时，可以销毁 WebSocket 连接
// comWebSocket.destroy();