Day23：进入聊天室状态判断

在书写逻辑之前，先厘清程序要达成的需求是什麽?

1. 页面上会有两个组件，一个是登入用，另一个则是用来显示讯息列表。
2. 当玩家输入名称後，页面需要切换到显示讯息列表的组件，所以这两个组件需要使用 v-if 来判断。
3. 当不同玩家登入时，讯息列表显示出该名玩家的登入讯息。

HTML

login-wrapper 是登入组件用的，chat-wrapper 则是讯息列表组件，使用 isShow 作为变数来切换判断。

当然，玩家登入时输入的名称，也必须使用 v-model 来双向绑定，同时进入时则触发对应的函式。

<div id="app">
  // login component
  <div v-if="isShow" class="login-wrapper">
    <input v-model="username" class="login-input" type="text" />
    <button @click="logingChat()">Go Chat</button>
  </div>
  
  // chat component
  <div v-else class="chat-wrapper">
    <h2>Hello : {{ username }}</h2>
    <div>
      <input v-model="message" class="input-message" type="text" />
      <button type="button" class="send-btn" @click="sendMessage()">
        Send Message
      </button>
      <ul class="message-wrapper">
        <li v-for="(item, index) in list" :key="index + item">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</div>

client

data 需要放入上面谈到的变数

data: {
    // ...
    username: '',
    isShow: true,
},

当玩家输入名称後，点击触发登入的函式，先做第一步检查，避免玩家在未输入名称的状况下也进行登入。

接着，再给 server-side 送出资料时的格式，添加一个事件，进行判断这是登入的资料还是送出讯息的资料，并使用 JSON.stringify() 来处理。

methods: {
    logingChat() {
      if (this.username.trim() === '') {
        alert('请输入姓名');
        return;
      }
      this.isShow = false;
      this.ws.send(
        JSON.stringify({
          event: 'login',
          message: this.username,
        })
      );
    },
    sendMessage() {
      this.list.push(this.message);
      this.ws.send(
        JSON.stringify({
          event: 'message',
          message: this.message,
        })
      );
      this.message = '';
    },
}

至於监听讯息的部分，因为需要显示出每个玩家登入时的讯息，所以也透过事件判断来显示。

onMessage(event) {
  let obj = JSON.parse(event.data);
  if (obj.event === 'login') {
    this.list.push(`Welcome ${obj.message} enter chat!`);
  } else {
    this.list.push(obj.message);
  }
},