Add panel where users can be listed as they join.

src/client/public/index.css

@@ -11,3 +11,15 @@
 	height: 300px;
 	margin: 0 0 10px 0;
 }
+
+#panel {
+	position: absolute;
+	top: 8px;
+}
+
+#panelUsers {
+	width: 250px;
+	resize: none;
+	height: 300px;
+	margin: 0 0 10px 0;
+}

src/client/public/index.html

@@ -27,6 +27,9 @@
 			<button id="btnSend">Send</button>
 			<button id="btnLeave">Leave</button>
 		</div>
+		<div id="panel">
+			<textarea id="panelUsers" readonly="1"></textarea>
+		</div>
 		<script src="index.js"></script>
 	</body>
 </html>

src/client/public/index.js

@@ -1,15 +1,18 @@
 $(function onload() {
 	const ws = new WebSocket(`ws://${location.host}`);
 	let username = '';
+	let tArrUsers = [];
 
 	const objLogin = $('#login');
 	const objChat = $('#chat');
+	const objPanel = $('#panel');
 	const txtUsername = $('#txtUsername');
 	const btnJoin = $('#btnJoin');
 	const txtChat = $('#txtChat');
 	const txtMessage = $('#txtMessage');
 	const btnSend = $('#btnSend');
 	const btnLeave = $('#btnLeave');
+	const panelUsers = $('#panelUsers');
 
 	const chatScroll = () => {
 		txtChat.prop('scrollTop', txtChat.prop('scrollHeight'));
@@ -27,7 +30,29 @@ $(function onload() {
 		chatScroll();
 	};
 
+	const panelEmpty = () => {
+		panelUsers.val('');
+	};
+
+	const addUser = (pUserName) => {
+		tArrUsers.push(pUserName);
+		panelAddUsers(tArrUsers);
+	};
+
+	const removeUser = (pUserName) => {
+		tArrUsers.splice(tArrUsers.indexOf(pUserName), 1);
+		panelAddUsers(tArrUsers);
+	};
+
+	const panelAddUsers = (pArr) => {
+		panelEmpty();
+		pArr.sort().forEach((pName, pIndex) => {
+			panelUsers.val(`${panelUsers.val()}${pIndex + 1}. ${pName}\n`);
+		});
+	};
+
 	objChat.hide();
+	objPanel.hide();
 	txtUsername.focus();
 
 	ws.addEventListener('message', (evt) => {
@@ -40,10 +65,13 @@ $(function onload() {
 					username = s;
 					objLogin.hide();
 					objChat.show();
+					objPanel.show();
 					txtUsername.val('');
 					chatEmpty();
+					panelEmpty();
 					txtMessage.focus();
 					chatWriteLine(`You are connected! (${s})`);
+					getUsers();
 				} else {
 					alert(r);
 					txtUsername.focus();
@@ -66,18 +94,26 @@ $(function onload() {
 				const r = objData.r;
 				if (r === 'OK') {
 					chatEmpty();
+					panelEmpty();
 					username = '';
 					objLogin.show();
 					objChat.hide();
+					objPanel.hide();
 					txtUsername.val('').focus();
 				} else {
 					alert(r);
 				}
 				break;
 			}
+			case 'getUsersResp': {
+				tArrUsers = objData.userList;
+				panelAddUsers(tArrUsers);
+				break;
+			}
 			case 'join': {
 				const username = objData.d;
 				chatWriteLine(`User connect (${username})`);
+				addUser(username);
 				break;
 			}
 			case 'chat': {
@@ -89,6 +125,7 @@ $(function onload() {
 			case 'leave': {
 				const username = objData.d;
 				chatWriteLine(`User disconnect (${username})`);
+				removeUser(username);
 				break;
 			}
 			default: {
@@ -97,6 +134,14 @@ $(function onload() {
 		}
 	});
 
+	const getUsers = () => {
+		ws.send(
+			JSON.stringify({
+				h: 'getUsers',
+			})
+		);
+	};
+
 	btnJoin.click(() => {
 		const username = txtUsername.val();
 		ws.send(
@@ -108,7 +153,7 @@ $(function onload() {
 	});
 
 	btnSend.click(() => {
-		const message = txtMessage.val();
+		const message = $.trim(txtMessage.val());
 		if (message !== '') {
 			ws.send(
 				JSON.stringify({
@@ -117,6 +162,7 @@ $(function onload() {
 				})
 			);
 		} else {
+			txtMessage.val('');
 			txtMessage.focus();
 		}
 	});

src/server/WebSocket.ts

@@ -24,12 +24,21 @@ import { UPPERCASE_USERNAMES } from './Configuration.ts';
 type WSMsgJoin = { h: 'join'; d: string };
 type WSMsgLeave = { h: 'leave'; d: string };
 type WSMsgChat = { h: 'chat'; s: string; d: string };
-type WSMessageClient = WSMsgJoin | WSMsgLeave | WSMsgChat;
+type WSMsgGetUsers = { h: 'getUsers' };
+type WSMessageClient = WSMsgJoin | WSMsgLeave | WSMsgChat | WSMsgGetUsers;
 
 type WSMsgJoinResp = { h: 'joinResp'; s: string; r: string };
 type WSMsgLeaveResp = { h: 'leaveResp'; r: string };
 type WSMsgChatResp = { h: 'chatResp'; d: string; r: string };
-type WSMessageServer = WSMsgJoinResp | WSMsgLeaveResp | WSMsgChatResp;
+type WSMsgGetUsersResp = {
+	h: 'getUsersResp';
+	userList: Array<string>;
+};
+type WSMessageServer =
+	| WSMsgJoinResp
+	| WSMsgLeaveResp
+	| WSMsgChatResp
+	| WSMsgGetUsersResp;
 
 type WSMessage = WSMessageClient | WSMessageServer;
 
@@ -77,6 +86,10 @@ export async function HandleWSConn(pWebSocket: WebSocket): Promise<void> {
 						}
 						break;
 					}
+					case 'getUsers': {
+						await RespondGetUsers(_connInfo);
+						break;
+					}
 					default: {
 						console.log('Invalid message', objEvent);
 						break;
@@ -129,6 +142,15 @@ async function RespondChat(
 	});
 }
 
+async function RespondGetUsers(pConnInfo: ConnInfo) {
+	return Respond(pConnInfo, {
+		h: 'getUsersResp',
+		userList: (await GetConnections()).map(
+			(pConnection) => pConnection.conn.name
+		),
+	});
+}
+
 function BroadcastJoin(pSrcInfo: ConnInfo) {
 	const { id: _SenderId, conn: _SenderConn } = pSrcInfo;
 	const { name: _SenderName } = _SenderConn;