/
index.html
107 lines (106 loc) · 4.33 KB
/
index.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header">
<h1 class="header__title">Chat</h1>
<span id="user-name" class="header__name"></span>
</header>
<main class="chat">
<ul id="chat-log" class="chat__log"></ul>
</main>
<footer class="footer">
<form class="footer__form">
<input type="text" id="message-box" class="footer__form__message" autofocus placeholder="Right down the message!">
<button type="button" id="btn-submit" class="footer__form__button">Submit</button>
</form>
</footer>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io.connect()
socket.on('self-post', (time, name, text) => {
const content = document.createElement('div')
content.className = 'self'
createMessageNode(content, text, time, name)
})
socket.on('others-post', (time, name, text) => {
const content = document.createElement('div')
content.className = 'others'
createMessageNode(content, text, time, name)
})
socket.on('login', (time, name) => {
if (name !== null) {
const content = document.createElement('p')
content.className = 'log'
text = `${time}: ${name}さんが入室しました。`
content.innerText = text
createMessageNode(content)
}
})
socket.on('logout', (time, name) => {
if (name !== null) {
const content = document.createElement('p')
content.className = 'log'
text = `${time}: ${name}さんが退室しました。`
content.innerText = text
createMessageNode(content)
}
})
const name = prompt('Input your name.')
document.getElementById ('user-name').innerText = name
if (name !== null) {
socket.emit('login', name)
}
document.getElementById('btn-submit').addEventListener('click', () => {
const input = document.getElementById('message-box')
const text = input.value
if (text !== '') {
socket.emit('post', name, text)
input.value = ''
}
}, false)
const createMessageNode = (content, text, time, name) => {
content.classList.add('chat__log__container__contents')
if (!!text && !time) {
const textBox = createNode('div', 'chat__log__container__contents__text', text)
content.appendChild(textBox)
}
if (!!text && !!name) {
const textBox = createNode('div', 'chat__log__container__contents__wrapper__text', text)
const nameBox = createNode('div', 'chat__log__container__contents__wrapper__username', name)
const wrappedBox = wrapContents('div', 'chat__log__container__contents__wrapper', textBox)
wrappedBox.appendChild(nameBox)
content.appendChild(wrappedBox)
}
if (!!time) {
const timeBox = createNode('span', 'chat__log__container__contents__time', time)
content.appendChild(timeBox)
}
createMessage(content)
}
const createNode = (element, classname, content) => {
const wrapperBox = document.createElement(element)
wrapperBox.className = classname
wrapperBox.innerText = content
return wrapperBox
}
const wrapContents = (element, classname, content) => {
const wrapper = document.createElement(element)
wrapper.className = classname
wrapper.appendChild(content)
return wrapper
}
const createMessage = (content) => {
const li = wrapContents('li', 'chat__log__container', content)
const ul = document.getElementById('chat-log')
ul.appendChild(li)
}
</script>
</body>
</html>