iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 13

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


上一篇
Day11:Disconnect Chat(關閉連線頻道)
下一篇
Day13:Send Message To Room(發送訊息到特定房間)
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言