-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex_02_2.html
75 lines (71 loc) · 2.61 KB
/
index_02_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
#chatLogDiv {
overflow: scroll;
resize: vertical;
min-height: 200px;
max-height: 400px;
border: solid 1px;
padding: 4;
border-radius: 4px;
}
</style>
</head>
<body>
<form id="chatForm">
<input data-id="name" size="8" type="text" value="匿名">
<input data-id="message" size="20" type="text" placeholder="送信するメッセージ">
<button type="submit">送信</button>
</form>
<div id="chatLogDiv">
<template data-id="logTemplate">
<span data-id="name"></span>: <span data-id="message"></span><br/>
</template>
</div>
<script src="https://fungo.kcg.edu/madoi-20220920/js/madoi.js"></script>
<script>
window.addEventListener("load", ()=>{
// HTML内のタグをJavaScriptから操作するために，対応するElementオブジェクトを取り出す。
const chatForm = document.getElementById("chatForm");
const nameInput = chatForm.querySelector("[data-id='name']");
const messageInput = chatForm.querySelector("[data-id='message']");
const chatLogDiv = document.getElementById("chatLogDiv");
const logTemplate = chatLogDiv.querySelector("[data-id='logTemplate']");
// ログ領域にチャットメッセージを追加する関数
addLog = (name, message)=>{
const log = logTemplate.content.cloneNode(true);
log.querySelector("[data-id='name']").textContent = name;
log.querySelector("[data-id='message']").textContent = message;
chatLogDiv.append(log);
chatLogDiv.scrollTop = chatLogDiv.scrollHeight;
};
// Madoiライブラリを使ってサービスに接続する。引数はルーム識別文字列。
const m = new madoi.Madoi("chat-sfsfasfss");
// 本来のaddLog関数をoriginaladdLogに退避しておく
const originaladdLog = addLog;
// addLogをプロキシ(代理)で置き換え
addLog = function(name, message){
m.broadcast("addLog", {name, message});
}
// チャットフォームのsubmitイベントで，addLog(置き換え済み)を実行する。
chatForm.addEventListener("submit", e => {
e.preventDefault();
const name = nameInput.value.trim();
const message = messageInput.value.trim();
if(message.length > 0){
addLog(name, message);
messageInput.value = "";
}
});
// addLogメッセージが届いたら，addLog関数を実行する。
m.setHandler("addLog", ({name, message})=>{
// 退避しておいた本来のaddLogを実行する
originaladdLog(name, message);
});
});
</script>
</body>
</html>