gameClient/assets/scripts/login/loginPanel.ts

import { _decorator, Button, Component, EditBox, Label, Node } from 'cc'
import { WsClient } from '../network/wsclient'
const { ccclass, property } = _decorator

@ccclass('loginPanel')
export class loginPanel extends Component {
  @property(EditBox)
  private usernameInput: EditBox = null // 用户名输入框
  @property(Label)
  private statusLable: Label = null // 状态提示标签
  @property(Button)
  private loginButton: Button = null // 登录按钮

  // 组件初始化完成后调用
  start() {
    this.loginButton.node.on(Button.EventType.CLICK, this.onLoginButtonClick, this)
    // 监听websocket消息事件
    window.addEventListener('ws-message', this.onMessage.bind(this))
  }

  protected onDestroy(): void {
    window.removeEventListener('ws-message', this.onMessage.bind(this))
  }

  // 登录按钮点击处理函数
  private onLoginButtonClick() {
    const username = this.usernameInput.string.trim()
    if (!username) {
      this.statusLable.string = '请输入用户名'
      return
    }
    const ws = WsClient.Instance
    ws.connect('ws://echo.websocket.org')
    this.statusLable.string = '正在连接服务器...'
    setTimeout(() => {
      const loginMsg = {
        type: 'login',
        username: username,
      }
      ws.send(loginMsg)
    }, 1000)
  }

  private onMessage(event: CustomEvent) {
    try {
      const message = JSON.parse(event.detail) // 解析消息内容
      if (message.type === 'loginSuccess') {
        this.statusLable.string = '登录成功'
        this.node.active = false
      } else if (message.type === 'loginError') {
        this.statusLable.string = '登录失败:' + message.reason
      }
    } catch (error) {
      console.log('收到非json消息:', event.detail)
    }
  }

  update(deltaTime: number) {}
}