Day12：Select Room(选择特定房间频道)

全文同步於个人 Docusaurus Blog

本章的需求，解决首页进入前，如果有特定频道可以选择，当使用者进入时，也要显示出对应的该频道。

HTML & CSS

样式的部分比较随意，和 input 共用同一组 class，并移除 .enter-btn 的 margin，统一移到 .enter-input。

<body>
  <main class="wrapper">
    <section class="enter-box">
      // ...
      <select class="enter-input" name="rooms-select" id="rooms-select">
        <option value="Cars">Cars</option>
        <option value="Trucks">Trucks</option>
      </select>
    </section>
  </main>
</body>

.enter-input {
  width: 200px;
  height: 30px;
  border-radius: 6px;
  margin-bottom: 12px;  // add
}

.enter-btn {
  // ...
  // margin-top: 12px; // remove
}

状态

先在 stroe 建立 function，用於保存 room 的 ID，方便存取使用。同时将原先的 code，进行合并整理。

// store.js
let username = null;
let socketId = null;
let activeChatGroup = [];
let roomId = 'Cars';

const getUserName = () => username;
const setUserName = (name) => (username = name);
const getSocketId = () => socketId;
const setSocketId = (id) => (socketId = id);
const getActiveChatGroup = () => activeChatGroup;
const setActiveChatGroup = (chatGroup) => (activeChatGroup = chatGroup);
const getRoomId = () => roomId;
const setRoomId = (id) => (roomId = id);

export default {
  getUserName,
  setUserName,
  getSocketId,
  setSocketId,
  getActiveChatGroup,
  setActiveChatGroup,
  getRoomId,
  setRoomId,
};

Client Side

当使用者点击下拉选单时，监听他所选择的项目，并将该项目的值存入 store。

// client.js
const roomSelect = document.getElementById('rooms-select');

roomSelect.addEventListener('change', (e) => {
  store.setRoomId(e.target.value);
});

Handler

维持使用 register-new-user 这组 socket，替原先传入的 userData 多增加一组 roomId。

// handler.js
const registerActiveSession = () => {
  const userData = {
    username: store.getUserName(),
    roomId: store.getRoomId(),
  };
  socket.emit('register-new-user', userData);
};

// server.js
socket.on('register-new-user', (userData) => {
  const { username, roomId } = userData;

  const newPeer = {
    username,
    socketId: socket.id,
    roomId,
  };

  socket.join(roomId);

  // ...
});

UI

页面渲染的部分，基本 copy 公共频道的做法，只是调整传入的 id，让频道显示名称改为对应的房间名。

// ui.js
const goToChat = () => {
  // ...
  createRoomChat();
};

const createRoomChat = () => {
  const roomId = store.getRoomId();

  const chatTitle = roomId;
  const messageContainerID = `${roomId}-message`;
  const messageInputID = `${roomId}-input`;
  const chatContainerID = roomId;

  const data = {
    chatTitle,
    messageContainerID,
    messageInputID,
    chatContainerID,
  };

  const room = element.getChatList(data);
  const roomWrapper = document.querySelector('.chat-list');
  roomWrapper.appendChild(room);
};

select room