-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
140 lines (116 loc) · 3.47 KB
/
main.js
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
localStorage.debug = '*'
const debugSocket = require('debug')('main:socket')
const config = require('./config')
const Action = require('./module/Action')
const util = require('./static/util')
const $messageForm = $('#message-form')
const $messageInput = $('#message-input')
const $messages = $('#messages')
const $userId = $('#user-id')
const $spam = $('#spam')
// https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
const scheme = (location.protocol === 'https:') ? 'wss' : 'ws'
const host = `${scheme}://${location.hostname}:${location.port}`
const ws = new WebSocket(host)
const eventKey = config.eventKey
const readyStateKey = config.readyStateKey
// app
// ================================================================ UI
const ui = {
/**
* Update userId
*
* @param {string}
*/
userId: id => {
// ui
$userId.html(id)
},
/**
* @param {Payload} payload
*/
addPayload: payload => {
const $message = $('<div>', {class: 'message'})
const html = `${util.short(payload.userId)}: ${payload.message}`
$message.html(html)
$messages.append($message)
}
}
// ================================================================ Handle element
$messageForm.submit((e) => {
e.preventDefault()
const message = $messageInput.val()
send(eventKey.message, message)
})
$spam.click((e) => {
const message = generateLoremSentence()
send(eventKey.message, message)
})
// ================================================================ Function
function generateLoremSentence() {
const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in justo in leo pretium pulvinar auctor id libero. Maecenas varius volutpat arcu eget egestas. Fusce at dui at risus cursus accumsan. Aenean sagittis pellentesque justo id fringilla.'
const sentences = loremText.match(/[^\.!\?]+[\.!\?]+/g);
const randomIndex = Math.floor(Math.random() * sentences.length)
return sentences[randomIndex].trim()
}
/**
* @param {string} key
* @param {string} data
* @param {function} successCb
* @param {function} errorCb
*/
function send (key, data, successCb, errorCb) {
if (!ws || ws.readyState !== readyStateKey.open) return false
try {
const action = new Action(key, data)
const actionStr = JSON.stringify(action)
ws.send(actionStr)
debugSocket('send ok', action)
if (successCb) successCb()
} catch (e) {
if (e) debugSocket('send error', e)
if (errorCb) errorCb()
}
}
// ================================================================ WebSocket
/** @type {MessageEvent} */
ws.onmessage = (messageEvent) => {
const actionStr = messageEvent.data
try {
/** @type {Action} */
const action = JSON.parse(actionStr)
switch (action.key) {
case eventKey.userConnect:
/** @type {Connected} */
const connected = action.data
// ui
ui.userId(connected.userId)
connected.payloads.forEach(payload => {
ui.addPayload(payload)
})
break
case eventKey.newMessage:
/** @type {Payload} */
const payload = action.data
// ui
ui.addPayload(payload)
break
default:
debugSocket('invalid eventKey', action)
break
}
} catch (e) {
debugSocket('handle websocket event error', e)
}
}
/** @type {CloseEvent} */
ws.onclose = (e) => {
debugSocket('ws.onclose', e)
}
/** @type {Event} */
ws.onopen = (e) => {
debugSocket('ws.onopen', e)
}
ws.onerror = (e) => {
debugSocket('ws.onerror', e)
}