Skip to content
This repository was archived by the owner on Dec 2, 2022. It is now read-only.

Commit cee8e56

Browse files
AlexandrosSemAlexandrosSem
authored
Merge pull request #7 from Taulim/master
Update my repo
2 parents a97af76 + d2322ee commit cee8e56

File tree

5 files changed

+84
-52
lines changed

5 files changed

+84
-52
lines changed

‎src/client/public/index.css

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
#login,
2-
#chat {
3-
width: 600px;
1+
#loginWrapper,
2+
#chatWrapper {
3+
width: 800px;
44
margin: 0 auto;
55
text-align: center;
66
}
@@ -12,14 +12,23 @@
1212
margin: 0 0 10px 0;
1313
}
1414

15-
#panel {
16-
position: absolute;
17-
top: 8px;
18-
}
19-
20-
#panelUsers {
21-
width: 250px;
15+
#listUsers {
16+
width: 100%;
2217
resize: none;
2318
height: 300px;
2419
margin: 0 0 10px 0;
20+
white-space: pre;
21+
text-overflow: ellipsis;
22+
overflow-x: hidden;
23+
}
24+
25+
#panelUsers {
26+
display: inline-block;
27+
vertical-align: top;
28+
max-width: 200px;
29+
}
30+
31+
#panelChat {
32+
display: inline-block;
33+
max-width: 600px;
2534
}

‎src/client/public/index.html

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Deno WebSocket Chat</title>
6+
<title>Simple Chat</title>
77
<!-- link
88
href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAA3uDXAE9SSQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAgIAAAAAAAAAAAAAAAAAAgICAgICAgICAAAAAAAAAgEBAQEBAQEBAQIAAAAAAAIBAQEBAQEBAQECAAAAAAACAQEBAQEBAQEBAgAAAAAAAgEBAQEBAQEBAQICAgIAAAIBAQEBAQEBAQECAQEBAgACAQEBAQEBAQEBAgEBAQIAAgEBAQEBAQEBAQIBAQECAAIBAQEBAQEBAQECAQEBAgAAAgICAgICAgICAQEBAQIAAAAAAgEBAQEBAQEBAQECAAAAAAIBAQEBAQEBAQEBAgAAAAACAQEBAQEBAQEBAQIAAAAAAAICAgICAgICAgIAAO//AADP/wAAgD8AAAAfAAAAHwAAAB8AAAADAAAAAQAAAAEAAAABAAAAAQAAgAEAAOABAADgAQAA4AEAAPADAAA="
99
rel="icon"
@@ -17,18 +17,20 @@
1717
<link rel="stylesheet" href="index.css" />
1818
</head>
1919
<body>
20-
<div id="login">
20+
<div id="loginWrapper">
2121
<label>Username: <input type="text" id="txtUsername" /> </label>
2222
<button id="btnJoin">Join</button>
2323
</div>
24-
<div id="chat">
25-
<textarea id="txtChat" readonly="1"></textarea>
26-
<label>Message: <input type="text" id="txtMessage" /></label>
27-
<button id="btnSend">Send</button>
28-
<button id="btnLeave">Leave</button>
29-
</div>
30-
<div id="panel">
31-
<textarea id="panelUsers" readonly="1"></textarea>
24+
<div id="chatWrapper">
25+
<div id="panelUsers">
26+
<textarea id="listUsers" readonly="1"></textarea>
27+
</div>
28+
<div id="panelChat">
29+
<textarea id="txtChat" readonly="1"></textarea>
30+
<label>Message: <input type="text" id="txtMessage" /></label>
31+
<button id="btnSend">Send</button>
32+
<button id="btnLeave">Leave</button>
33+
</div>
3234
</div>
3335
<script src="index.js"></script>
3436
</body>

