01.
<html>
02.
<head>
03.
<meta charset=
"UTF-8"
>
04.
<title></title>
05.
<script src=
"socket.io.js"
>
06.
</script>
07.
<script src=
"jquery-1.9.1.js"
>
08.
</script>
09.
<script>
10.
$(document).ready(
function
() {
11.
$(
'#chatboard'
).text(
""
);
12.
var
name = prompt(
"Please enter your name?"
,
""
);
13.
wsUri =
'http://'
+ (document.location.host) +
':9999'
; // เขียนurlติดต่อไปยัง server ในพอร์ต 9999
14.
var
socket = io.connect(wsUri);
15.
socket.emit(
'sendName'
, {name: name.trim()});
16.
socket.on(
'sendName'
,
function
(data) {
17.
$(
'#chatboard'
).append(data.name.trim() +
"\r\n"
);
18.
});
19.
socket.on(
'sendMsg'
,
function
(data) {
20.
$(
'#chatboard'
).append(data.message.trim() +
"\r\n"
);
21.
});
22.
socket.on(
'disconnected'
,
function
(data) {
23.
$(
'#chatboard'
).append(data.name.trim() +
"'s Disconnect\r\n"
);
24.
});
25.
$(
'#messagebox'
).keypress(
function
(evt) {
26.
if
(event.which === 13) {
27.
var
message = $(
'#messagebox'
).val();
28.
$(
'#messagebox'
).val(
""
);
29.
socket.emit(
'sendMsg'
, {message: message});
30.
}
31.
});
32.
$(
'#button'
).click(
function
() {
33.
var
message = $(
'#messagebox'
).val();
34.
$(
'#messagebox'
).val(
""
);
35.
socket.emit(
'sendMsg'
, {message: message});
36.
});
37.
38.
});
39.
40.
</script>
41.
</head>
42.
<body>
43.
<div
class
=
"chat-room"
>
44.
<table>
45.
<tr>
46.
<td colspan=
"2"
>
47.
<textarea id=
"chatboard"
readonly=
"readonly"
rows=
'10'
cols=
'50'
style=
'resize:none;'
>
48.
49.
</textarea>
50.
</td>
51.
</tr>
52.
<tr>
53.
<td>
54.
<input type=
'text'
id=
'messagebox'
maxlength=
"100"
style=
'width:100%;'
/>
55.
</td>
56.
<td>
57.
<input type=
'button'
id=
"button"
value=
'Send'
/>
58.
</td>
59.
</tr>
60.
</table>
61.
</div>
62.
</body>
63.
</html>