Skip to content

Commit 7aacc9d

Browse files
RichardTMilesRichardTMiles
committed
more cli mo betta
1 parent fc5a34d commit 7aacc9d

File tree

2 files changed

+452
-231
lines changed

2 files changed

+452
-231
lines changed

‎console.html

+150-108
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
1-
21
<!DOCTYPE html>
32
<html lang="en">
43
<head>
5-
<meta charset='UTF-8'/>
6-
<style type="text/css">
7-
<!--
4+
<meta charset="UTF-8"/>
5+
<title>PHP WebSocket Chat</title>
6+
<style>
7+
body {
8+
background-color: #0f0f0f;
9+
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
10+
color: #333;
11+
}
12+
813
.chat_wrapper {
914
width: 500px;
10-
margin-right: auto;
11-
margin-left: auto;
12-
background: #CCCCCC;
13-
border: 1px solid #999999;
15+
margin: auto;
16+
background: #f2f2f2;
17+
border: 1px solid #ccc;
1418
padding: 10px;
15-
font: 12px 'lucida grande', tahoma, verdana, arial, sans-serif;
1619
}
1720

18-
.chat_wrapper .message_box {
19-
background: #FFFFFF;
21+
.message_box {
22+
background: #fff;
2023
height: 150px;
2124
overflow: auto;
2225
padding: 10px;
23-
border: 1px solid #999999;
26+
border: 1px solid #ccc;
2427
}
2528

26-
.chat_wrapper .panel input {
27-
padding: 2px 2px 2px 5px;
29+
.panel input {
30+
padding: 2px 5px;
31+
margin-right: 4px;
2832
}
2933

3034
.system_msg {
31-
color: #BDBDBD;
35+
color: #bdbdbd;
3236
font-style: italic;
3337
}
3438

@@ -37,129 +41,167 @@
3741
}
3842

3943
.user_message {
40-
color: #88B6E0;
44+
color: #88b6e0;
4145
}
42-
body {
43-
background-color: rgba(15, 15, 15);
44-
}
45-
46-
-->
4746
</style>
48-
<title>PHP WebSocket</title>
4947
</head>
5048
<body>
51-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
52-
53-
<script language="javascript" type="text/javascript">
54-
function isJson(item) {
55-
let value = typeof item !== "string" ? JSON.stringify(item) : item;
56-
try {
57-
value = JSON.parse(value);
58-
} catch (e) {
59-
return false;
60-
}
61-
62-
return typeof value === "object" && value !== null;
63-
}
64-
65-
let colours = ['007AFF', 'FF7000', 'FF7000', '15E25F', 'CFC700', 'CFC700', 'CF1100', 'CF00BE', 'F00'];
66-
let user_colour = colours[Math.floor(Math.random() * colours.length)];
67-
68-
$(document).ready(function () {
69-
70-
71-
$('#connect-btn').click(function () {
72-
let wsUri = "ws://" + window.location.hostname + ":" + window.location.port + "/index.php";
73-
websocket = new WebSocket(wsUri);
74-
75-
websocket.onopen = function (ev) {
76-
$('#message_box').append("<div class=\"system_msg\">Connected!</div>");
77-
};
78-
79-
// Rest of your WebSocket event handlers...
49+
<script>
50+
51+
document.addEventListener('DOMContentLoaded', function () {
52+
const chatApp = {
53+
colours: [
54+
'007AFF', 'FF7000', '15E25F', 'CFC700', 'CF1100', 'CF00BE', 'F00',
55+
'00D1FF', 'F14CC8', '7FFF00', 'FFD700', 'FF4500', '00FA9A',
56+
'8A2BE2', 'DC143C', '00FFFF', '20B2AA', 'FF6347', '800080',
57+
'FF69B4', 'FFA500', 'B0C4DE', '8B008B', '2E8B57', '4682B4',
58+
'D2B48C', '008080', 'D8BFD8', 'FFC0CB', 'DDA0DD', 'ADFF2F',
59+
'9ACD32', '6A5ACD', 'BDB76B', '006400', '4B0082', '7CFC00',
60+
'F08080', '66CDAA', '0000CD', 'BA55D3', '9370DB', '3CB371',
61+
'7B68EE', '48D1CC', 'C71585', '191970', 'FFE4E1', 'FFEBCD',
62+
'556B2F', 'FFDEAD', '87CEFA', '32CD32', 'FAF0E6', 'FFDAB9',
63+
'CD5C5C', 'F0FFF0', '228B22', 'FF00FF', 'DCDCDC', 'F5FFFA',
64+
'FFFAF0', 'B0E0E6', '800000', '666666', 'BDB76B', '4169E1',
65+
'8B4513', 'FA8072', 'FAA460', '2E8B57', 'A0522D', 'C0C0C0',
66+
'87CEEB', '6B8E23', 'FFB6C1', 'FFFACD', '6495ED', 'FFF5EE',
67+
'6B8E23', 'FFA07A', 'FFA500', 'FFFF00', '00FF00', 'AFEEEE',
68+
'DB7093', 'FFEFD5', 'FFDAB9', 'CD853F', 'FFC0CB', 'DDA0DD',
69+
'B0E0E6', '800080', '663399', 'FF0000', 'BC8F8F', '4169E1',
70+
'8B4513', 'FA8072', 'FAA460', '2E8B57', 'A0522D', 'C0C0C0',
71+
'87CEEB', '6B8E23', 'FFB6C1', 'FFFACD', '6495ED', 'FFF5EE'
72+
],
73+
websocket: null,
74+
userColour: null,
75+
76+
init() {
77+
this.userColour = this.colours[Math.floor(Math.random() * this.colours.length)];
78+
this.bindEvents();
79+
},
80+
81+
bindEvents() {
82+
document.getElementById('connect-btn').addEventListener('click', () => this.connectWebSocket());
83+
document.getElementById('send-btn').addEventListener('click', () => this.sendMessage());
84+
document.getElementById('terminate-btn').addEventListener('click', () => this.terminateConnection());
85+
},
86+
87+
connectWebSocket() {
88+
const connectButton = document.getElementById('connect-btn')
89+
connectButton.textContent = 'Connecting...';
90+
connectButton.disabled = true;
91+
92+
const wsUri = `ws://${window.location.hostname}:${window.location.port}/index.php`;
93+
this.websocket = new WebSocket(wsUri);
94+
this.websocket.onopen = () => {
95+
this.appendMessage("Connected!", 'system_msg');
96+
this.updateButtonVisibility();
97+
};
8098

81-
$('#terminate-btn').click(function () {
82-
if (websocket) {
83-
websocket.close();
99+
this.websocket.onmessage = (ev) => this.displayMessage(ev);
100+
this.websocket.onerror = (ev) => this.appendMessage(`Error Occurred - ${ev.data}`, 'system_error');
101+
this.websocket.onclose = () => {
102+
this.appendMessage("Connection Closed", 'system_msg');
103+
this.updateButtonVisibility();
104+
connectButton.textContent = 'Connect';
105+
connectButton.disabled = false;
106+
};
107+
},
108+
109+
isJsonString(item) {
110+
let value = typeof item !== "string" ? JSON.stringify(item) : item;
111+
try {
112+
value = JSON.parse(value);
113+
} catch (e) {
114+
return false;
115+
}
116+
return typeof value === "object" && value !== null;
117+
},
118+
displayMessage(ev) {
119+
console.log(ev.data);
120+
if (!this.isJsonString(ev.data)) {
121+
this.appendMessage(ev.data, 'system_msg');
122+
return;
84123
}
85-
});
124+
const data = JSON.parse(ev.data);
125+
console.log('isJson', data)
86126

87-
websocket.onopen = function (ev) { // connection is open
88-
$('#message_box').append("<div class=\"system_msg\">Connected!</div>"); //notify user
89-
};
127+
const {type, message, name, color} = data.payload;
128+
const messageElement = type === 'usermsg'
129+
? `<div><span class='user_name' style='color:#${color}'>${name}</span>: <span class='user_message'>${message}</span></div>`
130+
: `<div class='system_msg'>${message}</div>`;
90131

91-
$('#send-btn').click(function () { //use clicks message send button
92-
let mymessage = $('#message').val(), //get message text
93-
myname = $('#name').val(); //get user name
132+
this.appendMessage(messageElement);
133+
},
94134

95-
if (myname === "") { //empty name?
135+
sendMessage() {
136+
const $message = document.getElementById('message');
137+
const myMessage = $message.value.trim();
138+
const myName = document.getElementById('name').value.trim();
139+
140+
if (!myName) {
96141
alert("Enter your Name please!");
97142
return;
98143
}
99-
if (mymessage === "") { //emtpy message?
100-
alert("Enter Some message Please!");
144+
if (!myMessage) {
145+
alert("Enter some message please!");
101146
return;
102147
}
103148

104-
//prepare json data
105-
let msg = {
106-
message: mymessage,
107-
name: myname,
108-
color: user_colour
149+
const msg = {
150+
type: 'usermsg',
151+
message: myMessage,
152+
name: myName,
153+
color: this.userColour
109154
};
110-
//convert and send data to server
111-
websocket.send(JSON.stringify(msg));
112-
});
113-
114-
//#### Message received from server?
115-
websocket.onmessage = function (ev) {
116155

117-
let json = isJson(ev.data);
156+
this.websocket.send(JSON.stringify(msg));
157+
$message.value = ''; // Reset message input
158+
},
118159

119-
if (json === false) {
120-
$('#message_box').append("<div class=\"system_msg\">onMessage: " + ev.data + "</div>");
121-
return;
160+
appendMessage(content, className = '') {
161+
const messageBox = document.getElementById('message_box');
162+
const div = document.createElement('div');
163+
if (className) {
164+
div.className = className;
122165
}
123-
124-
let msg = JSON.parse(ev.data)?.payload;
125-
126-
console.log(ev,msg);
127-
128-
let type = msg.type, //message type
129-
umsg = msg.message, //message text
130-
uname = msg.name, //user name
131-
ucolor = msg.color; //color
132-
133-
if (!type || type === 'usermsg') {
134-
$('#message_box').append("<div><span class=\"user_name\" style=\"color:#" + ucolor + "\">" + uname + "</span> : <span class=\"user_message\">" + umsg + "</span></div>");
135-
}
136-
if (type === 'system') {
137-
$('#message_box').append("<div class=\"system_msg\">" + umsg + "</div>");
166+
div.innerHTML = content;
167+
messageBox.appendChild(div);
168+
},
169+
170+
updateButtonVisibility() {
171+
const connectBtn = document.getElementById('connect-btn');
172+
const terminateBtn = document.getElementById('terminate-btn');
173+
174+
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
175+
connectBtn.style.display = 'none';
176+
terminateBtn.style.display = 'block';
177+
} else {
178+
connectBtn.style.display = 'block';
179+
terminateBtn.style.display = 'none';
138180
}
181+
},
139182

140-
$('#message').val(''); //reset text
141-
};
142-
143-
websocket.onerror = function (ev) {
144-
$('#message_box').append("<div class=\"system_error\">Error Occurred - " + ev.data + "</div>");
145-
};
146-
websocket.onclose = function (ev) {
147-
$('#message_box').append("<div class=\"system_msg\">Connection Closed</div>");
148-
};
149-
});
183+
terminateConnection() {
184+
if (this.websocket) {
185+
this.websocket.close();
186+
this.websocket = null;
187+
}
188+
}
189+
};
150190

191+
chatApp.init();
151192
});
152193
</script>
153194
<div class="chat_wrapper">
154195
<div class="message_box" id="message_box"></div>
155196
<div class="panel">
156-
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" style="width:20%"/>
157-
<input type="text" name="message" id="message" placeholder="Message" maxlength="80" style="width:60%"/>
197+
<label for="name">Name</label><input type="text" name="name" id="name" placeholder="Your Name" maxlength="10"
198+
style="width:20%"/><br/>
199+
<label for="message">New Message</label><input type="text" name="message" id="message" placeholder="Message"
200+
maxlength="80" style="width:60%"/><br/>
158201
<button id="send-btn">Send</button>
159202
<button id="connect-btn">Connect</button>
160-
<button id="terminate-btn">Terminate</button>
203+
<button id="terminate-btn" style="display:none;">Terminate</button>
161204
</div>
162205
</div>
163-
164206
</body>
165207
</html>

0 commit comments

Comments
 (0)