‎src/client/public/index.js

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
$(function onload() {
2+
const titleBase = document.title;
23
const ws = new WebSocket(`ws://${location.host}`);
4+
5+
let wsId = '';
36
let username = '';
4-
let tArrUsers = [];
7+
let lUsers = [];
58

6-
const objLogin = $('#login');
7-
const objChat = $('#chat');
8-
const objPanel = $('#panel');
9+
const loginWrapper = $('#loginWrapper');
10+
const chatWrapper = $('#chatWrapper');
911
const txtUsername = $('#txtUsername');
1012
const btnJoin = $('#btnJoin');
1113
const txtChat = $('#txtChat');
1214
const txtMessage = $('#txtMessage');
1315
const btnSend = $('#btnSend');
1416
const btnLeave = $('#btnLeave');
15-
const panelUsers = $('#panelUsers');
17+
const listUsers = $('#listUsers');
1618

1719
const chatScroll = () => {
1820
txtChat.prop('scrollTop', txtChat.prop('scrollHeight'));
@@ -30,47 +32,54 @@ $(function onload() {
3032
chatScroll();
3133
};
3234

33-
const panelEmpty = () => {
34-
panelUsers.val('');
35-
};
36-
3735
const addUser = (pUserName) => {
38-
tArrUsers.push(pUserName);
39-
panelAddUsers(tArrUsers);
36+
lUsers.push(pUserName);
37+
showUsers();
4038
};
4139

4240
const removeUser = (pUserName) => {
43-
tArrUsers.splice(tArrUsers.indexOf(pUserName), 1);
44-
panelAddUsers(tArrUsers);
41+
lUsers.splice(lUsers.indexOf(pUserName), 1);
42+
showUsers();
4543
};
4644

47-
const panelAddUsers = (pArr) => {
48-
panelEmpty();
49-
pArr.sort().forEach((pName, pIndex) => {
50-
panelUsers.val(`${panelUsers.val()}${pIndex + 1}. ${pName}\n`);
51-
});
45+
const showUsers = () => {
46+
listUsers.val(
47+
lUsers
48+
.sort()
49+
.map((x) => `- ${x}`)
50+
.join('\n')
51+
);
5252
};
5353

54-
objChat.hide();
55-
objPanel.hide();
54+
chatWrapper.hide();
5655
txtUsername.focus();
5756

5857
ws.addEventListener('message', (evt) => {
5958
const objData = JSON.parse(evt.data);
6059
switch (objData.h) {
60+
case 'connectResp': {
61+
const r = objData.r;
62+
if (r === 'OK') {
63+
wsId = objData.d;
64+
document.title = `${titleBase} - ${wsId}`;
65+
} else {
66+
alert(r);
67+
}
68+
break;
69+
}
6170
case 'joinResp': {
6271
const r = objData.r;
6372
if (r === 'OK') {
6473
const s = objData.s;
6574
username = s;
66-
objLogin.hide();
67-
objChat.show();
68-
objPanel.show();
75+
lUsers = [];
76+
loginWrapper.hide();
77+
chatWrapper.show();
6978
txtUsername.val('');
7079
chatEmpty();
71-
panelEmpty();
7280
txtMessage.focus();
7381
chatWriteLine(`You are connected! (${s})`);
82+
showUsers();
7483
getUsers();
7584
} else {
7685
alert(r);
@@ -94,20 +103,20 @@ $(function onload() {
94103
const r = objData.r;
95104
if (r === 'OK') {
96105
chatEmpty();
97-
panelEmpty();
106+
lUsers = [];
107+
showUsers();
98108
username = '';
99-
objLogin.show();
100-
objChat.hide();
101-
objPanel.hide();
109+
loginWrapper.show();
110+
chatWrapper.hide();
102111
txtUsername.val('').focus();
103112
} else {
104113
alert(r);
105114
}
106115
break;
107116
}
108117
case 'getUsersResp': {
109-
tArrUsers = objData.userList;
110-
panelAddUsers(tArrUsers);
118+
lUsers = objData.userList;
119+
showUsers();
111120
break;
112121
}
113122
case 'join': {

‎src/server/Connections.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { WebSocket } from 'https://deno.land/std@0.76.0/ws/mod.ts';
2+
import { v4 } from 'https://deno.land/std@0.76.0/uuid/mod.ts';
23

34
export type Connection = { ws: WebSocket; state: boolean; name: string };
45
export type ConnInfo = { id: string; conn: Connection };
@@ -24,10 +25,9 @@ export function GetConnections(): Promise<Array<ConnInfoRO>> {
2425
});
2526
}
2627

27-
let id = 0;
2828
export function AddConn(pWebSocket: WebSocket): Promise<ConnInfo> {
2929
return new Promise((resolve) => {
30-
const _id = (id++).toString();
30+
const _id = v4.generate();
3131
const objConn = { ws: pWebSocket, state: false, name: '' };
3232
Connections.set(_id, objConn);
3333
return resolve({ id: _id, conn: objConn });

‎src/server/WebSocket.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type WSMsgChat = { h: 'chat'; s: string; d: string };
2727
type WSMsgGetUsers = { h: 'getUsers' };
2828
type WSMessageClient = WSMsgJoin | WSMsgLeave | WSMsgChat | WSMsgGetUsers;
2929

30+
type WSMsgConnectResp = { h: 'connectResp'; d: string; r: string };
3031
type WSMsgJoinResp = { h: 'joinResp'; s: string; r: string };
3132
type WSMsgLeaveResp = { h: 'leaveResp'; r: string };
3233
type WSMsgChatResp = { h: 'chatResp'; d: string; r: string };
@@ -35,6 +36,7 @@ type WSMsgGetUsersResp = {
3536
userList: Array<string>;
3637
};
3738
type WSMessageServer =
39+
| WSMsgConnectResp
3840
| WSMsgJoinResp
3941
| WSMsgLeaveResp
4042
| WSMsgChatResp
@@ -47,6 +49,7 @@ export async function HandleWSConn(pWebSocket: WebSocket): Promise<void> {
4749
const { id: _connId, conn: _conn } = _connInfo;
4850
console.log(`Socket connected! :: ${_connId}`);
4951
try {
52+
await RespondeConnect(_connInfo, 'OK');
5053
for await (const event of pWebSocket) {
5154
if (typeof event === 'string') {
5255
const objEvent: WSMessage = JSON.parse(event);
@@ -113,6 +116,15 @@ export async function HandleWSConn(pWebSocket: WebSocket): Promise<void> {
113116
}
114117
}
115118

119+
async function RespondeConnect(pConnInfo: ConnInfo, pStatus: string) {
120+
const { id: _Id } = pConnInfo;
121+
return Respond(pConnInfo, {
122+
h: 'connectResp',
123+
d: _Id,
124+
r: pStatus,
125+
});
126+
}
127+
116128
async function RespondJoin(pConnInfo: ConnInfo, pStatus: string) {
117129
const { id: _Id, conn: _Conn } = pConnInfo;
118130
const { name: _Name } = _Conn;

0 commit comments

Comments
 (0)